Safari with audio tag not working

Question

I am working with HTML5 audio tag with this simple code:

HTML

<audio id="audioFrenata">
<source src="sounds/frenata.ogg">
<source src="sounds/frenata.mp3"></audio>

JS

$('#audioFrenata').on('ended', function() {
        manageImageObjectsLevel();
    }).get(0).play();

with Chrome this works as expected, with Safari 5.1.7 on Windows and Safari on iPad 3 I receive this:

'undefined' is not a function (evaluating '$('#audioFrenata').on('ended', function() {
manageImageObjectsLevel();
}).get(0).play()')

Anyone has an idea of why?

Vomitory

Think undefined refers to stop() as in stop is not a function on your DOMNode #audioLevel. ( document.getElementById("audioLevel").stop === undefined ) – America

where is stop??is you refer to the 'ended' event, even if I eliminate it and only try to call play it will give the same error.. – Vomitory

@Matteo, did you find a solution to this question? – Spinet

Not yet..i'm still working on it.. – Vomitory

Answer 1

I have had the exact same problem, and I found that it is due to the following restriction in Safari:

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

Reference: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

One way to solve it, is to mute audio by default, and when the user "un-mutes" you can create the instance of an HTML5 Audio object and store that in a "static" / "global" variabel and use that for further playback.

-- UPDATE

Here is a blogpost describing the issue and how to deal with it: http://blog.gopherwoodstudios.com/2012/07/enabling-html5-audio-playback-on-ios.html

Here is a similar stackoverflow question discussing the same thing: Autoplay audio files on an iPad with HTML5

And here follows a JavaScript "module" I have written to use for handling playback of audio in HTML5:

NS.modules.html5.audio = (function () {

    var _snd = false;

    function playAudio(src) {
        if (!_snd)
            _snd = new Audio();
        else
            $(_snd).empty();

        for (var i = 0; i < src.length; i++) {
            var source = document.createElement('source');
            source.type = src[i].type;
            source.src = src[i].src;
            _snd.appendChild(source);
        }

        _snd.load(); // Needed on safari / idevice
        _snd.play();
    };

    var playAudio = function () {
        var src = [
            { src: "/path/to/audio.wav", type: "audio/vnd.wave" },
            { src: "/path/to/audio.ogg", type: "application/ogg; codecs=vorbis" },
            { src: "/path/to/audio.mp3", type: "audio/mpeg" }
        ];
        playAudio(src);
    };

    return {
        playAudio: playAudio,
        // more play functions here
    };
})();

Spinet

Wow!!! Nice, yes mobile browsers DO NOT automatically download/play audio files. For a metronome app I made, I had to start with the sound off, and when the user clicked/pressed on the sound icon (which I Had to initially disable) only then would it load and play! – Plater

Answer 2

In my case the problem was caused due to HTML format, I switched to the following format and it worked. Hope this helps somebody :

<audio id="audioFrenata" src="sounds/frenata.ogg"></audio>

Note the lack of <source> element in the above layout.

Furlong

This works for me, in Firefox, Chrome, and Safari (haven't tested any more). I find it strange though, that's not the format that I've seen used. – Vervet

This is not working on Safari with .ogg format. jsfiddle.net/q8fze1L3 – Krilov

Answer 3

I had the same problem and I solved it by putting type="audio/mpeg" before type="audio/ogg".

<audio controls>
  <source src="your-sound-url" type="audio/mpeg"></source>
  <source src="your-sound-url" type="audio/ogg"></source>
</audio>

Arneson

Answer 4

Check whether the HTML5 functionality you want is supported in the browsers that you mentioned. You can check it here. Hope this will help you.

Baruch

Answer 5

ID seems to be wrong.

$('#audioLevel').on('ended', function() {
     manageImageObjectsLevel();
}).get(0).play();

It suppose to be

$('#audioFrenata').on('ended', function() {
     manageImageObjectsLevel();
}).get(0).play();

Use below HTML

<audio id="audioFrenata"  controls="controls">
    <source src="sounds/frenata.ogg" type="audio/ogg">
    <source src="sounds/frenata.mp3" type="audio/mpeg">
</audio>​

Refer LIVE DEMO

Stringent

This solves the first problem with the question ( the wrong IDs ) - however, this will not make the iPad automatically playback the audio when visiting the jsFiddle - see my post for clarification ( I have cross checked on the iPad to make sure that it does not automatically playback when invoking .play() - as I mention in my post, the user must initiate the playback ;) – Spinet

This is still not working on Safari with .ogg format: jsfiddle.net/q8fze1L3 – Krilov