Working with Audio - HTML5 Canvas

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.play();

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);

}

</script>

</head>

<body>

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</body>

</html>

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

Home