效果圖很重要
歌曲選擇了最近特別火的 太陽的后裔的原聲音樂6首。通過正規(guī)渠道獲得了聽播的權(quán)利（花20塊買的，哈哈）曹仗，非商業(yè)用途，個人使用應(yīng)該是沒事的~~~
列子
這里是一個栗子seaseeYoul-Audio
說明
這是一個使用html+css+js完成的網(wǎng)頁版MP3蠕搜。這個栗子實(shí)現(xiàn)了上一曲怎茫，下一曲，喜歡妓灌，靜音轨蛤，查看播放列表，點(diǎn)歌（單擊播放列表中的歌曲進(jìn)行播放）虫埂。模仿了CD的旋轉(zhuǎn)這些功能祥山，從界面設(shè)計到功能全部由個人完成。暫時已兼容除IE外所有主流瀏覽器掉伏。系統(tǒng)有問題枪蘑，IE測不了。岖免。岳颇。底部附錄全部代碼。
準(zhǔn)備材料
- sublime text3
- google瀏覽器 chrome 颅湘，或則其他對css3支持較好的瀏覽器
各個功能的實(shí)現(xiàn)思路
特別注意與小技巧：因為要使用定時器话侧，所以在進(jìn)行定時器相關(guān)操作時一定要先清除上一個定時器，否則會混亂闯参。使用一些隱藏的標(biāo)簽來保存一些屬性瞻鹏，能使js更加簡便。如存儲當(dāng)前播放的歌曲的id
Ⅰ：播放/暫停功能
播放功能實(shí)現(xiàn)了四個效果鹿寨，一是音樂的播放新博，改變播放按鈕的樣式，這一點(diǎn)分別使用媒體標(biāo)簽擁有的play()方法脚草，即：
var _this=document.getElementById('audio'); _this.play(); 赫悄。改變按鈕的樣式則只需要改變按鈕本身的class即可了。二是給CD添加一個旋轉(zhuǎn)效果，這個效果則由css3來完成埂淮。使用** animation-play-state:paused/running;
-webkit-animation-play-state:paused/running;**來控制動畫的開始與暫停姑隅，這個class的作用就是給CD添加動畫的。三是倒計時倔撞，倒計時只需要獲取到歌曲的總時間即可讲仰，我把所有的歌曲信息都存儲到了一個數(shù)組里面，需要什么痪蝇，我就從數(shù)組里面拿到即可鄙陡。四是進(jìn)度條，進(jìn)度條同倒計時一樣躏啰，使用定時器與css配合完成趁矾。核心代碼如下：
music_list:[
{"address":"1.mp3","lrc":"1.lrc","singer":"純音樂","name":"Always(Inst)","time":"205"},
{"address":"2.mp3","lrc":"2.lrc","singer":"T[伊萊美]","name":"Always","time":"205"},
{"address":"3.mp3","lrc":"3.lrc","singer":"CHEN[EXO] & Punch","name":"Everytime","time":"189"},
{"address":"4.mp3","lrc":"4.lrc","singer":"金娜英 & Mad Clown","name":"再次見到你","time":"235"},
{"address":"5.mp3","lrc":"5.lrc","singer":"純音樂","name":"再次見到你(Inst)","time":"235"},
{"address":"6.mp3","lrc":"6.lrc","singer":"Lyn","name":"With you","time":"254"}
]
togglePlay: function(){
var _this = document.getElementById('audio');
clearInterval(timer);
if($("#play").hasClass("icon-play")){
$("#play").removeClass("icon-play").addClass("icon-pause");
$(".disc").css({"animation-play-state":"running"});
_this.play();
timer = setInterval(audio.count,1000);
}else{
$("#play").removeClass("icon-pause").addClass("icon-play");
_this.pause();
clearInterval(timer);
$(".disc").css({"animation-play-state":"paused"});
}
audio._likes();
},
Ⅱ上一曲/下一曲
上一曲下一曲的功能本質(zhì)是更改audio標(biāo)簽里面的src地址，當(dāng)src指向一首新的歌曲的時候丙唧，那么再點(diǎn)擊播放愈魏，播放的音樂也就切換了。這個使用jq很容易完成想际。其次是更新現(xiàn)實(shí)的歌曲信息培漏，核心代碼如下：
next:function(){
var _this = document.getElementById('audio');
var _nextMusicId = parseInt($("#musicid").val())+1;
_nextMusicId = _nextMusicId > audio.music_list.length-1? 0 :_nextMusicId;
$("#musicid").val(_nextMusicId);
var nextMusicSrc ="./music/" +audio.music_list[_nextMusicId].address;
_this.src = nextMusicSrc;
$("#play").addClass("icon-play");
$("#countdown").attr("time",audio.music_list[_nextMusicId].time);
$(".singer").html(audio.music_list[_nextMusicId].singer);
$(".music-info").html(audio.music_list[_nextMusicId].name);
audio.togglePlay();
},
prev:function(){
var _this = document.getElementById('audio');
var _nextMusicId = parseInt($("#musicid").val())-1;
_nextMusicId = _nextMusicId > audio.music_list.length-1? 0 :_nextMusicId;
$("#musicid").val(_nextMusicId);
var nextMusicSrc ="./music/" +audio.music_list[_nextMusicId].address;
_this.src = nextMusicSrc;
$("#play").addClass("icon-play");
$("#countdown").attr("time",audio.music_list[_nextMusicId].time);
$(".singer").html(audio.music_list[_nextMusicId].singer);
$(".music-info").html(audio.music_list[_nextMusicId].name);
audio.togglePlay();
},
Ⅲ靜音
靜音很容易實(shí)現(xiàn)，同是使用媒體標(biāo)簽自帶的屬性胡本，_this.muted = false;開啟靜音牌柄，_this.muted = true;關(guān)閉靜音。
【var _this = document.getElementById('audio');】
Ⅳ喜歡
喜歡也很容易實(shí)現(xiàn)侧甫，點(diǎn)擊愛心珊佣，把他變?yōu)閷?shí)心，顏色改為紅色（更改class）披粟，紅色的愛咒锻，才是真愛。哈哈哈哈~~守屉，并且設(shè)置播放列表里面的當(dāng)前這首歌曲的like（自定義的）屬性為like惑艇。再次點(diǎn)擊的時候在變回去即可。
Ⅴ查看播放列表
把裝播放列表的div顯示出來就可以了拇泛。什么樣的方式自己決定滨巴。
Ⅵ 點(diǎn)歌
點(diǎn)歌的原理其實(shí)與上一曲/下一曲是一樣的，只是上下一曲是地址加減1俺叭，而點(diǎn)歌是指定某一首恭取。
Ⅶ附錄
所有的代碼都在這里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>saeseeYoul-Audio</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/audio.css">
</head>
<body>
<div class="container">
<div class="info">
<span class="icon-music tit"></span>
<h3 class="singer">CHEN[EXO]&Punch</h3>
<h4 class="music-info">Always(Inst)</h4>
<div class="disc">
<h4 class="sign">seaseeYoul.</h4>
<div class="cd1">
<div class="cd2"></div>
</div>
</div>
<div class="spinner" id="load">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div class="action">
<h5 id="countdown" time="205">-00:00</h5>
<input type="hidden" value="0" id="musicid">
<audio src="./music/1.mp3" id="audio" controls="controls" preload="auto"></audio>
<span class="time"> <i id="time_ring"></i>
</span>
<ul class="action_button">
<li class="large icon-step-backward" id="prev"></li>
<li class="large icon-play" id="play"></li>
<li class="large icon-step-forward" id="next"></li>
<li class="nomal icon-volume-up" id="mute"></li>
<li class="nomal icon-heart-empty" id="likes"></li>
<li class="nomal icon-reorder" id="menu"></li>
</ul>
</div>
<ul class="list"></ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/audio.js"></script>
</body>
</html>
這里是cCss代碼 Css code
這里是Js代碼 js code
Ⅷ其他說明
其實(shí)還有兩種狀態(tài)沒考慮到，一是網(wǎng)絡(luò)不好的時候熄守，MP3歌曲沒加載完成蜈垮，處于等待播放的狀態(tài)耗跛，這時候應(yīng)該清楚定時器以及一些其他效果，等待MP3重新開始播放窃款。二就是MP3等待結(jié)束重新開始播放课兄，這時候應(yīng)該還原到播放狀態(tài)牍氛。但是我是本地測試晨继，而且網(wǎng)速比較好完全沒有這兩個狀態(tài)。搬俊。紊扬。測不了啊測不了。唉擂。餐屎。原諒我吧。玩祟。腹缩。
