第原生JS實(shí)現(xiàn)音樂播放器的示例代碼functionprevHandle(){//根據(jù)播放模式重新加載歌曲

constmodeIndex=modeControl.index;

constsongListLens=songList.length;

if(modeIndex==0){//順序播放

letindex=--control.index;

index==-1(index=songListLens-1):index;

control.index=index%songListLens;

}elseif(modeIndex==1){//隨機(jī)播放

constrandomNum=Math.random()*(songListLens-1);

control.index=Math.round(randomNum);

}elseif(modeIndex==2){//單曲

reload(songList);

functionnextHandle(){

constmodeIndex=modeControl.index;

constsongListLens=songList.length;

if(modeIndex==0){//順序播放

control.index=++control.index%songListLens;

}elseif(modeIndex==1){//隨機(jī)播放

constrandomNum=Math.random()*(songListLens-1);

control.index=Math.round(randomNum);

}elseif(modeIndex==2){//單曲

reload(songList);

播放進(jìn)度條控制

功能：實(shí)時(shí)更新播放進(jìn)度，點(diǎn)擊進(jìn)度條調(diào)整歌曲播放進(jìn)度

audio所用API：audiotimeupdate事件，audio.currentTime

//播放進(jìn)度實(shí)時(shí)更新

audioFile.file.addEventListener('timeupdate',lyricAndProgressMove);

//通過拖拽調(diào)整進(jìn)度

gressDot.addEventListener('click',adjustProgressByDrag);

//通過點(diǎn)擊調(diào)整進(jìn)度

gressWrap.addEventListener('click',adjustProgressByClick);

播放進(jìn)度實(shí)時(shí)更新：通過修改相應(yīng)DOM元素的位置或者寬度進(jìn)行修改

functionlyricAndProgressMove(){

constaudio=audioFile.file;

constcontrolIndex=control.index;

//歌曲信息初始化

constsongLyricItem=document.getElementsByClassName('song-lyric-item');

if(songLyricItem.length==0)return;

letcurrentTime=audioFile.currentTime=Math.round(audio.currentTime);

letduration=audioFile.duration=Math.round(audio.duration);

//進(jìn)度條移動(dòng)

constprogressWrapWidth=gressWrap.offsetWidth;

constcurrentBarPOS=currentTime/duration*100;

gressBar.style.width=`${currentBarPOS.toFixed(2)}%`;

constcurrentDotPOS=Math.round(currentTime/duration*progressWrapWidth);

gressDot.style.left=`${currentDotPOS}px`;

songInfo.currentTimeSpan.innerText=formatTime(currentTime);

拖拽調(diào)整進(jìn)度：通過拖拽移動(dòng)進(jìn)度條，并且同步更新歌曲播放進(jìn)度

functionadjustProgressByDrag(){

constfragBox=gressDot;

constprogressWrap=gressWrap

drag(fragBox,progressWrap)

functiondrag(fragBox,wrap){

constwrapWidth=wrap.offsetWidth;

constwrapLeft=getOffsetLeft(wrap);

functiondragMove(e){

letdisX=e.pageX-wrapLeft;

changeProgressBarPos(disX,wrapWidth)

fragBox.addEventListener('mousedown',()={//拖拽操作

//點(diǎn)擊放大方便操作

fragBox.style.width=`14px`;fragBox.style.height=`14px`;fragBox.style.top=`-7px`;

document.addEventListener('mousemove',dragMove);

document.addEventListener('mouseup',()={

document.removeEventListener('mousemove',dragMove);

fragBox.style.width=`10px`;fragBox.style.height=`10px`;fragBox.style.top=`-4px`;

functionchangeProgressBarPos(disX,wrapWidth){//進(jìn)度條狀態(tài)更新

constaudio=audioFile.file

constduration=audioFile.duration

letdotPos

letbarPos

if(disX0){

dotPos=-4

barPos=0

audio.currentTime=0

}elseif(disX0disXwrapWidth){

dotPos=disX

barPos=100*(disX/wrapWidth)

audio.currentTime=duration*(disX/wrapWidth)

}else{

dotPos=wrapWidth-4

barPos=100

audio.currentTime=duration

gressDot.style.left=`${dotPos}px`

gressBar.style.width=`${barPos}%`

點(diǎn)擊進(jìn)度條調(diào)整：通過點(diǎn)擊進(jìn)度條，并且同步更新歌曲播放進(jìn)度

functionadjustProgressByClick(e){

constwrap=gressWrap;

constwrapWidth=wrap.offsetWidth;

constwrapLeft=getOffsetLeft(wrap);

constdisX=e.pageX-wrapLeft;

changeProgressBarPos(disX,wrapWidth)

歌詞顯示及高亮

功能：根據(jù)播放進(jìn)度，實(shí)時(shí)更新歌詞顯示，并高亮當(dāng)前歌詞（通過添加樣式）

audio所用API：audiotimeupdate事件，audio.currentTime

//歌詞顯示實(shí)時(shí)更新

audioFile.file.addEventListener('timeupdate',lyricAndProgressMove);

functionlyricAndProgressMove(){

constaudio=audioFile.file;

constcontrolIndex=control.index;

constsongLyricItem=document.getElementsByClassName('song-lyric-item');

if(songLyricItem.length==0)return;

letcurrentTime=audioFile.currentTime=Math.round(audio.currentTime);

letduration=audioFile.duration=Math.round(audio.duration);

lettotalLyricRows=lyric.totalLyricRows=songLyricItem.length;

letLyricEle=lyric.ele=songLyricItem[0];

letrowsHeight=lyric.rowsHeight=LyricEleLyricEle.offsetHeight;

//歌詞移動(dòng)

lrcs[controlIndex].lyric.forEach((item,index)={

if(currentTime===item.time){

lyric.currentRows=index;

songLyricItem[index].classList.add('song-lyric-item-active');

index0songLyricItem[index-1].classList.remove('song-lyric-item-active');

if(index5indextotalLyricRows-5){

songInfo.lyricWrap.scrollTo(0,`${rowsHeight*(index-5)}`)

播放模式設(shè)置

功能：點(diǎn)擊跳轉(zhuǎn)播放模式，并修改相應(yīng)圖標(biāo)

audio所用API：無

//播放模式設(shè)置

control.mode.addEventListener('click',changePlayMode);

functionchangePlayMode(){

modeControl.index=++modeControl.index%3;

constmode=control.mode;

modeControl.index