原生JS實現音樂播放器的示例程式碼
阿新 • • 發佈:2021-02-26
本文主要介紹了原生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 ? 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 { //音樂暫停,更改圖示及暫停播放動畫 ... } } function prevHandle() { // 根據播放模式重新載入歌曲 const modeIndex = modeControl.index; const songListLens = songList.length; if (modeIndex == 0) {//順序播放 let index = --control.index; index == -1 ? (index = songListLens - 1) : index; control.index = index % songListLens; } else if (modeIndex == 1) {//隨機播放 const randomNum = Math.random() * (songListLens - 1); control.index = Math.round(randomNum); } else if (modeIndex == 2) {//單曲 } reload(songList); } function nextHandle() { const modeIndex = modeControl.index; const songListLens = songList.length; if (modeIndex == 0) {//順序播放 control.index = ++control.index % songListLens; } else if (modeIndex == 1) {//隨機播放 const randomNum = Math.random() * (songListLens - 1); control.index = Math.round(randomNum); } else if (modeIndex == 2) {//單曲 } reload(songList); }
播放進度條控制
功能:實時更新播放進度,點選進度條調整歌曲播放進度
audio所用API:audio timeupdate事件,audio.currentTime
// 播放進度實時更新 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 changeProgr程式設計客棧essBarPos(disX,wrapWidth) { //進度條狀態更新 const audio = audifwazEJkmtoFile.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.currentTfwazEJkmtime
// 歌詞顯示實時更新 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.schttp://www.cppcns.comrollTo(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 ? mode.setAttribute("class","playerIcon songCycleOrder") : modeControl.index === 1 ? mode.setAttribute("class","playerIcon songCycleRandom ") : mode.setAttribute("class","playerIcon songCycleOnly") }
專案預覽
程式碼地址:https://github.com/hcm083214/audio-player
到此這篇關於原生JS實現音樂播放器的示例程式碼的文章就介紹到這了,更多相關JS 音樂播放器內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!