HTML5+JS實現簡易的音樂播放器

播放器實現的功能

播放/暫停音樂

切換歌曲，上/下一首歌

音量最大或靜音

音樂播放時間實時變化

進度條拖拽

歌曲圖片切換

播放器效果展示

代碼展示

html

<div class="musicBox" id="musicBox"><audio src="music/趙季平-門樓.mp3" id="music">當前瀏覽器不支持audio</audio><div class="leftControl"></div><div id="mainControl" class="mainControl"></div><div id="stopControl" class="stopControl" style="display:none"></div><div class="rightControl"></div><div class="processControl" ><div id="songName" class="songName">趙季平-門樓</div><div id="songTime" class="songTime">00:00&nbsp;|&nbsp;00:00</div><div id="process" style="width:500px" class="process"></div><div id="processYet" class="processYet"></div></div><div class="voiceEmp"></div><div id="voidProcess" class="voidProcess" style="width:66px"></div><div class="voidProcessYet" id="voidProcessYet"></div><div class="voiceFull"></div> </div> <div class="list"><!-- 插圖 --><img src="images/1.png" width="300px" id="pictures" ><!-- 歌單 --><ul id="songList"></ul> </div>

CSS樣式

.musicBox {font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;background-color: #595959;/*設置邊框的弧度值，為3px*/-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;/*陰影*/text-shadow: 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;/*透明度*/opacity: 0.9;/*基本性質*/padding: 2px 5px;position: absolute;z-index: 9;border-width: 1px;border-style: solid;border-color: #488BF0;width: 775px;height: 50px;border-radius: 10px; }.leftControl {width: 0px;padding: 10px 10px 10px 10px;float: left;height: 20px;background: url(../images/sk-dark.png) left 2px no-repeat;margin-right: 8px;margin-left: 10px; }.leftControl:hover {background: url(../images/sk-dark.png) left -30px no-repeat; }.mainControl {width: 25px;padding: 10px 15px 5px 10px;float: left;height: 20px;background: url(../images/sk-dark.png) -80px -130px no-repeat; }.mainControl:hover {background: url(../images/sk-dark.png) -80px -166px no-repeat; }.rightControl {width: 0px;padding: 10px 10px 10px 10px;float: left;height: 20px;background: url(../images/sk-dark.png) left -62px no-repeat;margin-right: 8px; }.rightControl:hover {background: url(../images/sk-dark.png) left -93px no-repeat; }.processControl {width: 500px;padding: 5px 10px 10px 10px;float: left;height: 20px;margin-right: 12px;color: #ffffff; }.processControl .songName {float: left; }.processControl .songTime {float: right; }.processControl .process {width: 500px;float: left;height: 2px;cursor: pointer;background-color: #000000;margin-top: 7px; }.processControl .processYet {width: 0px;position: absolute;height: 2px;left: 131px;top: 30px;cursor: pointer;background-color: #00aaff; }.voiceEmp {width: 0px;padding: 10px 10px 10px 10px;float: left;height: 17px;background: url(../images/sk-dark.png) -28px -180px no-repeat;margin-right: 2px; }.voiceEmp:hover {background: url(../images/sk-dark.png) -28px -212px no-repeat; }.voidProcess {width: 66px;height: 2px;cursor: pointer;background-color: #000;float: left;margin-top: 19px;margin-right: 6px; }.voidProcessYet {width: 66px;position: absolute;height: 2px;left: 675px;top: 21px;cursor: pointer;background-color: #7A8093; }.voiceFull {width: 0px;padding: 10px 10px 10px 10px;float: left;height: 17px;background: url(../images/sk-dark.png) -28px -116px no-repeat; }.voiceFull:hover {background: url(../images/sk-dark.png) -28px -148px no-repeat; }.stopControl {width: 14px;padding: 10px 10px 5px 10px;float: left;height: 20px;background: url(../images/sk-dark.png) -50px -130px no-repeat;margin-right: 16px; }.stopControl:hover {background: url(../images/sk-dark.png) -50px -165px no-repeat; }.list{width: 700px;height: 500px;background-color: #ffd47d;padding-top: 70px;margin-left: 20px; } #songList{font-size: 18px;font-weight: bold;color: #FFFFFF; } #songList li{margin-top: 5px; } #songList li:hover{color: #aa00ff; }

JS

// 獲取音頻元素 let music if(window.HTMLAudioElement){music = document.querySelector('#music');// 播放按鈕 } // 播放按鈕 let mainControl = document.querySelector("#mainControl"); // 暫停 let stopControl = document.querySelector("#stopControl"); // 快退,快進， let leftControl = document.querySelector(".leftControl"); let rightControl = document.querySelector(".rightControl"); // 音量調節 let voiceEmp = document.querySelector('.voiceEmp'); let voiceFull = document.querySelector('.voiceFull');let songName = document.querySelector("#songName"); let process = document.querySelector("#process"); let pictures = document.querySelector("#pictures"); let songList = document.getElementById("songList");mainControl.addEventListener('click',function(){// 播放音樂music.play();mainControl.style.display='none';stopControl.style.display='';timeSpan(); })stopControl.addEventListener('click',function(){// 暫停音樂music.pause();mainControl.style.display='';stopControl.style.display='none'; }) // 播放時間前進或后退 // leftControl.addEventListener('click',function(){ // // console.log(music.currentTime); // music.currentTime -= 1.0; // // console.log(music.currentTime); // })// rightControl.addEventListener('click',function(){ // // console.log(music.currentTime); // music.currentTime += 1.0; // // console.log(music.currentTime); // })voiceEmp.addEventListener('click',function(){music.volume = 0; })voiceFull.addEventListener('click',function(){music.volume = 1; })// 格式化時間 function timeDispose(time){let minutes = parseInt(time/60);let seconds = parseInt(time%60);minutes = minutes>10?minutes:"0"+minutes;seconds = seconds>10?seconds:'0'+seconds;return minutes+':'+seconds; } // 展示時間 function timeSpan(){setInterval(function(){let songTime = document.querySelector("#songTime");let currenttime = music.currentTime;let totaltime = music.duration;songTime.innerHTML = timeDispose(currenttime)+"|"+timeDispose(totaltime);let processLenth =(currenttime/totaltime)*getWidth("#process");document.querySelector('#processYet').style.width = processLenth+'px';},1000);}// 獲取長度 function getWidth(domId){let dom = document.querySelector(domId);let domLenth = dom.style.width;let domLenthInt = domLenth.split('px')[0];return domLenthInt; }// 切歌 let songs = [{mp3:'music/趙季平-門樓.mp3',name:'趙季平-門樓',tu:'images/1.png',},{mp3:'music/露露娜Ruruna - 夏 日 蒸 汽 波Say So(Japanese_Ver).mp3',name:'夏日蒸汽波SaySo',tu:'images/2.png',},{mp3:'music/趴熊 - スパイス（香辛料）（Cover 東京カランコロン）.mp3',name:'香辛料（Cover 東京カランコロン）',tu:'images/3.png',},{mp3:'music/神前暁 (こうさき さとる) - いつもの風景から始まる物語 (從老風景開始的故事).mp3',name:'從老風景開始的故事',tu:'images/10.png',},{mp3:"music/Tenkitsune - Yoshi's New Story.mp3",name:"Yoshi's New Story",tu:'images/5.png',}, ]// 將歌名顯示到列表上 for (var i =0; i < songs.length; i++) {songList.innerHTML += '<li>' + songs[i].name + '</li>'; }//切歌函數 let changeMusic=function (index) {//換歌曲music.src=songs[index].mp3;//換名稱songName.innerHTML=songs[index].name;pictures.src=songs[index].tu; }; let index=0;//當前播放歌曲索引 //切歌 leftControl.addEventListener("click",function (event) {index--;if(index<=-1){index=songs.length-1;}changeMusic(index); }); rightControl.addEventListener("click",function (event) {index++;if(index>songs.length-1){index=0;}changeMusic(index); }); // 播放完畢，自動下一首music.addEventListener("ended",function(){rightControl.click();}); process.addEventListener("click",function (event) {let x=event.offsetX;//獲取鼠標所在位置let bfb=x/610*100;processYet.style.width=bfb+"%";music.currentTime=music.duration*+bfb/100; });

總結

以上是生活随笔為你收集整理的HTML5+JS实现简易的音乐播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。