整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
款UI界面非常簡潔美觀的html5小型網頁mp3音樂播放器開發，暫停播放、歌曲切換、進度條等基本功能都有。
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Music Player | Audio Player </title> <!--字體圖標樣式--> <link rel='stylesheet' > <link rel='stylesheet' > <!--布局樣式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- Tracks used in this music/audio player application are free to use. I downloaded them from Soundcloud and NCS websites. I am not the owner of these tracks. Please don't create new pen by just copying and pasting code from this pen ( as I have seen some of them ), if you do that then don't forget to link back to this original pen. If you want to copy this pen then simply use the Fork button. Thank you --> <div id="app-cover"> <div id="bg-artwork"></div> <div id="bg-layer"></div> <div id="player"> <div id="player-track"> <div id="album-name"></div> <div id="track-name"></div> <div id="track-time"> <div id="current-time"></div> <div id="track-length"></div> </div> <div id="s-area"> <div id="ins-time"></div> <div id="s-hover"></div> <div id="seek-bar"></div> </div> </div> <div id="player-content"> <div id="album-art"> <img src="img/1.jpg" class="active" id="_1"> <img src="img/2.jpg" id="_2"> <img src="img/3.jpg" id="_3"> <img src="img/4.jpg" id="_4"> <img src="img/5.jpg" id="_5"> <div id="buffer-box">緩沖…</div> </div> <div id="player-controls"> <div class="control"> <div class="button" id="play-previous"> <i class="fas fa-backward"></i> </div> </div> <div class="control"> <div class="button" id="play-pause-button"> <i class="fas fa-play"></i> </div> </div> <div class="control"> <div class="button" id="play-next"> <i class="fas fa-forward"></i> </div> </div> </div> </div> </div> </div> </body> </html>
大家需要這個項目css代碼，js，圖片做練習的可以找我免費領取，如果大家不怕麻煩可以關注我后私信我“前端學習資料”幾個字 找我領取 24小時在線！
下來我們開始制作播放按鈕：
默認圖標的顏色是黑色，而且字體很小，我們需要對這個圖標進行css樣式美化和絕對定位。
接下來，我們給這個播放按鈕添加一個點擊事件，點擊之后就播放一首歌曲。
然后，在body區域隨便添加一個audio標簽，用于播放音樂。
在項目根目錄新建一個mp3文件夾，專門用來存放歌曲：
現在編寫playMusic方法，去播放01.MP3。
接下來做一個音樂播放時候的旋轉效果，用css3中的keyframes來做。
當點擊播放按鈕的時候，就給當前對象（i標簽）添加一個旋轉的class。
完成！
者：vipbic
轉發鏈接：https://segmentfault.com/a/1190000022980992
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
