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">
<head>
<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">
