ioshtmlaudiosafaricompatibility

Html5 (audio) on Safari & iOS


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>

Image

Thanks.


Solution

  • 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>