Login/Register
Html5 (audio) on Safari & iOS
Asked Answered
Solved ioshtmlaudiosafaricompatibility
B

6

19

I am working on a web application and I have one compatibility problem with Apple devices & Safari on PCs.

Html5 audio tag:

<audio controls>
<source src="/audio/en/file.mp3" type="audio/mpeg">
<source src="/audio/en/file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
  • I just want to play an audio file with basic controls.
  • The previous code works perfectly on Chrome, Opera, Firefox (Windows & Android devices).
  • But controlers do no appear with Safari (tested with the latest version on PC, iPad & iPad mini).
  • Audio player have a grey background with only "play/pause" function.
  • Here is a screenshot that describes my problem :

Image

Thanks.

Brigette answered 22/7, 2014 at 7:59 Comment(5)
I think you need WAV, PCM or AAC format for Audio on safari. as per this – Calondra
You should look at this too. Its similar problem. – Calondra
I have no problems to play the files, do you think the format is linked with "controls display" ? – Brigette
I have no JavaScript problems. In fact, I just want to use Html5 tags with their default functions. – Brigette
I'm not well experienced with this tag, but I just guessed. May be other link will help you. – Calondra
P
10

I had exactly the same problem.

My solution: I added the full URL for the audiofile source. Don't know why but it makes a difference. Here's my full code. The CSS modifications are only to hide the download button. But when I take it out I don't see the timeline. Very strange but exactly this code works for me.

<!DOCTYPE html>
<html>
<head>
    <title>html5 audio player on iPhone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-internal-media-controls-download-button {
    display:none;
}
audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}
audio::-webkit-media-controls-panel {
    width: calc(100% + 33px);
}  
</style>
</head>
<body>
<audio controls preload="auto" style="width:100%;">
    <source src="https://example.com/audio/audiofile.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio><br />
</body>
</html>
Pice answered 31/3, 2017 at 6:11 Comment(2)
>My solution: I added the full URL for the audiofile source. Don't know why but it makes a difference. You are a hero. I am also going to stop screaming into the void now. Brother you have no idea how many developer hours just got burned up today and yesterday trying to get to the bottom of this. Just wow. Wow. Anyway, this small comment among a sea of potential solutions saved the day. You are a hero. Please PM your address for a medal I will sign and send in the mail. – Circlet
The problem that led me to this page is that I'm trying to get it to display the download button. iOS it doesn't seem to be offering the option. (Clicking on the three dots on the right only produces a "Playback Speed" drobdown.) Commenting-out the above CSS or changing it to "display:1" works on desktop but still on iOS there's no download button. :-/ – Densify
C
8

It seems the actual "fix" was really simple for me - all I needed is to make sure <audio> tag has enough width to show all the controls. See screenshot below enter image description here

Upper version

<audio controls preload="auto" style="width:100%;" >
    <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>

Bottom Version

<audio controls preload="auto">
        <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
Clerissa answered 19/1, 2020 at 3:3 Comment(2)
I'd like an explanation on downvote - if the solution does not work, it would be useful for others [and myself] to know what what the code that was used and still didn't work. – Clerissa
This fixed the problem for me. It now shows all the controls such as volume and airplay. However, with this set it shows less than before on mobile. It crops it down to a single play button without any bar at all. Also, the volume slider which pops up vertically tends to get clipped at the top of tables and such. Haven't found a workaround for that. – Fraley
T
1

It may sound odd, but check that your HTML page has a as the first line. 

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page's code follows...

Safari is known to not render HTML-5 content without the proper DOCTYPE.

More Info: http://www.wimpyplayer.com/docs/common/doctype.html

Trews answered 30/7, 2014 at 13:48 Comment(1)
I'll check it next week. Thx. – Brigette
C
1

Searched for too long for this simple answer after it was working on Andriod, and I finally tested on iOS, this works if you're using ionic 

import {normalizeURL} from 'ionic-angular';

MediaSource = document.createElement("audio");
MediaSource.src = normalizeURL(cordova.file.dataDirectory + file.fullPath);

Hope this helps.

Circumference answered 22/7, 2019 at 10:10 Comment(1)
What will be the replacement of it in ionic ^4 or ionic 5? – Harned
S
0

same here with amp-audio

this css (sass actually) fix the problem

amp-audio {
    [class*="amphtml-fill-content"] {
        width: 100%;
    }
}
Soniferous answered 21/11, 2020 at 16:16 Comment(0)
S
0

I know that this posting is quite old - but experienced this problem and the solution did not solve my problem and with a little research and experimentation discovered that simply renaming the audio file with an extension of ".wav" instead of it's original ".mp3" (and of course making sure that the same file was renamed on the server). It solved the issue for IOS browsers playing it.

Journey of Discovery: I was reading about a similar issue elsewhere (https://community.openai.com/t/issues-with-audio-files-from-ios-and-the-x-m4a-format/794701/12) and was going to actually convert the file to a .wav format - but tried a simple rename first - and it worked!

Spiteful answered 23/7 at 19:35 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.