Safari with audio tag not working
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
};
})();
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.
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>