HTML and CSS Reference
In-Depth Information
} else
else {
volumeSliderX = volumeSliderStart + ( audioElement . volume *
( volBackW - sliderW ));
}
Finally, we draw the slider onto the canvas:
context . drawImage ( buttonSheet , 238 , 0 , sliderW , bH , volumeSliderX ,
volumeSliderY , sliderW , bH );
audioElement . volume = ( volumeSliderX - volumeSliderStart ) * volumeIncrement ;
Figure 7-6 displays the custom controls in the browser.
Figure 7-6. Canvas sound player with custom controls
So there you have it. You can test the audio player as CH7EX5.html in the source code. The
full code listing for the HTML5 Canvas audio player is shown in Example 7-5 .
Example 7-5. A custom audio player on the canvas
<!doctype html>
<html
<html lang= "en" >
<head>
<head>
<meta
<meta charset= "UTF-8" >
<title>
<title> CH7EX5: A Custom Sound Player On The Canvas </title>
</title>
Search WWH ::




Custom Search