抓取网页音频( 进度条添加事件*敏*感*词*的方法)

　　抓取网页音频(

进度条添加事件*敏*感*词*的方法)

　　<p id="playList">

Beyond-光辉岁月

Daniel Powter-Free Loop

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

</p>

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

　　在做函数之前，我们需要获取三个音频标签的ID，并将它们存储在一个数组中以备后续使用。

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

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

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

var mList = [music1,music2,music3];

　　2 播放和暂停：

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

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

　　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)";

}

}

　　上面的代码调用了多个函数，其中play和pause是audio标签自带的方法，其他的函数是我们自己定义的。下面我们来看看这些函数是如何实现的，以及它们对应的函数是什么。

　　3 进度条和播放时间：

　　首先是进度条函数，它获取歌曲的完整时长，然后通过将当前播放进度乘以进度条的总长度来计算进度条的位置。

　　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