前我们已经把一个播放器的大概样子做出来了，这次我们要做的就是让它可以播放一首歌。 在制作之前我们先来说说我们这次所要用到的一个H5标签audio。
audio标签
在HTML5中我们可以直接使用标签来进行流媒体的使用，其中视频就是video标签，音频就是audio标签。 今天我们的主角就是用来播放音频的audio标签啦。下面是audio标签最基本的使用。
<audio src="xxx.mp3" autoplay="autoplay"></audio>
在src属性中填写音频的路径，再通过autoplay来让它自动播放就可以在页面中播放一段音乐了。
但是我们要制作音乐播放器，所以我们最需要了解的是如何使用JS来控制它以及它的一些事件。 下面我列举一下这个对象比较常用的方法、属性和事件。
audio.play()播放音频
audio.pause()暂停音频
audio.currentTime当前进度(秒)
audio.duration总时长(秒)
audio.onended播放结束事件
audio.onpause暂停事件
audio.onplaying开始播放事件
了解到这些以后我们已经可以开始这一次的开发了
进度条和音乐进度的绑定
接下来我们要先加入一个audio标签，标签的src指向我们准备好的音乐。设置autoplay来达到自动播放。
<audio id="music" src="mp3/梁静茹 - 小爱情.mp3" autoplay="autoplay"></audio>
修改我们上次做的进度条测试
var music = document.getElementById("music");
var run = function(){
setTimeout(run,20);
if(plan){
var bl = music.currentTime / music.duration;
plan.setAttribute("stroke-dashoffset",maxlen - maxlen * bl);
}
}
run();
上面的代码使得每20毫秒会让进度条的位置和进度同步一次，其中maxlen是在之前onload中计算出来的，我们这里也要先把他定义成全局的。 现在我们测试一下就会发现随着音乐的播放可以看到进度条的运动，基本的绑定已经完成了。
音乐进度的跳转
既然是音乐播放器那自然是要可以进行进度跳转才行啦，圆形的进度条怎么跳转呢？我们可以在进度条和背景上绑定鼠标事件， 通过鼠标的点击的点和中心点来计算角度。
有了水平和竖直方向的位置差可以通过arctan来求角度，不过这只能求到180度范围的，所以要做一些判断。
接下来我们要先对svg文件做些调整，打开AI调整一下图层的结构。
我们把背景圆和进度条都选中，然后编组，给这个整体取个名字，之后我们的事件就绑定在这个整体上面。 接下来我们开始编码。
var cir = dom.querySelector("#cir");
var bbox = cir.getBBox();
var cx = bbox.width/2 + bbox.x;
var cy = bbox.height/2 + bbox.y;
cir.onclick = function(e){
var offx = e.offsetX - cx;
var offy = e.offsetY - cy;
var r = -Math.atan(offx/offy);
if(offy > 0)
r -= Math.PI;
if(r < 0)
r += 2 * Math.PI;
music.currentTime = r / Math.PI / 2 * music.duration;
}
将上面的代码放入onload里面即可完成点击跳转。上面的cir是我在AI中为图层命的名，之后我们使用了BBox来获取中心点。 至于为什么中心点是width/2+x,height/2+x，我们来说明一下SVG的一些细节特性。
对于SVG里的对象而言，原点不是我们看到的部分的左上角，而是整个SVG画布的左上角（使用了transform的除外）。 所以对于事件而言，所得到的也是相对于画布左上角而言的相对位置。所以我们也要基于画布的左上角来寻找圆的中心点。
找到中心点之后就可以通过数学上的方法计算角度控制音乐的播放进度了，如果有更好的算法可以推荐我一下， 个人对算法关注的不多。
手动控制播放和暂停
接下来做一个简单的功能就结束这次的内容吧，我们首先还是要在AI中调整结构。
在播放按钮里面加入暂停符号，设置透明度为0，并为他们命名。然后将按钮的显示状态与播放器状态绑定。
播放结束切换成播放按钮
music.onended = function(){
if(play){
play.setAttribute("opacity",1);
pause.setAttribute("opacity",0);
}
}
播放暂停切换成播放按钮
music.onpause = function(){
if(play){
play.setAttribute("opacity",1);
pause.setAttribute("opacity",0);
}
}
播放开始切换成暂停按钮
music.onplaying = function(){
if(play){
play.setAttribute("opacity",0);
pause.setAttribute("opacity",1);
}
}
然后我们为按钮添加事件，使得它可以控制播放器的状态。
play = dom.querySelector("#play");
pause = dom.querySelector("#pause");
var plays = dom.querySelector("#plays");
plays.onclick = function(){
if(play.getAttribute("opacity") == 1)
music.play();
else
music.pause();
}
我们在onload里面加入上面的内容来添加点击动作，通过判断透明度来控制播放器的状态， 影响状态后又因为我们之前绑定了不同状态的透明度，所以按钮的状态也会自动变化。
本次成果
现在的成果例子:例子
