$(".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 + "%";
myAudio.changeVolumeTo((curLeft + 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$(document).unbind("mouseup",stopDrag);
});
});
时间控制
好了，现在播放器已经基本能用了，但我们还希望能够直接跳过音频的一部分到特定的时间点。那么要怎么实现呢？？！制定标准的委员们也不是傻子，这种常用的功能是不会有所疏漏的拉~所以赶紧翻翻API吧，你会发现audio元素提供了一个名为currentTime的属性，非常简明易懂的名称（其实大多属性都是很好理解的），设置该属性可以设置当前播放的时间点。
在这里，我们还需要使用audio的另一个属性duration，该属性指的是当前播放文件的总时间长度。因此根据音量控制的实现，我们可以这样做：
