日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2023/12/14 HTML 35 豆豆


本地資源在谷歌瀏覽器上是無法快進的。這個是重點!!!有很多解決方法，我直接用火狐就ok了
https://www.gaitubao.com/# 改圖寶鏈接 用于修改歌曲頭像 大小標準顯示才正常 我用的大小為300，300
我用的圖標全都來自iconfont Iconfont-阿里巴巴矢量圖標庫
貼上代碼 每一行都有注釋 包括命名 有問題 歡迎評論 或者詢問 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{ /*進度條上面一塊的區域*/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; 搭配實現居中*/overflow: hidden;border-radius: 100%;top: 20px;animation: aidemolizhuanquanquan 180s infinite linear; /*愛的魔力轉圈圈*/}@keyframes aidemolizhuanquanquan {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}.musicName{color: black;text-align: center;}.musicName div{ /*寫這個是為了 讓當前播放（這幾個字固定的） ： 后面的名字 （是要更改的）*/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><!--進度條 end--><!--控制按鈕--><div class="musicName"><div>當前正在播放:</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/前進.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><!--音量控制 end--><!--音量顯示百分比--><div class="text" id="text">100%</div><!--音量顯示百分比 end--><!--控制按鈕 end--></div><audio src="#" id="music"></audio> </div><!--音樂播放器 end--> <script >//找標簽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"); //進度條的左右let jdtLeft=document.getElementById("jdtLeft");let gequjd=document.getElementById("gequjd");// 歌曲進度let gequJDBar=document.getElementById("gequJDBar");let volJd=document.getElementById("volJd"); //音量進度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",}];//切歌函數let changeMusic=function (index) {music.src=songs[index].mp3;//換歌曲musicpic.src=songs[index].img;//換圖片sname.innerHTML=songs[index].name;//換名稱gequjd.style.width=0;//切歌時進度歸0};//默認加載第一首歌let index=0;//當前播放歌曲索引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);});//轉換時間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);}}}//歌曲事件//元數據加載，顯示總時長 duration 屬性獲得當前視頻的長度：music.addEventListener("loadedmetadata",function (event) {let times = music.duration;setTime(jdtRight, times);});//當歌曲可以播放的。切歌的時候就能播放music.addEventListener("canplay",function (event) {music.play();});//時間更新事件，歌曲順利播放的時候，更新進度條和當前的時間music.addEventListener("timeupdate",function (event) {let jd=music.currentTime/music.duration;//0-1的小數let bfb=jd*100+"%";gequjd.style.width=bfb;let times = music.currentTime;setTime(jdtLeft, times);});//歌曲進度條拖動gequJDBar.addEventListener("click",function (event) {let x=event.offsetX;//獲取鼠標所在位置let bfb=x/610*100;gequjd.style.width=bfb+"%";music.currentTime=music.duration*+bfb/100;});//音量控制拖動let setVol=function(event){let x=event.offsetX;//獲取音量當前的位置console.log(x); // 打印輸出當前音量值let bfb=x/100*100;volColor.style.width=bfb+"%";volBlok.style.left=bfb+"%";text.innerHTML = bfb+"%" ;music.volume=bfb/100; //volume 屬性設置或返回音頻的音量，從 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);});// 播放完畢，自動下一首music.addEventListener("ended",function(){nextBtn.click();}); </script> </body> </html>

總結

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

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