Html5 (audio) on Safari & iOS

15
votes

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.

5
ioshtmlaudiosafaricompatibility
I think you need WAV, PCM or AAC format for Audio on safari. as per this - Ravi Dhoriya ツ
You should look at this too. Its similar problem. - Ravi Dhoriya ツ
I have no problems to play the files, do you think the format is linked with "controls display" ? - ccarrez
I have no JavaScript problems. In fact, I just want to use Html5 tags with their default functions. - ccarrez
I'm not well experienced with this tag, but I just guessed. May be other link will help you. - Ravi Dhoriya ツ

5 Answers

6
votes

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>
2
votes

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>
1
votes

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

1
votes

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.

0
votes

same here with amp-audio

this css (sass actually) fix the problem

amp-audio {
    [class*="amphtml-fill-content"] {
        width: 100%;
    }
}