抓取网页音频( 一下进度条添加事件*敏*感*词*的功能介绍及项目)

　　抓取网页音频(

一下进度条添加事件*敏*感*词*的功能介绍及项目)

Beyond-光辉岁月

Daniel Powter-Free Loop

周杰伦、费玉清-千里之外

接下来我们就开始逐步实现上面提到的功能吧，先来完成播放和暂停功能，在按下播放按钮时我们要做到进度条随歌曲进度前进，播放时间也逐渐增加，同时播放按钮变成暂停按钮，播放列表的样式也对应改变。

　　在做这个功能之前，我们首先要获取三个audio标签的id，并存入一个数组中，以备后续使用。

　　 var music1= document.getElementById("music1");

var music2= document.getElementById("music2");

var music3= document.getElementById("music3");

var mList = [music1,music2,music3];

　　播放和暂停：

　　现在我们就可以完成播放按钮的功能了。首先设置一个标志来标记音乐的播放状态，然后为数组的索引设置一个默认值：

　　然后判断播放状态，调用对应的函数，修改list的flag值和对应的item样式：

　　var flag = true;

var index = 0;

function playMusic(){

if(flag&&mList[index].paused){

mList[index].play();

document.getElementById("m"+index).style.backgroundColor = "#A71307";

document.getElementById("m"+index).style.color = "white";

progressBar();

playTimes();

play.style.backgroundImage = "url(media/pause.png)";

flag = false;

}else{

mList[index].pause();

flag = true;

play.style.backgroundImage = "url(media/play.png)";

}

}

　　上面HTML页面的代码中调用了多个函数，其中play和pause是audio标签自带的方法，其他函数由我们自己定义。下面我们来看看这些功能是如何实现的，分别对应哪些功能。

　　进度条和播放时间：

　　首先是进度条功能，获取歌曲的完整时长，然后根据当前播放进度乘以进度条总长度计算出进度条的位置。

　　function progressBar(){

var lenth=mList[index].duration;

timer1=setInterval(function(){

cur=mList[index].currentTime;//获取当前的播放时间

progress.style.width=""+parseFloat(cur/lenth)*300+"px";

progressBtn.style.left= 60+parseFloat(cur/lenth)*300+"px";

},10)

}

　　下面是改变播放时间的功能。这里我们设置了一个定时函数，每隔一段时间执行一次来改变播放时间。因为我们得到的歌曲的时长是以秒计算的，所以我们需要使用if语句来判断转换的时长，并将播放时间改为分秒的形式显示。

<p>function playTimes(){

timer2=setInterval(function(){

cur=parseInt(mList[index].currentTime);//秒数

var minute=parseInt(cur/60);

if (minute