I support several churches that don’t have musicians, by providing a little website with a bunch of pure Javascript so they can select music for their services from a collection of about 1100 mp3 and m4a music files. Previously, they created playlists in iTunes or Media Player, but after a track completed, the player would immediately start the next track unless they quickly clicked ‘Stop’. So my website allows them to select all their music ahead of time (up to 10 tracks), with a separate “Play” button for each. Hit “Play” and it plays that one track and stops. (Duh.)
I’m encountering delays in loading the files into my “audio” tags – and I need the file to load when they select it so I can display the track duration, which is frequently important to the selection of the music for the service. A delay doesn’t occur very often, but often enough to be annoying. Also, the load will occasionally time out completely, even after several attempts. I’ve experimented played with various techniques, like using setTimeout with different values to allow several seconds before checking if it’s loaded, or, loading 5 or 10 times with shorter timeout values until it’s loaded. I created a test page that indicates that the timeouts vary greatly – from 2% to 5% of the time, to upwards of 25% occasionally (during tests of 1,000 to 10,000 random loads).
My first technique was relying on events (I tried both ‘canplay’ and ‘canplaythrough’ events with minimal difference):
const testAudio = document.getElementById('test-audio');
let timeStart = Date.now();
function loadMusic(p_file) {
testAudio.src = p_file;
testAudio.addEventListener('canplaythrough', musicLoaded);
timeStart = Date.now();
testAudio.load();
}
function musicLoaded() {
console.log('music loaded in ' + (Date.now()-timeStart) + 'ms');
testAudio.removeEventListener('canplaythrough', musicLoaded);
/* should I add/remove the listener each time I change the source file ? */
}
My second approach (from a post here: https://stackoverflow.com/questions/10235919/the-canplay-canplaythrough-events-for-an-html5-video-are-not-called-on-firefox) is to check the ‘readyState’ of the audio element after a specified timeout, rather than relying on an event. This question specifically addressed Firefox, so I should mention that in my tests Firefox has horrible load times for both the “events” and the “readyState” techniques. Chrome and Edge vary in the range of 2% to 6% load failure due to timeout and Firefox has 27% to 39% load timeouts.
let myTimeout = '';
function loadMusic(p_file) {
myTimeout = setTimeout(fileTimeout, 1000); /* I've tried various values here */
testAudio.src = p_file;
timeStart = Date.now();
testAudio.load();
}
function fileTimeout() {
if (testAudio.readyState > 3) {
console.log('music loaded in ' + (Date.now()-timeStart) + 'ms');
} else {
/* here, I've tried calling loadMusic again 5 to 10 times, which sometimes works */
/* or, just reporting that the load failed... */
console.log('music FAILED to load!');
}
}
I have a shared server hosting plan, and I suspect the delay might be due to traffic on my server. Unfortunately, my hosting service turns a deaf ear to anything that might be application or content related (not surprising). And this isn’t worth upgrading to a dedicated server just to eliminate that variable. But I suspect that might be a major factor here.
I need a technique that will always work – even if it takes 30 seconds or more. As long as I can display an intermittent “Still loading…” type message I (and my users) would be satisfied. The “track X won’t load” messages happen often enough to be annoying. Early on, I had a few files with bad characters in the file name that needed to be fixed before they would load. So the users think that problem persists. But I know I’ve fixed all them now.
Any and all suggestions are welcome – but I’d love to keep everything in plain Javascript.
