時間：2023-07-22 09:24:01 | 來源：網(wǎng)站運營
時間：2023-07-22 09:24:01 來源：網(wǎng)站運營
手把手教你用HTML/CSS/JS寫一個屬于自己的音樂播放器：溫馨提示：閱讀本篇文章需要一定的HTML/CSS/JS基礎(chǔ)，沒有應(yīng)該也能看（看得看不懂就不知道了）首先，梳理一下我們要實現(xiàn)哪些功能：在碼代碼之前先整一下文件夾安排
1.對應(yīng)顯示歌曲列表和歌詞
2.單擊播放|暫停、上下首時實現(xiàn)對應(yīng)功能，歌詞也要對應(yīng)改變，上一首歌曲播完后自動切換下一首（核心）
3.讓標題，各部分，結(jié)尾顯示在相應(yīng)的地方
4.背景圖片根據(jù)屏幕大小等比例縮放顯示
5.顯示歌曲播放進度條，單擊進度條某一位置時，歌曲就播到此位置 //TODO
在線咨詢
<!DOCTYPE html><html> <head> <title>網(wǎng)頁標題</title> <link rel="stylesheet" type="text/css" href="css/css文件.css"> </head> <body> <!--功能實現(xiàn)--> <script src="js/js文件.js" type="text/javascript"></script> </body></html>下面咱們一個一個實現(xiàn)相應(yīng)功能。color: white; -webkit-text-stroke: 2px black;border-color: bisque; /*陶坯黃*/border-width: 10px;border-radius: 5%;border-style: ridge; 滾動條就更簡單了，只需要overflow-y:scroll;overflow-x:hidden;下面來進行第二步var song_list=["song1","song2","song3"...];var lyrics_list=["lyrics1","lyrics2","lyrics3"...];var i = 0; //初始默認第一首歌曲溫馨提示：歌詞里面需要加<br>來實現(xiàn)換行哦<a href="#" onclick="fire()">Fire -Gavin DeGraw</a>然后在JS中，創(chuàng)建一個fire()函數(shù)，實現(xiàn)單擊時改變歌詞，播放歌曲function fire(){ i=0; var FilePath=FilePath1+song_list[i]+FilePath2; obj.setAttribute('src',FilePath); //這里實現(xiàn)播放音樂 document.getElementById("lyrics").innerHTML=lyrics_list[i];}至此，第一小步完成<img src="./image/next.png" onmousedown="next()" alt="next"><img src="./image/stop.png" onmousedown="play()" alt="user" id="musicImg"><img src="./image/previous.png" onmousedown="previous()" alt="previous">基本原來就是：當單擊圖片時，如果音樂正在播放，那么暫停；如果暫停，那么播放function play() { if (obj.paused) { //如果暫停 obj.play(); //播放音樂 document.getElementById('musicImg').src="./image/playing.png"; //改變圖片 }else{ //如果播放（如果不是暫停） audio.pause(); //暫停音樂 //audio.currentTime = 0; 這句可以讓音樂從頭播放 document.getElementById('musicImg').src="./image/stop.png"; //改變圖片 }}這樣play()函數(shù)就基本完成了function next(){ if(i<2){ //這里我為了省事就直接寫了2，也就是三首 i+=1; } else{ i=0; } //后面一樣 var FilePath=FilePath1+song_list[i]+FilePath2; obj.setAttribute('src',FilePath); document.getElementById('musicImg').src="./image/playing.png"; //別忘了改變圖片哦 document.getElementById("lyrics").innerHTML=lyrics_list[i];}previous()也一樣，這里就不再細說了h2.lyrics{ position:relative; left:68%; top: 30%;}等等等等<body background="背景圖片路徑" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment: fixed;"></body>挺管用，就直接拿了用了關(guān)鍵詞：音樂,把手
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
