Here's where things start to get a little bit more hairy with JavaScript. First, let's set up an interval to update the progress bar. It's going to have to serve two functions, displaying the current time and changing the time. We'll start by adding references to these objects, as well as placing event hooks for every one of the audio events that we might want to attach to. The comments describe which events are fired when:
//for every song page $(document).on("pagecreate", ".songPage", function(){ var $page = $(this); var $currentAudio = $page.find("audio"); //set references to the playing status, progress bar, and //progress interval on the audio object itself $currentAudio.data("playing",false) .data("progressBar", $page.find("input.progressBar")).data("progressThread",null); //loadstart and progress occur with autoload $currentAudio[0].addEventListener('loadstart', function(){ //Fires when the browser starts looking ...