Creating a javaScript JukeBox
This jukebox page uses javaScript to change the source of an HTML5 audio player depending on which button is active. The code for this is fairly straight forward, however, whilst writing it I encountered a few issues relating to using the HTML 5 range slider to monitor and control the audio progress. Things to note are as follows:
1) Querying the video duration returns a string not a number so I had to convert before I could use it.
2) Video duration meta data is not instantaneous so I had to use player.onloadedmetadata = function() {.......} to use it
3) The HTML5 range sliders are not responsive to window width changes (you have to re-load)