html5-audio

Why add multiple files with JavaScript when you can just detect the types supported? I would suggest instead detecting the best type then just setting the src. var source= document.createElement(‘source’); if (audio.canPlayType(‘audio/mpeg;’)) { source.type=”audio/mpeg”; source.src=”https://stackoverflow.com/questions/4053262/audio/song.mp3″; } else { source.type=”audio/ogg”; source.src=”https://stackoverflow.com/questions/4053262/audio/song.ogg”; } audio.appendChild(source); Add as many checks as you have file types.

On desktop Safari, adding AudioContext fixes the issue: const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext(); I found out by accident, so I have no idea why it works, but this removed the delay on my app.

Try this snippet list.onclick = function(e) { e.preventDefault(); var elm = e.target; var audio = document.getElementById(‘audio’); var source = document.getElementById(‘audioSource’); source.src = elm.getAttribute(‘data-value’); audio.load(); //call this to just preload the audio without playing audio.play(); //call this to play the song right away }; <ul style=”list-style: none”> <li>Audio Files <ul id=”list”> <li><a href=”#” data-value=”http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga”>Death_Becomes_Fur.oga</a></li> <li><a href=”#” … Read more

While loop is specified, it is not implemented in any browser I am aware of Firefox [thanks Anurag for pointing this out]. Here is an alternate way of looping that should work in HTML5 capable browsers: var myAudio = new Audio(“https://stackoverflow.com/questions/3273552/someSound.ogg”); myAudio.addEventListener(‘ended’, function() { this.currentTime = 0; this.play(); }, false); myAudio.play();