21-设置音频播放器的值

7.5.3　设置音频播放器的值

在canvasApp()函数中，需要创建一些数值，以帮助将各种不同的按钮和滑块放置在画布上。

首先，bH表示所有控件的高度，bW表示一个标准按钮的宽度（播放/暂停按钮、循环/不循环按钮）。

var bW = 32;
var bH = 32;

接下来，设置回放区域的宽度playBackW和音量背景的宽度volBackW。另外，还要设置滑块的宽度sliderW和高度sliderH。

var playBackW = 206;
var volBackW = 50;
var sliderW = 10;
var sliderH = 32;

需要两个变量来表示画布上建立音频控件的x轴和y轴坐标位置。这里将其定义为controlStartX和controlStartY。

var controlStartX = 25;
var controlStartY = 200;

需要指定播放/暂停按钮的x轴和y轴坐标位置（playX，playY），播放滑块背景的位置（playBackX，playBackY），音量滑块的背景位置（volBackX，volBackY）和循环/不循环切换按钮的位置（loopX，loopY）。

var playX = controlStartX;
var playY = controlStartY;
var playBackX = controlStartX+bW
var playBackY = controlStartY;
var volBackX = controlStartX+bW+playBackW;
var volBackY = controlStartY;
var loopX = controlStartX+bW+playBackW+volBackW
var loopY = controlStartY;

使用所有这些值来设计音频控件并为其添加功能。创建如此多的变量可能看起来有点小题大做，但是当试图在画布上的自行研发碰撞检测和拖拽功能时，比起直接操作数值，使用变量名来操作会使工作变得更容易。