This week, we got another awesome song from Michael Shawn Carbaugh II! (At the moment, I'm going to make you wait to hear it though.) After receiving the song, I realized that we have some serious issues with audio looping in Maven's engine. There are basically three methods to looping audio that I have pondered.
Audio Loop Using Single Audio Element
Currently, the engine uses HTML5's audio element with the loop attribute.
The great thing about this method is that it is built into HTML5 and is very easy to implement. For example, the HTML for the example above is simply this:
1 2 3 4 5 6 7 8 9 10 11 12 | <button id="playAudioSingle">Play</button> <button id="pauseAudioSingle">Pause</button> <br/> <audio id="audioSingle" src="IntoDarknessHalfLoop.mp3" loop controls></audio> <script> document.getElementById("playAudioSingle").onclick = function() { document.getElementById("audioSingle").play(); }; document.getElementById("pauseAudioSingle").onclick = function() { document.getElementById("audioSingle").pause(); }; </script> |
However, as you may have noticed, the playback of the loop is imperfect, and the extent of this imperfection varies depending on the browser.