本文主要介绍了原生JS实现音乐播放器的示例代码,分享给大家,具体如下:
效果图
音乐播放器
- 播放控制
- 播放进度条控制
- 歌词显示及高亮
- 播放模式设置
播放器属性归类
按照播放器的功能划分,对播放器的属性和DOM元素归类,实现同一功能的元素和属性保存在同一对象中,便于管理和操作
const control = { //存放播放器控制 play: document.querySelector('#myplay'), ... index: 2,//当前播放歌曲序号 ... } const audioFile = { //存放歌曲文件及相关信息 file: document.getElementsByTagName('audio')[0], currentTime: 0, duration: 0, } const lyric = { // 歌词显示栏配置 ele: null, totalLyricRows: 0, currentRows: 0, rowsHeight: 0, } const modeControl = { //播放模式 mode: ['顺序', '随机', '单曲'], index: 0 } const songInfo = { // 存放歌曲信息的DOM容器 name: document.querySelector('.song-name'), ... }
播放控制
功能:控制音乐的播放和暂停,上一首,下一首,播放完成及相应图标修改
audio所用API:audio.play() 和 audio.pause()和audio ended事件
// 音乐的播放和暂停,上一首,下一首控制 control.play.addEventListener('click',()=>{ control.isPlay = !control.isPlay; playerHandle(); } ); control.prev.addEventListener('click', prevHandle); control.next.addEventListener('click', nextHandle); audioFile.file.addEventListener('ended', nextHandle); function playerHandle() { const play = control.play; control.isPlay "htmlcode">// 播放进度实时更新 audioFile.file.addEventListener('timeupdate', lyricAndProgressMove); // 通过拖拽调整进度 control.progressDot.addEventListener('click', adjustProgressByDrag); // 通过点击调整进度 control.progressWrap.addEventListener('click', adjustProgressByClick);播放进度实时更新:通过修改相应DOM元素的位置或者宽度进行修改
function lyricAndProgressMove() { const audio = audioFile.file; const controlIndex = control.index; // 歌曲信息初始化 const songLyricItem = document.getElementsByClassName('song-lyric-item'); if (songLyricItem.length == 0) return; let currentTime = audioFile.currentTime = Math.round(audio.currentTime); let duration = audioFile.duration = Math.round(audio.duration); //进度条移动 const progressWrapWidth = control.progressWrap.offsetWidth; const currentBarPOS = currentTime / duration * 100; control.progressBar.style.width = `${currentBarPOS.toFixed(2)}%`; const currentDotPOS = Math.round(currentTime / duration * progressWrapWidth); control.progressDot.style.left = `${currentDotPOS}px`; songInfo.currentTimeSpan.innerText = formatTime(currentTime); }拖拽调整进度:通过拖拽移动进度条,并且同步更新歌曲播放进度
function adjustProgressByDrag() { const fragBox = control.progressDot; const progressWrap = control.progressWrap drag(fragBox, progressWrap) } function drag(fragBox, wrap) { const wrapWidth = wrap.offsetWidth; const wrapLeft = getOffsetLeft(wrap); function dragMove(e) { let disX = 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`; }) }); } function changeProgressBarPos(disX, wrapWidth) { //进度条状态更新 const audio = audioFile.file const duration = audioFile.duration let dotPos let barPos if (disX < 0) { dotPos = -4 barPos = 0 audio.currentTime = 0 } else if (disX > 0 && disX < wrapWidth) { dotPos = disX barPos = 100 * (disX / wrapWidth) audio.currentTime = duration * (disX / wrapWidth) } else { dotPos = wrapWidth - 4 barPos = 100 audio.currentTime = duration } control.progressDot.style.left = `${dotPos}px` control.progressBar.style.width = `${barPos}%` }点击进度条调整:通过点击进度条,并且同步更新歌曲播放进度
function adjustProgressByClick(e) { const wrap = control.progressWrap; const wrapWidth = wrap.offsetWidth; const wrapLeft = getOffsetLeft(wrap); const disX = e.pageX - wrapLeft; changeProgressBarPos(disX, wrapWidth) }歌词显示及高亮
功能:根据播放进度,实时更新歌词显示,并高亮当前歌词(通过添加样式)
audio所用API:audio timeupdate事件,audio.currentTime
// 歌词显示实时更新 audioFile.file.addEventListener('timeupdate', lyricAndProgressMove); function lyricAndProgressMove() { const audio = audioFile.file; const controlIndex = control.index; const songLyricItem = document.getElementsByClassName('song-lyric-item'); if (songLyricItem.length == 0) return; let currentTime = audioFile.currentTime = Math.round(audio.currentTime); let duration = audioFile.duration = Math.round(audio.duration); let totalLyricRows = lyric.totalLyricRows = songLyricItem.length; let LyricEle = lyric.ele = songLyricItem[0]; let rowsHeight = 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 < totalLyricRows - 5) { songInfo.lyricWrap.scrollTo(0, `${rowsHeight * (index - 5)}`) } } }) }播放模式设置
功能:点击跳转播放模式,并修改相应图标
audio所用API:无
// 播放模式设置 control.mode.addEventListener('click', changePlayMode); function changePlayMode() { modeControl.index = ++modeControl.index % 3; const mode = control.mode; modeControl.index === 0 "class", "playerIcon songCycleOrder") : modeControl.index === 1 "class", "playerIcon songCycleRandom ") : mode.setAttribute("class", "playerIcon songCycleOnly") }项目预览
代码地址:https://github.com/hcm083214/audio-player
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行
- 黑神话悟空上品蝎太子精魄获取方法一览|上品蝎太子精魄收集攻略
- 银霞.1977-《台北66电影原声带》台湾复刻版[WAV+CUE]
- 银霞.1980-《你那好冷的小手》台湾珍藏纪念版[WAV+CUE]