本地資源在谷歌瀏覽器上是無(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
{ height
: 200px
;text
-align
: center
;}.musicImg
{width
: 200px
;height
: 200px
;border
: 2px #fff solid
;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
>
<!--音樂(lè)播放器
-->
<div
class="musicPlayer"><div
class="musicInfo"><!--進(jìn)度條上面一塊的區(qū)域
--><div
class="musicImg" id
="musicImg"> <!--歌曲圖片
--><img src
="./music/sky.jpg" id
="musicpic"></div
></div
><!--進(jìn)度條
--><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
><!--進(jìn)度條 end
--><!--控制按鈕
--><div
class="musicName"><div
>當(dāng)前正在播放
:</div
> <div
><h1 id
="sname">歌曲名稱
</h1
></div
></div
><div
class="ctrls" id
="ctrls"><div
class="yipai"><!--這個(gè)詭異的命名是為了讓前進(jìn)后退暫停三個(gè)圖片在同一排 拼音一排哈哈哈
--><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
><!--音量控制 end
--><!--音量顯示百分比
--><div
class="text" id
="text">100%</div
><!--音量顯示百分比 end
--><!--控制按鈕 end
--></div
><audio src
="#" id
="music"></audio
>
</div
><!--音樂(lè)播放器 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;};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
);}}}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
;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; };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
>
總結(jié)
以上是生活随笔為你收集整理的音乐播放器的设计与实现 功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
