原生JS实现音乐播放器的示例代码
本文主要介绍了原生JS实现音乐播放器的示例代码，分享给大家，具体如下:
效果图
音乐播放器
- 播放控制
- 播放进度条控制
- 歌词显示及高亮
- 播放模式设置
播放器属性归类
按照播放器的功能划分，对播放器的属性和DOM元素归类，实现同一功能的元素和属性保存在同一对象中，便于管理和操作
constcontrol={//存放播放器控制
play:document.querySelector('#myplay'),
...
index:2,//当前播放歌曲序号
...
}
constaudioFile={//存放歌曲文件及相关信息
file:document.getElementsByTagName('audio')[0],
currentTime:0,
duration:0,
}
constlyric={//歌词显示栏配置
ele:null,
totalLyricRows:0,
currentRows:0,
rowsHeight:0,
}
constmodeControl={//播放模式
mode:['顺序','随机','单曲'],
index:0
}
constsongInfo={//存放歌曲信息的DOM容器
name:document.querySelector('.song-name'),
...
}
播放控制
功能：控制音乐的播放和暂停，上一首，下一首，播放完成及相应图标修改
audio所用API：audio.play()和audio.pause()和audioended事件
//音乐的播放和暂停，上一首，下一首控制
control.play.addEventListener('click',()=>{
control.isPlay=!control.isPlay;
playerHandle();
});
control.prev.addEventListener('click',prevHandle);
control.next.addEventListener('click',nextHandle);
audioFile.file.addEventListener('ended',nextHandle);
functionplayerHandle(){
constplay=control.play;
control.isPlay?audioFile.file.play():audioFile.file.pause();
if(control.isPlay){
//音乐播放，更改图标及开启播放动画
play.classList.remove('songStop');
play.classList.add('songStart');
control.albumCover.classList.add('albumRotate');
control.albumCover.style.animationPlayState='running';
}else{
//音乐暂停，更改图标及暂停播放动画
...
}
}
functionprevHandle(){//根据播放模式重新加载歌曲
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){//随机播放
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){//随机播放
constrandomNum=Math.random()*(songListLens-1);
control.index=Math.round(randomNum);
}elseif(modeIndex==2){//单曲
}
reload(songList);
}
播放进度条控制
功能：实时更新播放进度，点击进度条调整歌曲播放进度
audio所用API：audiotimeupdate事件，audio.currentTime
//播放进度实时更新
audioFile.file.addEventListener('timeupdate',lyricAndProgressMove);
//通过拖拽调整进度
control.progressDot.addEventListener('click',adjustProgressByDrag);
//通过点击调整进度
control.progressWrap.addEventListener('click',adjustProgressByClick);
播放进度实时更新：通过修改相应DOM元素的位置或者宽度进行修改
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);
//进度条移动
constprogressWrapWidth=control.progressWrap.offsetWidth;
constcurrentBarPOS=currentTime/duration*100;
control.progressBar.style.width=`${currentBarPOS.toFixed(2)}%`;
constcurrentDotPOS=Math.round(currentTime/duration*progressWrapWidth);
control.progressDot.style.left=`${currentDotPOS}px`;
songInfo.currentTimeSpan.innerText=formatTime(currentTime);
}
拖拽调整进度：通过拖拽移动进度条，并且同步更新歌曲播放进度
functionadjustProgressByDrag(){
constfragBox=control.progressDot;
constprogressWrap=control.progressWrap
drag(fragBox,progressWrap)
}
functiondrag(fragBox,wrap){
constwrapWidth=wrap.offsetWidth;
constwrapLeft=getOffsetLeft(wrap);
functiondragMove(e){
letdisX=e.pageX-wrapLeft;
changeProgressBarPos(disX,wrapWidth)
}
fragBox.addEventListener('mousedown',()=>{//拖拽操作
//点击放大方便操作
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){//进度条状态更新
constaudio=audioFile.file
constduration=audioFile.duration
letdotPos
letbarPos
if(disX<0){
dotPos=-4
barPos=0
audio.currentTime=0
}elseif(disX>0&&disX
点击进度条调整：通过点击进度条，并且同步更新歌曲播放进度
functionadjustProgressByClick(e){
constwrap=control.progressWrap;
constwrapWidth=wrap.offsetWidth;
constwrapLeft=getOffsetLeft(wrap);
constdisX=e.pageX-wrapLeft;
changeProgressBarPos(disX,wrapWidth)
}
歌词显示及高亮
功能：根据播放进度，实时更新歌词显示，并高亮当前歌词（通过添加样式）
audio所用API：audiotimeupdate事件，audio.currentTime
//歌词显示实时更新
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=LyricEle&&LyricEle.offsetHeight;
//歌词移动
lrcs[controlIndex].lyric.forEach((item,index)=>{
if(currentTime===item.time){
lyric.currentRows=index;
songLyricItem[index].classList.add('song-lyric-item-active');
index>0&&songLyricItem[index-1].classList.remove('song-lyric-item-active');
if(index>5&&index
播放模式设置
功能：点击跳转播放模式，并修改相应图标
audio所用API：无
//播放模式设置
control.mode.addEventListener('click',changePlayMode);
functionchangePlayMode(){
modeControl.index=++modeControl.index%3;
constmode=control.mode;
modeControl.index===0?
mode.setAttribute("class","playerIconsongCycleOrder"):
modeControl.index===1?
mode.setAttribute("class","playerIconsongCycleRandom"):
mode.setAttribute("class","playerIconsongCycleOnly")
}
项目预览
代码地址：https://github.com/hcm083214/audio-player
到此这篇关于原生JS实现音乐播放器的示例代码的文章就介绍到这了,更多相关JS音乐播放器内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。