HTML5如何自定义mp3播放器

2024-10-26 技术教程

小编给大家分享一下HTML5如何自定义mp3播放器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

audio对象

src兼容.ogg .wav .mp3：

<audiocontrolssrc='data/imooc.wav'></audio>

width autoplay loop muted静音：

<audiocontrolssrc='data/imooc.wav'autoplayloopwidth='500'height='500'muted></audio>

播放play()：

varmyAudio=newAudio();myAudio.src='data/imooc.wav';myAudio.play();btn.onclick=function(){myAudio.play();};

暂停pause()

pauseNode.onclick=function(){myAudio.pause();};

当前播放的时间currentTime

音频总时长duration;

//返回音频的总长度myAudio.addEventListener('canplay',function(){durationNode.innerHTML=myAudio.duration;});//更新当前播放的时间setInterval(function(){currentNode.innerHTML=myAudio.currentTime;},100);

音频源currentSrc:

varmyAudio=newAudio();myAudio.src='data/imooc.mp3';console.log(myAudio.currentSrc);

loop循环

myAudio.loop=true;

音频播放结束ended

myAudio.addEventListener('ended',function(){console.log('音频播放结束');console.log(myAudio.ended)});

重新加载

load=adBtn.onclick=function(){myAudio.load();};

跳转到新的播放位置seeked / seeking

myAudio.addEventListener('seeked',function(){console.log('seeked');});myAudio.addEventListener('seeking',function(){console.log('seeking');sekingNum++;seekingNum.innerHTML=sekingNum;});

playbackRate设置当前播放速度

myAudio.playbackRate='15';console.log(myAudio.playbackRate)

全屏requestFullScreen

btnScreen.onclick=function(){myAudio.webkitRequestFullScreen();}

loop 循环

myAudio.loop=true;

volumechange音量改变

myAudio.addEventListener('volumechange',function(){console.log('音频的声音改变了')});

timeupdate音频正在播放状态:

myAudio.addEventListener('timeupdate',function(){console.log('音频正在播放中...')})

自定义mp3播放器

<!doctypehtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">*{margin:0;padding:0;list-style:none;}.outerNode{width:505px;height:406px;position:absolute;left:50%;top:50%;margin:-204px00-253.5px;border:1pxsolid#a6a18d;border-radius:8px;box-shadow:0016px#a6a18d;}.innerNode{width:503px;height:405px;border-top:1pxsolid#e1d1b9;border-left:1pxsolid#ceccbf;border-radius:8px;overflow:hidden;border-right:1pxsolid#ceccbf;}.topNode{width:100%;height:198px;border-bottom:1pxsolid#787463;background:url(music/pic/fmt01.jpg)centercenter;background-size:cover;transition:.7s;position:relative;}.lineNode{width:100%;height:46px;border-top:1pxsolid#f9f7ee;border-bottom:1pxsolid#a29d8a;background:url(musicimage/linebg.jpg)repeat-x;}.progressNode{width:440px;height:18px;float:left;margin:13px0028px;background:url(musicimage/progressbg.jpg)repeat-x;position:relative;}.progressNode.progressleft{width:7px;height:100%;position:absolute;left:0;background:url(musicimage/leftNode.jpg);}.progressNode.progressright{width:7px;height:100%;position:absolute;right:0;background:url(musicimage/rightNode.jpg);}.bottomNode{width:100%;height:157px;border-top:1pxsolid#a29d8a;background:url(musicimage/bottombg.jpg)repeat-x;position:relative;}.lastNode{width:75px;height:74px;position:absolute;background:url(musicimage/lastBg.png)no-repeat;left:118px;top:39px;cursor:pointer;}.playNode{width:95px;height:94px;position:absolute;background:url(musicimage/playNode.png)no-repeat;left:202px;top:29px;cursor:pointer;}.nextNode{width:75px;height:74px;background:url(musicimage/rightbg.png)no-repeat;position:absolute;left:306px;top:39px;cursor:pointer;}.volumeNode{width:37px;height:32px;background:url(musicimage/volume.png)no-repeat;position:absolute;right:43px;top:58px;cursor:pointer;}.no_volumeNode{width:37px;height:32px;background:url(musicimage/no_volume.png)no-repeat;position:absolute;right:43px;top:58px;cursor:pointer;}.trueLine{position:absolute;left:3px;top:2px;height:12px;width:0%;background:url(musicimage/green_bg.png)repeat-x;border-radius:6px;border-right:1pxsolid#787463;}.musicName{color:white;position:absolute;bottom:2px;left:5px;}</style></head><body><divclass='outerNode'><divclass='innerNode'><divclass='topNode'><divclass='musicName'></div></div><divclass='lineNode'><divclass='progressNode'><divclass='progressleft'></div><divclass='progressright'></div><divclass='trueLine'></div></div></div><divclass='bottomNode'><divclass='lastNode'></div><divclass='playNode'></div><divclass='nextNode'></div><divclass='volumeNode'></div></div></div></div><scripttype="text/javascript">//播放暂停的按钮//playBln控制播放暂停的布尔值varplayBtn=document.querySelector('.playNode'),playBln=true,//控制声音的按钮//volumeBln控制声音的布尔值volumeNode=document.querySelector('.volumeNode'),volumeBln=true,//进度条的选择器trueLine=document.querySelector('.trueLine'),//进度条外层的元素progressNode=document.querySelector('.progressNode'),//最外层元素outerNode=document.querySelector('.outerNode'),//选择一下封面背景topNode=document.querySelector('.topNode'),//下一首歌的按钮nextNode=document.querySelector('.nextNode'),//上一首歌的按钮lastNode=document.querySelector('.lastNode'),//音乐名称musicName=document.querySelector('.musicName');//给播放器添加js//创建audio对象varmyAudio=newAudio();//给audio对象一个src//所有的数据存在数组里面letallMusic=[{'MusicSrc':'music/mus/AcousticGuitar1.mp3','MusicPic':'music/pic/fmt01.jpg','MusicName':'AcousticGuitar1'},{'MusicSrc':'music/mus/AmazingGrace.mp3','MusicPic':'music/pic/fmt02.png','MusicName':'AmazingGrace'},{'MusicSrc':'music/mus/FeelsGood2B.mp3','MusicPic':'music/pic/fmt03.jpg','MusicName':'FeelsGood2B'},{'MusicSrc':'music/mus/FunBusyIntro.mp3','MusicPic':'music/pic/fmt04.jpg','MusicName':'FunBusyIntro'},{'MusicSrc':'music/mus/GreenDaze.mp3','MusicPic':'music/pic/fmt05.jpg','MusicName':'GreenDaze'},{'MusicSrc':'music/mus/Limosine.mp3','MusicPic':'music/pic/fmt06.jpg','MusicName':'Limosine'}],Index=0;myAudio.src=allMusic[Index].MusicSrc;//给封面赋值topNode.style.backgroundImage='url('+allMusic[Index].MusicPic+')';//给音乐名称musicName.innerHTML=allMusic[Index].MusicName;//谷歌浏览器不允许直接play//myAudio.play();//播放暂停的事件playBtn.onclick=function(){//myAudio.play();playBln=!playBln;if(playBln==false){myAudio.play();}else{myAudio.pause();}};//声音的事件volumeNode.onclick=function(){volumeBln=!volumeBln;if(volumeBln==false){myAudio.volume=0;this.className='no_volumeNode';}else{myAudio.volume=1;this.className='volumeNode';}};//播放时进度条的长度控制计算myAudio.addEventListener('timeupdate',function(){trueLine.style.width=myAudio.currentTime/myAudio.duration*100+'%';});//点击progressNode元素让进度条直接到达这个位置progressNode.onclick=function(e){varev=e||event;//算法就是算出点击的位置在外层进度条的多少像素//需要一个鼠标坐标点减去外层元素的offsetLeft和最外层元素的offsetLeft//320秒*0.50=160秒myAudio.currentTime=myAudio.duration*((ev.clientX-(this.offsetLeft+outerNode.offsetLeft))/this.offsetWidth);trueLine.style.width=((ev.clientX-(this.offsetLeft+outerNode.offsetLeft))/this.offsetWidth)*100+'%';};//下一首歌的事件nextNode.onclick=function(){Index++;if(Index==allMusic.length){Index=0;}MusicPlayFn();};//音乐播放的函数functionMusicPlayFn(){myAudio.src=allMusic[Index].MusicSrc;myAudio.currentTime=0;trueLine.style.width='0%';if(playBln==false){myAudio.play();}else{myAudio.pause();}//给封面赋值topNode.style.backgroundImage='url('+allMusic[Index].MusicPic+')';//给音乐名称musicName.innerHTML=allMusic[Index].MusicName;}//上一首歌的点击事件lastNode.onclick=function(){Index--;if(Index==-1){Index=allMusic.length-1;}MusicPlayFn();};</script></body></html>

以上是“HTML5如何自定义mp3播放器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！