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

HTML

音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示

發(fā)布時(shí)間：2023/12/14 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本地資源在谷歌瀏覽器上是無(wú)法快進(jìn)的。這個(gè)是重點(diǎn)!!!有很多解決方法，我直接用火狐就ok了
https://www.gaitubao.com/# 改圖寶鏈接用于修改歌曲頭像大小標(biāo)準(zhǔn)顯示才正常我用的大小為300，300
我用的圖標(biāo)全都來(lái)自iconfont Iconfont-阿里巴巴矢量圖標(biāo)庫(kù)
貼上代碼每一行都有注釋包括命名有問(wèn)題歡迎評(píng)論或者詢問(wèn) QQ1099256274

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.musicPlayer{width: 670px;height: 400px;margin-left: auto;margin-right: auto;margin-top: 50px;border: 2px #006558 solid;border-radius: 20px;}.musicInfo{ /*進(jìn)度條上面一塊的區(qū)域*/height: 200px;text-align: center;}.musicImg{width: 200px;height: 200px;border: 2px #fff solid;text-align: center;margin:0 auto; /*// text-align: center;margin:0 auto; 搭配實(shí)現(xiàn)居中*/overflow: hidden;border-radius: 100%;top: 20px;animation: aidemolizhuanquanquan 180s infinite linear; /*愛(ài)的魔力轉(zhuǎn)圈圈*/}@keyframes aidemolizhuanquanquan {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}.musicName{color: black;text-align: center;}.musicName div{ /*寫(xiě)這個(gè)是為了讓當(dāng)前播放（這幾個(gè)字固定的）：后面的名字（是要更改的）*/display: inline-block;}.time{margin-top: 10px;font-size: 14px;line-height: 1.50;color: black;}.jdt-left{float: left;}.jdt-right{float: right;}.jdt{margin-left: 30px;margin-right: 30px;}.jdt_1{width: 100%;height: 8px;border-radius: 10px;background-color: #ccc;margin-top: 5px;overflow: hidden;}.jdt_color{height: 10px;width: 30%;pointer-events: none;background-color: #709a70;}.vol{position: absolute;width: 100px;height: 4px;top: 50%;right: 55px;margin-top: -2px;border-radius: 10px;background-color: #ccc;}.vol>img{width: 25px;height: 25px;margin-left: -135px;margin-top: -30px;}.vol_color{width: 100%;height: 4px;background-color: #709a70;margin-top: -17px;pointer-events: none;}.vol_blok{position: absolute;width: 7px;height: 7px;background-color: #709a70;border-radius: 100%;left: 100%;top: 50%;pointer-events: none;margin-top: -3.5px;}.text{color: black;position: absolute;right: 10px;top:50%;margin-top: -8px;}.ctrls{text-align: center;margin-top: 10px;position: relative;}.nextBtn,.preBtn,#bofang,#zanting {display: inline-block;width: 30px;height: 30px;}.yipai div{width: 30px;height: 30px;display: inline-block;}/*讓按鈕站到一排去*/</style> </head> <body>  <div class="musicPlayer"><div class="musicInfo"><div class="musicImg" id="musicImg"> <img src="./music/sky.jpg" id="musicpic"></div></div><div class="jdt"><span class="jdt-left time" id="jdtLeft">00:00</span><span class="jdt-right time" id="jdtRight">00:00</span><div class="clears"></div><div class="jdt_1" id="gequJDBar"><div class="jdt_color" id="gequjd"></div></div><div class="musicName"><div>當(dāng)前正在播放:</div> <div><h1 id="sname">歌曲名稱</h1></div></div><div class="ctrls" id="ctrls"><div class="yipai"><div> <img class="preBtn" id="preBtn" src="music/后退%20(1).png"></div><div> <img id="bofang" onclick="play()" src="music/暫停.png" alt=""><img id="zanting" onclick="pause()" src="music/暫停%20(1).png" alt=""></div><div> <img class="nextBtn" id="nextBtn" src="music/前進(jìn).png"></div></div><div class="vol" id="volJd"><img src="music/音量.png"><div class="vol_color" id="volColor"></div><div class="vol_blok" id="volBlok"></div></div><div class="text" id="text">100%</div></div><audio src="#" id="music"></audio> </div> <script >//找標(biāo)簽let music=document.getElementById("music");let preBtn=document.getElementById("preBtn");let nextBtn=document.getElementById("nextBtn");let sname=document.getElementById("sname");let musicpic=document.getElementById("musicpic");let jdtRight=document.getElementById("jdtRight"); //進(jìn)度條的左右let jdtLeft=document.getElementById("jdtLeft");let gequjd=document.getElementById("gequjd");// 歌曲進(jìn)度let gequJDBar=document.getElementById("gequJDBar");let volJd=document.getElementById("volJd"); //音量進(jìn)度let volColor=document.getElementById("volColor"); //音量顏色let volBlok=document.getElementById("volBlok");let musicImg=document.getElementById("musicImg");let text=document.getElementById("text");var bf= document.getElementById('bofang');var zt =document.getElementById('zanting');//歌曲用自己的路徑和圖片就好啦let songs=[{mp3:"./music/Serenade.mp3",name:"Serenade",img:"./music/sky.jpg",},{mp3:"./music/月光下的云海.mp3",name:"月光下的云海",img:"./music/1.jpg",},{mp3:"./music/EndlessHorizon.mp3",name:"EndlessHorizon",img:"./music/sky.jpg",}];//切歌函數(shù)let changeMusic=function (index) {music.src=songs[index].mp3;//換歌曲musicpic.src=songs[index].img;//換圖片sname.innerHTML=songs[index].name;//換名稱gequjd.style.width=0;//切歌時(shí)進(jìn)度歸0};//默認(rèn)加載第一首歌let index=0;//當(dāng)前播放歌曲索引changeMusic(index);//播放按鈕pause();// 暫停播放按鈕切換function play () {music.play();bf.style.display='none';zt.style.display="block"}function pause () {music.pause();zt.style.display='none';bf.style.display="block"}//切歌preBtn.addEventListener("click",function (event) {index--;if(index<=-1){index=songs.length-1;}changeMusic(index);});nextBtn.addEventListener("click",function (event) {index++;if(index>songs.length-1){index=0;}changeMusic(index);});//轉(zhuǎn)換時(shí)間function setTime(x, times) {if (times < 10) {x.innerHTML = "0:0" + Math.floor(times);} else if (times < 60) {x.innerHTML = "0:" + Math.floor(times);} else {let minute = parseInt(times / 60);let second = times - minute * 60;if (second < 10) {x.innerHTML = "0" + minute + ":" + "0" + parseInt(second);}else {x.innerHTML = "0" + minute + ":" + parseInt(second);}}}//歌曲事件//元數(shù)據(jù)加載，顯示總時(shí)長(zhǎng) duration 屬性獲得當(dāng)前視頻的長(zhǎng)度：music.addEventListener("loadedmetadata",function (event) {let times = music.duration;setTime(jdtRight, times);});//當(dāng)歌曲可以播放的。切歌的時(shí)候就能播放music.addEventListener("canplay",function (event) {music.play();});//時(shí)間更新事件，歌曲順利播放的時(shí)候，更新進(jìn)度條和當(dāng)前的時(shí)間music.addEventListener("timeupdate",function (event) {let jd=music.currentTime/music.duration;//0-1的小數(shù)let bfb=jd*100+"%";gequjd.style.width=bfb;let times = music.currentTime;setTime(jdtLeft, times);});//歌曲進(jìn)度條拖動(dòng)gequJDBar.addEventListener("click",function (event) {let x=event.offsetX;//獲取鼠標(biāo)所在位置let bfb=x/610*100;gequjd.style.width=bfb+"%";music.currentTime=music.duration*+bfb/100;});//音量控制拖動(dòng)let setVol=function(event){let x=event.offsetX;//獲取音量當(dāng)前的位置console.log(x); // 打印輸出當(dāng)前音量值let bfb=x/100*100;volColor.style.width=bfb+"%";volBlok.style.left=bfb+"%";text.innerHTML = bfb+"%" ;music.volume=bfb/100; //volume 屬性設(shè)置或返回音頻的音量，從 0.0 (靜音) 到 1.0 (最大聲)。};volJd.addEventListener("click",function (event) {setVol(event);});volJd.addEventListener("mousedown",function (event) {volJd.addEventListener("mousemove",setVol);});volJd.addEventListener("mouseup",function (event) {volJd.removeEventListener("mousemove",setVol);});// 播放完畢，自動(dòng)下一首music.addEventListener("ended",function(){nextBtn.click();}); </script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇： Matlab Figure 窗口最大化方
下一篇： Tkinter 如何禁用最大化

HTML

音乐播放器的设计与实现 功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示

總結(jié)

音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示