web前端學(xué)習(xí)教程，html5小型網(wǎng)頁，mp3音樂播

web前端學(xué)習(xí)教程，html5小型網(wǎng)頁，mp3音樂播放器開發(fā)

款UI界面非常簡潔美觀的html5小型網(wǎng)頁mp3音樂播放器開發(fā)，暫停播放、歌曲切換、進(jìn)度條等基本功能都有。

項(xiàng)目源碼分享：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Music Player | Audio Player </title>
<!--字體圖標(biāo)樣式-->
<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>

源碼運(yùn)行效果截圖：

大家需要這個(gè)項(xiàng)目css代碼，js，圖片做練習(xí)的可以找我免費(fèi)領(lǐng)取，如果大家不怕麻煩可以關(guān)注我后私信我“前端學(xué)習(xí)資料”幾個(gè)字找我領(lǐng)取 24小時(shí)在線！

下來我們開始制作播放按鈕：

默認(rèn)圖標(biāo)的顏色是黑色，而且字體很小，我們需要對(duì)這個(gè)圖標(biāo)進(jìn)行css樣式美化和絕對(duì)定位。

接下來，我們給這個(gè)播放按鈕添加一個(gè)點(diǎn)擊事件，點(diǎn)擊之后就播放一首歌曲。

然后，在body區(qū)域隨便添加一個(gè)audio標(biāo)簽，用于播放音樂。

在項(xiàng)目根目錄新建一個(gè)mp3文件夾，專門用來存放歌曲：

現(xiàn)在編寫playMusic方法，去播放01.MP3。

接下來做一個(gè)音樂播放時(shí)候的旋轉(zhuǎn)效果，用css3中的keyframes來做。

當(dāng)點(diǎn)擊播放按鈕的時(shí)候，就給當(dāng)前對(duì)象（i標(biāo)簽）添加一個(gè)旋轉(zhuǎn)的class。

完成！

者：vipbic

轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000022980992

在線咨詢

上一篇：父組件如何在子組件上綁定事件，.native的用法
下一篇：JavaAPI開發(fā)（2）JavaMail-如何用Ja

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

web前端學(xué)習(xí)教程，html5小型網(wǎng)頁，mp3音樂播

項(xiàng)目源碼分享：

源碼運(yùn)行效果截圖：

您的項(xiàng)目需求