Working with Audio - HTML5 Canvas - page 591

250 , 120 );
context . fillText ( "Source: " + audioElement . currentSrc , 20 , 140 );
context . fillText ( "volumeSliderDrag: " + volumeSliderDrag , 20 , 160 );

//Draw Controls

//play or pause

iif ( audioElement . paused ) {
context . drawImage ( buttonSheet , 0 , 0 , bW , bH , playX , playY , bW , bH ); //show play

} else else {

context . drawImage ( buttonSheet , 0 , 32 , bW , bH , playX , playY , bW , bH ); //show pause

}

//loop

iif ( audioElement . loop ) {
context . drawImage ( buttonSheet , 114 , 32 , bW , bH , loopX , loopY , bW , bH ); //show loop
} else else {

context . drawImage ( buttonSheet , 82 , 32 , bW , bH , loopX , loopY , bW , bH ); //show no loop

}

//play background
context . drawImage ( buttonSheet , 32 , 0 , playBackW , bH , playBackX , playBackY ,
playBackW , bH );

//vol Background
context . drawImage ( buttonSheet , 32 , 32 , volBackW , bH , volBackX , volBackY , volBackW , bH );

//play slider
var var slideIncrement = playBackW / audioElement . duration ;

var

var sliderX = ( controlStartX + bW ) +
( slideIncrement * audioElement . currentTime );
context . drawImage ( buttonSheet , 238 , 0 , sliderW , bH , sliderX ,
controlStartY , sliderW , bH );

//Go back to start
iif ( audioElement . ended && ! audioElement . loop ) {
audioElement . currentTime = 0 ;
audioElement . pause ();

}

//Volume slider
//Test Volume Drag