當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）

發(fā)布時(shí)間：2024/1/18 javascript 44 豆豆

生活随笔收集整理的這篇文章主要介紹了原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

學(xué)了前端小半個(gè)月了，今天自己動(dòng)手寫一個(gè)音樂播放器實(shí)現(xiàn)的功能有?播放列表，隨機(jī)單曲循環(huán)播放，上下一首，暫停和開始，靜音，音量增加減少，進(jìn)度條（收藏功能暫未實(shí)現(xiàn)，為了排版好看添加的，后續(xù)補(bǔ)充收藏等功能）。

話不多說，下面進(jìn)入到h5頁面的代碼

?h5頁面：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="./css/audioCSS.css"> </head><body id="body" background="./img/bandaotiehe.jpg"> <img id="musicImg" src="" title="" width="400px" height="400px"> <div id="musicName" class="name" id="musicName"></div><div class="item"><ul id="listALL"></ul> </div><div class="main" id="main" ><audio id="audio" src=""></audio><div id="collect" title="收藏"></div><div id="list" title="列表"></div><div id="selection" title="循環(huán)播放"></div><div id="prev" title="上一首"></div><div id="play" title="播放"></div><div id="next" title="下一首"></div><div id="slince" title="靜音"></div><div id="rise" title="加音量"></div><div id="minus" title="減音量"></div></div> <br><div class="progress" id="progress"><span class="cTime time" id="cTime">00:00</span> <meter value="0" max="100" id="meter" ></meter><span class="tTime time" id="tTime">00:00</span>  </div><script src="./js/audio01.js"></script> </body> </html>

?下面CSS的頁面

2023.3.25更新 #listALL? ?.firstMusic 樣式?

{padding: 0;margin: 0;box-sizing: border-box; }html,body{height: 100%;background-size:cover;backdrop-filter: blur(100px); }@keyframes totate {0% {transform: rotateZ(0);}50% {transform: rotateZ(180deg);}100% {transform: rotateZ(360deg);} } .main {justify-content: space-between;display: flex;overflow: hidden;}#musicImg {margin: 20px 650px;animation: totate 30s linear infinite;border-radius: 50%;background-image: url("../img/bandaotiehe.jpg");margin-bottom: 100px;animation-play-state: paused;} /*#musicImg:hover {animation-play-state: paused; }*/.item{}.firstMusic{color: red; }#listALL{position: absolute;width: 350px;display:none;background-color: #363636;top: 200px;opacity: 0.6; }.li{color: whitesmoke;height: 35px;font-size: 25px; }div {cursor: pointer;/* float: left; */margin: 10px auto;text-align: center;}#musicName{font-size: 40px;margin-bottom: 80px; }#collect{background: url("../img/icon_collect.png");width: 40px;height: 40px;background-size: 100% 100%; }#selection{background: url("../img/xunhuanbofang.png");width: 40px;height: 40px;background-size: 100% 100%; }#list{background: url("../img/24gl-playlistMusic.png");width: 40px;height: 40px;background-size: 100% 100%; }#play{background: url(../img/bofang.png);width: 40px;height: 40px;background-size: 100% 100%; }#prev{background: url("../img/shangyishoushangyige.png");width: 40px;height: 40px;background-size: 100% 100%; }#next{background: url("../img/xiayigexiayishou.png");width: 40px;height: 40px;background-size: 100% 100%; }#slince{background: url("../img/24gl-volumeMiddle.png");width: 40px;height: 40px;background-size: 100% 100%; }#rise{background: url("../img/24gl-volumeHigh.png");width: 40px;height: 40px;background-size: 100% 100%; } #minus{background: url("../img/24gl-volumeLow.png");width: 40px;height: 40px;background-size: 100% 100%; }#cTime {/*float: left;*/-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;font-size: 18px;width: 20px; }#tTime {/*float: right;*/-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;font-size: 18px;width:300px; }#progress {margin-left: 10px;margin-right: 10px;/*background-color: cyan;*/ }#meter {width: 720px;height: 18px;/*background: azure;margin-bottom: ;*/}

JS的DOM創(chuàng)建

音樂列表

var songs = [{name: "周杰倫 - 半島鐵盒",photo: "../img/bandaotiehe.jpg"},{name: "周杰倫 - 外婆",photo: "../img/waipo.jpg"},{name: "周杰倫 - 完美主義",photo: "../img/wanmeizhuyi.jpg"},{name: "周杰倫 - 威廉古堡",photo: "../img/weiliangubao.jpg"},{name: "周杰倫 - 蝸牛",photo: "../img/woniu.jpg"},{name: "wake",photo: "../img/wake.jpg"},{name: "ceshi",photo: "../img/ceshi.png"} ] musicNameDOM.innerText = songs[0].name musicImgDOM.src = songs[0].photo

切換歌曲（上一首下一首）

首先創(chuàng)建兩個(gè)變量記錄當(dāng)前歌曲的索引和歌曲的數(shù)量，給nextDOM創(chuàng)建事件監(jiān)聽，當(dāng)點(diǎn)擊觸發(fā) next()，因?yàn)槲覍懥艘粋€(gè)隨機(jī)播放的功能，所以要考慮如果當(dāng)前是隨機(jī)播放的模式，，點(diǎn)擊下一首也要隨機(jī)播放，所以要給userChangeSong傳一個(gè)隨機(jī)數(shù)，用Math方法。

2023.3.25更新添加每一次手動(dòng)切換歌曲時(shí)重置進(jìn)度條已加載的長度。

2023.3.28更新將next方法里的給changeSong傳值改為1.1 因?yàn)檫@樣的話在點(diǎn)擊列表播放里的索引位置為1的歌曲就不會(huì)沖突。

Math.floor(Math.random() * songs.length) var currentSongIndex = 0; var songsListLength = songs.length; audioDOM.src = './mp3/' + songs[currentSongIndex].name + '.mp3'nextDOM.addEventListener('click', next)function next() {meterDOM.setAttribute('value',0)if (selectionDOM.title == "隨機(jī)播放") {changeSong(Math.floor(Math.random() * songs.length))} else {changeSong(1.1)} }prevDOM.addEventListener('click', prev)function prev() {meterDOM.setAttribute('value',0)if (selectionDOM.title == "隨機(jī)播放") {changeSong(Math.floor(Math.random() * songs.length))} else {changeSong(-1.1)} }

方法userChangeSong的代碼?2023.3.28廢除因?yàn)楦鷆hangeSong方法重復(fù)

function userChangeSong(userNum) {currentSongIndex = userNum;audioDOM.src = './mp3/' + songs[currentSongIndex].name + '.mp3';audioDOM.play()for (let j = 0; j < selectDOM.children.length; j++) {selectDOM.children[j].classList.remove('firstMusic');}selectDOM.children[currentSongIndex].classList.add('firstMusic');playDOM.style.backgroundImage = 'url("./img/zanting.png")';musicNameDOM.innerText = songs[currentSongIndex].name;musicImgDOM.src = songs[currentSongIndex].photo;bodyDOM.background = ".img/" + songs[currentSongIndex].photo;musicImgDOM.style.animationPlayState = "running"}

changeSong的方法?

2023.3.28 更新現(xiàn)在全局使用changSong方法上面的userChangeSong廢棄。

將從next和prev得到1.1和-1.1轉(zhuǎn)換為整數(shù)類型，以防出錯(cuò)。

切換播放方式（單曲循環(huán)隨機(jī)播放）,具體實(shí)現(xiàn)下文我會(huì)通過進(jìn)度條的判斷來實(shí)現(xiàn)音樂循環(huán)隨機(jī)播放。

selectionDOM.addEventListener('click', playModeSelection)function playModeSelection() {if (selectionDOM.title == "循環(huán)播放") {selectionDOM.style.backgroundImage = 'url("../img/danquxunhuan.png")'selectionDOM.title = "單曲播放"audioDOM.loop = true;} else if (selectionDOM.title == "單曲播放") {selectionDOM.style.backgroundImage = 'url("../img/suijibofang.png")'selectionDOM.title = "隨機(jī)播放";audioDOM.loop = false;} else if (selectionDOM.title == "隨機(jī)播放") {selectionDOM.style.backgroundImage = 'url("../img/xunhuanbofang.png")'selectionDOM.title = "循環(huán)播放";audioDOM.loop = false;} }

進(jìn)度條的實(shí)現(xiàn)，點(diǎn)擊進(jìn)度條會(huì)跳轉(zhuǎn)到指定的時(shí)間。給進(jìn)度條一個(gè)計(jì)時(shí)器放到function?play()里（在下文播放暫停的代碼區(qū)），每隔一秒判斷一次當(dāng)前歌曲是否播放結(jié)束。

meterDOM.onclick = setProgress;function setProgress(e) {var offsetLeft = (e.clientX - meterDOM.offsetLeft) / meterDOM.offsetWidth;audioDOM.currentTime = offsetLeft * audioDOM.duration;meterDOM.setAttribute('value', offsetLeft * 100) }function showProgress() {if (audioDOM.ended && selectionDOM.title == "隨機(jī)播放") {console.log(Math.floor(Math.random() * songs.length))changeSong(Math.floor(Math.random() * songs.length))} else if (audioDOM.ended && selectionDOM.title == "循環(huán)播放") {changeSong(1)}meterDOM.setAttribute('value', audioDOM.currentTime / audioDOM.duration * 100); }

音樂的時(shí)間。

/*歌曲時(shí)間 loadedmetadata: 當(dāng)指定的音頻/視頻的元數(shù)據(jù)已加載時(shí)，會(huì)發(fā)生 loadedmetadata 事件。音頻/視頻的元數(shù)據(jù)包括：時(shí)長、尺寸（僅視頻）以及文本軌道。timeupdate : 事件在音頻/視頻（audio/video）的播放位置發(fā)生改變時(shí)觸發(fā)。duration: 屬性以秒或毫秒為單位指定過渡動(dòng)畫所需的時(shí)間。默認(rèn)值為 0s */audioDOM.addEventListener("loadedmetadata", function (event) {if (audioDOM.duration % 60 < 10) {tTimeDOM.innerHTML = parseInt(audioDOM.duration / 60) + ":0" + parseInt(audioDOM.duration % 60)} else {tTimeDOM.innerHTML = parseInt(audioDOM.duration / 60) + ":" + parseInt(audioDOM.duration % 60)}});audioDOM.addEventListener("timeupdate", function (event) {if (audioDOM.currentTime < 10) {cTimeDOM.innerHTML = "0:0" + Math.floor(audioDOM.currentTime);} else if (audioDOM.currentTime < 60) {cTimeDOM.innerHTML = "0:" + Math.floor(audioDOM.currentTime);} else {var minet = parseInt(audioDOM.currentTime / 60);var sec = audioDOM.currentTime - minet * 60;if (sec < 10) {cTimeDOM.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);} else {cTimeDOM.innerHTML = "0" + minet + ":" + parseInt(sec);}} });

音樂暫停和播放，里面添加了一個(gè)計(jì)時(shí)器用來實(shí)現(xiàn)進(jìn)度實(shí)時(shí)變化。

/* 暫停開始*/var timer = null; playDOM.addEventListener('click', play)function play() {if (audioDOM.paused) {audioDOM.play()timer = setInterval(showProgress, 1000);playDOM.style.backgroundImage = 'url("./img/zanting.png")'playDOM.setAttribute("title", "暫停")musicImgDOM.style.animationPlayState = "running"} else {audioDOM.pause()playDOM.title = "播放"playDOM.style.backgroundImage = 'url("./img/bofang.png")'musicImgDOM.style.animationPlayState = "paused"clearInterval(timer)} }

音樂音量的控制

/* 控制音量大小 */ slinceDOM.addEventListener("click", slince)function slince() {if (slinceDOM.title == "靜音") {audioDOM.muted = trueslinceDOM.title = "非靜音"slinceDOM.style.backgroundImage = 'url("../img/24gl-volumeDisable.png")'} else {audioDOM.muted = falseslinceDOM.title = '靜音'slinceDOM.style.backgroundImage = 'url("../img/24gl-volumeMiddle.png")'} }/*每點(diǎn)擊一下，增加10%，如果超過最大就為1，超過最小就為0*/ riseDOM.addEventListener('click', function () {changeVol(0.1) }) minusDOM.addEventListener('click', function () {changeVol(-0.1) })function changeVol(n) {if (audioDOM.volume + n < 0) {audioDOM.volume = 0;} else if (audioDOM.volume + n <= 1.0) {audioDOM.volume = audioDOM.volume + n;} else {audioDOM.volume = 1.0} }

播放列表的動(dòng)態(tài)實(shí)現(xiàn)

2023.3.25更新添加每一次手動(dòng)點(diǎn)擊列表切換歌曲時(shí)重置進(jìn)度條已加載的長度，添加一些li的樣式。

/*播放列表*/ listDOM.addEventListener('click', showList)function showList() {if (listDOM.title === "列表") {listALLDOM.style.display = "block";listDOM.title = "關(guān)閉播放列表";} else {listALLDOM.style.display = "none";listDOM.title = "列表";} }/* querySelector() 方法返回文檔中與指定選擇器或選擇器組匹配的第一個(gè) Element對(duì)象。如果找不到匹配項(xiàng)，則返回null。 insertBefore() 方法在現(xiàn)有子節(jié)點(diǎn)之前插入子節(jié)點(diǎn)。*/var selectDOM = document.querySelector('.item').querySelector('ul');for (var i = 0; i < songs.length; i++) {var li = document.createElement('li');li.innerHTML = songs[i].name;li.title = songs[i].name;li.style.height = "50px"li.style.fontSize = "32px"selectDOM.insertBefore(li, selectDOM.children[i]); }selectDOM.children[0].classList.add('firstMusic');for (var i = 0; i < selectDOM.children.length; i++) {selectDOM.children[i].index = i;selectDOM.children[i].addEventListener('click', function (e) {for (var j = 0; j < selectDOM.children.length; j++) {selectDOM.children[j].classList.remove('firstMusic');}this.classList.add('firstMusic');meterDOM.setAttribute('value',0)changeSong(e.target.index);}) }

到這里就結(jié)束了，后續(xù)添加更多內(nèi)容。

（第一次寫博客，寫的不好請(qǐng)諒解）。

完整JS代碼

總結(jié)

以上是生活随笔為你收集整理的原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：跨标签页通信
下一篇： WIN7管理员账号删除后无法获取管理员权