HTML and CSS Reference
In-Depth Information
if (volumeSliderX < volumeSliderStart) {
volumeSliderX = volumeSliderStart;
If the volumeSliderDrag is false , we still need an x position at which to draw the slider
graphic. We get this the same way we calculated the volumeSliderX when we initialized
the variable in the canvasApp() function:
} 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 lang="en">
<meta charset="UTF-8">
<title>CH7EX5: A Custom Sound Player On The Canvas</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
Search WWH ::

Custom Search