Working with Audio - HTML5 Canvas - page 580

Now we need to calculate the x position of the slider. The x position is the sum of the slider's
starting position (the place on the canvas where the controls start) plus the width of the play/
pause button ( controlStartX+bW ), plus the audio's current play position. We calculate the
play position by taking the ratio we just created, sliderIncrement , and multiplying it by the
current play time of the audio clip ( audioElement.currentTime ). That's it!

var sliderX = ( controlStartX + bW ) + ( slideIncrement * audioElement . currentTime );
Nowallweneedtodoisdrawtheimageontothecanvasandthentesttoseewhethertheaudio
clip has ended. If it has ended, we put the play position back to the beginning of the playback
area and call audioElement.pause() to pause the audio clip. That is, unless the loop prop-
erty is sent, in which case we start playing the audio clip from the beginning by setting the
currentTime property to 0 :

var

context . drawImage ( buttonSheet , 238 , 0 , sliderW , bH , sliderX , controlStartY , sliderW , bH );

iif ( audioElement . ended && ! audioElement . loop ) {
audioElement . currentTime = 0 ;
audioElement . pause ();

}

We also need to make sure to update timeWaited so that we don't accept too many events:

timeWaited ++ ;

This leads us right into our next topic, handling the play/pause button.