Working with Audio - HTML5 Canvas - page 583

element that is playing. This inverse relationship exists because it is the standard way audio
players work.

If the audioElement is paused, we display the graphic from the top row of the audiocon-
trols.png image represented by buttonSheet . (See Figure 7-5 . ) If it is not paused, we display
the button on the second row right below it. Because that button starts at the y position of 32 ,
we use that literal value in the call to drawImage() :

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

}

NOTE

Again, we could have represented the literal values of locations in the buttonSheet with variables,
butwedecidedtouseliteralstoshowyouthedifferencebetweenhowwespecify buttonSheet pixel
locations and how we calculate widths and distances for placing those elements.