2023年7月11日发(作者：)

HTML5⽹页⾳乐播放器的⽰例代码本⽂介绍了HTML5⽹页⾳乐播放器的⽰例代码，分享给⼤家，具体如下：1功能介绍HTML5中推出了⾳视频标签，可以让我们不借助其他插件就可以直接播放⾳视频。下⾯我们就利⽤H5的audio标签及其相关属性和⽅法来制作⼀个简单的⾳乐播放器。主要包括以下⼏个功能：1、播放暂停、上⼀⾸和下⼀⾸2、调整⾳量和播放进度条3、根据列表切换当前歌曲先来看⼀下最终的完成效果：这个⾳乐播放器的结构主要分为三部分：歌曲信息、播放器和播放列表，我们重点介绍⼀下播放器部分。⾸先在播放器中放三个audio标签⽤于播放：下⾯的播放列表也对应三个audio标签：

接下来我们就开始逐步实现上⾯提到的功能吧，先来完成播放和暂停功能，在按下播放按钮时我们要做到进度条随歌曲进度前进，播放时间也逐渐增加，同时播放按钮变成暂停按钮，播放列表的样式也对应改变。在做功能之前我们要先把三个audio标签获取id后存到⼀个数组中，供后续使⽤。var music1= mentById("music1");var music2= mentById("music2");var music3= mentById("music3");var mList = [music1,music2,music3];2播放和暂停：我们现在就可以完成播放按钮的功能啦，⾸先设置⼀个标志，⽤来标记⾳乐的播放状态，再为数组的索引index设置⼀个默认值：然后对播放状态进⾏判断，调⽤对应的函数，并修改flag的值和列表对应项⽬样式：function playMusic(){if(flag&&mList[index].paused){ mList[index].play(); mentById("m"+index).oundColor = "#A71307";mentById("m"+index). = "white";progressBar(); playTimes(); oundImage = "url(media/)"; flag = false;}else{ mList[index].pause(); flag = true; oundImage = "url(media/)";}}上⾯的代码中调⽤了多个函数，其中播放和暂停是audio标签⾃带的⽅法，⽽其他的函数则是我们⾃⼰定义的。下⾯我们就来看⼀下这些函数是怎么实现的，⼜对应了哪些功能吧。3进度条和播放时间： ⾸先是进度条功能，获取歌曲的全部时长，然后再根据当前播放的进度与进度条总长度相乘计算出进度条的位置。function progressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//获取当前的播放时间 =""+parseFloat(cur/lenth)*300+"px"; = 60+parseFloat(cur/lenth)*300+"px";},10)}下⾯是改变播放时间功能，这⾥我们设置⼀个定时函数，每隔⼀段时间来执⾏⼀次以改变播放时间。因为我们获取到的歌曲时长是以秒来计算，所以我们要利⽤if语句对时长判断来进⾏换算，将播放时间改为以⼏分⼏秒的形式来显⽰。function playTimes(){timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//秒数 var minute=parseInt(cur/60); if (minute<10) { if(cur%60<10){ TML="0"+minute+":0"+cur%60+""; }else{ TML="0"+minute+":"+cur%60+""; } } else{ if(cur%60<10){ ext= minute+":0"+cur%60+""; }else{ ext= minute+":"+cur%60+""; }

}

},1000);}4调整播放进度和⾳量：接下来我们再来完成⼀下通过进度条调整播放进度和调整⾳量功能。调整播放进度功能利⽤了event对象来实现，因为offsetX属性只有IE事件具有，所以推荐使⽤IE浏览器查看效果。先对进度条添加事件监听，当在进度条上点击⿏标时，获取⿏标的位置，并根据位置除以进度条的总长度来计算当前的播放进度，然后对歌曲进⾏设置。//调整播放进度ntListener("click",function(event){var e = event || ;edown = function(event){ var e = event || ; var mousePos1 = X; var maxValue1 = Width; mList[index].currentTime = (mousePos1/300)*mList[index].duration; = mousePos1+"px"; = 60+ mousePos1 +"px";}})下⾯是调整⾳量功能，⾳量的调整我们采⽤拖动的形式实现，思路也是对⾳量条的按钮球添加事件监听，然后根据拖动的位置来计算按钮球相对于⾳量条整体的位置，最后根据计算结果与⾳量相乘得出当前⾳量：ntListener("mousedown",function(event){var e = event || ;var that =this;//阻⽌球的默认拖拽事件tDefault();emove = function(event){var e = event || ;var mousePos2 = Y;var maxValue2 = Height;if(mousePos2<0){ mousePos2 = 0;}if(mousePos2>maxValue2){ mousePos2=maxValue2;}mList[index].volume = (1-mousePos2/maxValue2);(mList[index].volume); = (mousePos2)+"px"; = 60-(mousePos2)+"px";eup = function(event){ emove = null; eup = null;}}})5歌曲切换 最后我们再来实现⽐较复杂的歌曲切换功能。先来看⽤上⼀⾸和下⼀⾸按钮进⾏切换，在切换⾳乐时我们要注意的问题有下⾯⼏个：第⼀，我们要停⽌当前播放的⾳乐，转⽽播放下⼀⾸⾳乐；第⼆，要清空进度条和播放时间，重新计算；第三，歌曲信息要随之改变，播放器下⾯的播放列表样式也要变化。在弄清楚上⾯三点以后我们就可以开始实现功能了。//上⼀曲function prevM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();--index;if(index==-1){ index=-1;}clearListBgc();mentById("m"+index).oundColor = "#A71307";mentById("m"+index). = "white";changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { oundImage = "url(media/)";}else{ oundImage = "url(media/)";}}

//下⼀曲function nextM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();++index;if(index==){ index=0;}clearListBgc();mentById("m"+index).oundColor = "#A71307";mentById("m"+index). = "white";changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { oundImage = "url(media/)";}else{ oundImage = "url(media/)";}}下⾯的代码是点击列表切换歌曲。k = function (){clearInterval(timer1);clearInterval(timer2);qingkong();flag = false;stopM();index = 0;pauseall();oundImage = "url(media/)";clearListBgc();mentById("m0").oundColor = "#A71307";mentById("m"+index). = "white";mList[index].play();cleanProgress();progressBar();changeInfo(index);playTimes();}k = function (){clearInterval(timer1);clearInterval(timer2);flag = false;qingkong();stopM();index = 1;pauseall();clearListBgc();oundImage = "url(media/)";mentById("m1").oundColor = "#A71307";mentById("m"+index). = "white";mList[index].play();cleanProgress();changeInfo(index);progressBar();playTimes();}k = function (){clearInterval(timer1);clearInterval(timer2);flag = false;qingkong();stopM();index = 2;pauseall();oundImage = "url(media/)";clearListBgc();mentById("m2").oundColor = "#A71307";mentById("m"+index). = "white";mList[index].play();cleanProgress();changeInfo(index);progressBar();playTimes();}通过播放列表来切换歌曲与通过按钮切换的思路差不多，只是根据对应的列表项来设置当前应该播放哪⾸歌曲。上⾯切换歌曲的函数中都调⽤了⼏个⽅法，下⾯我们来看看这些⽅法的⽤途都是什么吧。⾸先是切换歌曲信息：function changeInfo(index){if (index==0) { TML = "光辉岁⽉"; TML = "Beyond";}if (index==1) { TML = "Free Loop"; TML = "Daniel Powter";}if (index==2) { TML = "千⾥之外"; TML = "周杰伦、费⽟清";}}

然后清空两个定时器：//将进度条置0function cleanProgress(timer1){if(timer1!=undefined){ clearInterval(timer1);}="0";="60px";}

function qingkong(timer2){

if(timer2!=undefined){ clearInterval(timer2);}}再把播放的⾳乐停⽌，并且将播放时间恢复。function stopM(){if(mList[index].played){ mList[index].pause(); mList[index].currentTime=0; flag=false;}}最后的最后，改变下⾯播放列表的样式：function clearListBgc(){mentById("m0").oundColor = "#E5E5E5";mentById("m1").oundColor = "#E5E5E5";mentById("m2").oundColor = "#E5E5E5";mentById("m0"). = "black";mentById("m1"). = "black";mentById("m2"). = "black";}到此，⾳乐播放器我们就基本完成了，来看⼀下动图的效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。