HTML5 Audio tag on Safari has a delay
I just answered another iOS/<audio>
question a few minutes ago. Seems to apply here as well:
Preloading <audio>
and <video>
on iOS devices is disabled to save bandwidth.
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.
Source: Safari Developer Library
Audio delay on Safari Desktop
I was not able to remove the delay completely, but I made it much better by setting preload
to ="metadata". For some reason it makes files load much quicker for playback.
Chrome actually is smart about this. When the preload is set to auto, it caches around 1mb of each audio file upon page load, so it can play it quicker when you press "Play" button.
I also started listening to onwaiting
event of the audio
element, so I can show the preloader to make experience a little bit better.
Since Safari fires oncanplay
and onplaying
much sooner when the file is actually ready to play, I don't just hide preloader on this events, but after a 1.5 second timeout to smooth it out.
That's good enough for me, since the lag decreased from 30 seconds (with 10 audio elements on page) to just 1.5 seconds.
Safari behaving very weirdy with HTML5 audio tag
You might have better luck and more control if you don't use the <audio>
tag. You'll need to make your own play button and slider if you want those controls. And use Web Audio API by itself to download and decode and play a track.
var url = "whatever.mp3";
var source = audioCtx.createBufferSource();
var buffers = {};
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function () {
audioCtx.decodeAudioData(request.response, function (buffer) {
source.buffer = buffer;
source.connect(audioCtx.destination);
source.start(audioCtx.currentTime);
// save this for later, so you can replay it without downloading
buffers[url] = buffer;
}, function () {
console.warn("error loading sound url: " + url);
});
}
request.send();
Audio delay on HTML5 mobile web app
The audio delay may be because of buffering issues in iOS that are there due to cellular data charges. The user has to explicitly trigger the event in order for the content to start being downloaded.
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.
-https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1
=== EDIT ===
One potential improvement is to use lower bitrate/ higher compressed audio for mobile products. The quality will, however, be significantly reduced. Use only if it is acceptable in your application.
Related Topics
How to Programmatically Click a Link with JavaScript
Event When Window.Location.Href Changes
How to Get Jquery to Select Elements with a . (Period) in Their Id
Determine Original Size of Image Cross Browser
Es6 Variable Import Name in Node.Js
JavaScript Require() Function Giving Referenceerror: Require Is Not Defined
How to Make JavaScript Object Using a Variable String to Define the Class Name
JavaScript Removeeventlistener Not Working
Why Does JavaScript Object Show Different Values in Console in Chrome, Firefox, Safari
Retrieving File Names Out of a Multi-File Upload Control with JavaScript
JavaScript Variables in HTML Attributes
How to Exchange Variables Between Two HTML Pages