HTML and CSS Reference
In-Depth Information
var playBackY = controlStartY;
var volBackX = controlStartX+bW+playBackW;
var volBackY = controlStartY;
var loopX = controlStartX+bW+playBackW+volBackW;
var loopY = controlStartY;
var mouseX;
var mouseY;
theCanvas.addEventListener("mouseup",eventMouseUp, false);
theCanvas.addEventListener("mousedown",eventMouseDown, false);
theCanvas.addEventListener("mousemove",eventMouseMove, false);;
audioElement.loop = false;
audioElement.volume = .5;
var volumeSliderStart = volBackX;
var volumeSliderEnd = volumeSliderStart + volBackW -sliderW;
var volumeSliderX = volumeSliderStart + (audioElement.volume*(volBackW -sliderW));
var volumeSliderY = controlStartY;
var volumeSliderDrag = false;
var volumeIncrement = 1/(volBackW -sliderW);
setInterval(drawScreen, 33);
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
Case Study in Audio: Space Raiders Game
If we were writing a topic about standard HTML5, we might be able to stop here and
continue on with another topic. However, there is a lot more to playing audio in an
application than simply getting a song to play and tracking its progress. In the last part
of this chapter, we will look at a case study: Space Raiders . We will iterate through
several ideas and attempts to get audio working in an efficient way in conjunction with
action on HTML5 Canvas.
Search WWH ::

Custom Search