音量控制
接下来我们来对音量条两边的两个小喇叭添加事件监听，使得通过点击左右两个小喇叭可以减小和增加当前播放的音量。要设置播放器的音量，我们可以调用audio元素中所提供的volume属性。volume值最大为1，最小为0，在这里我们通过每次点击喇叭增减0.1的音量来实现音量的控制。当然你也可以使用别的值。但要注意的是javascript语言不能对小数提供精准的控制，所以每次减少0.1的音量时实际上减少的音量是稍微地大于0.1的，这导致当连续点击9次音量减少的按钮时剩下0.09xxxx的音量，然后你会发现播放器怎么无法静音了。。。当然这个问题是很容易解决的（如下所示），只是稍作提醒。
复制代码
$(“.volume_control .decrease”).click(function() {
var volume = myAudio.volume – 0.1;
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(“.volume_control .increase”).click(function() {
var volume = myAudio.volume + 0.1;
volume > 1 && (volume = 1);
myAudio.changeVolumeTo(volume);
});
另外我们还需要实现使用滑动器或者点击音量条某一位置来调控音量的功能，有了上面的基础，这个就容易完成了。首先我们来看看点击音量条某一位置来调控音量的功能：点击音量条的某一位置，计算该由音量条的起点到该位置的长度值，再用该值除以总的音量条长度（在这里是100）得到百分比值，再用该百分比值乘以最大音量值1得到所要跳跃到的音量值，再赋值给volume。通过滑动器来调控音量的方法实现也与此类似，主要是要懂得如何计算滑动器在音量条的位置值。在此就不做详细解释，有问题可以下方留言。
复制代码
$(“.volume_control .base_bar”).mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var volume = (posX – targetLeft)/100;
volume > 1 && (volume = 1);
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(“.volume_control .slider”).mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this).position().left; /*滑块初始位置*/
var origX = ev.clientX; /*鼠标初始位置*/
var target = this;
var progress_bar = $(“.volume_control .progress_bar”)[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX – origX; /*计算鼠标移动的距离*/
var curLeft = origLeft + moveX; /*用鼠标移动的距离表示滑块的移动距离*/
(curLeft < -7) && (curLeft = -7);
(curLeft > 93) && (curLeft = 93);
target.style.left = curLeft + “px”;
progress_bar.style.width = curLeft + 7 + “%”;
