效果图很重要
效果图.png
歌曲选择了最近特别火的 太阳的后裔的原声音乐6首。通过正规渠道获得了听播的权利（花20块买的，哈哈），非商业用途，个人使用应该是没事的~~~
列子
这里是一个栗子seaseeYoul-Audio
说明
这是一个使用html+css+js完成的网页版MP3。这个栗子实现了上一曲，下一曲，喜欢，静音，查看播放列表，点歌（单击播放列表中的歌曲进行播放）。模仿了CD的旋转这些功能，从界面设计到功能全部由个人完成。暂时已兼容除IE外所有主流浏览器。系统有问题，IE测不了。。。底部附录全部代码。
准备材料
- sublime text3
- google浏览器 chrome ，或则其他对css3支持较好的浏览器
各个功能的实现思路
特别注意与小技巧：因为要使用定时器，所以在进行定时器相关操作时一定要先清除上一个定时器，否则会混乱。使用一些隐藏的标签来保存一些属性，能使js更加简便。如存储当前播放的歌曲的id
Ⅰ：播放/暂停功能
播放功能实现了四个效果，一是音乐的播放，改变播放按钮的样式，这一点分别使用媒体标签拥有的play()方法，即：
var _this=document.getElementById('audio'); _this.play(); 。改变按钮的样式则只需要改变按钮本身的class即可了。二是给CD添加一个旋转效果，这个效果则由css3来完成。使用** animation-play-state:paused/running;
-webkit-animation-play-state:paused/running;**来控制动画的开始与暂停，这个class的作用就是给CD添加动画的。三是倒计时，倒计时只需要获取到歌曲的总时间即可，我把所有的歌曲信息都存储到了一个数组里面，需要什么，我就从数组里面拿到即可。四是进度条，进度条同倒计时一样，使用定时器与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();
},
Ⅱ上一曲/下一曲
上一曲下一曲的功能本质是更改audio标签里面的src地址，当src指向一首新的歌曲的时候，那么再点击播放，播放的音乐也就切换了。这个使用jq很容易完成。其次是更新现实的歌曲信息，核心代码如下：
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();
},
Ⅲ静音
静音很容易实现，同是使用媒体标签自带的属性，_this.muted = false;开启静音，_this.muted = true;关闭静音。
【var _this = document.getElementById('audio');】
Ⅳ喜欢
喜欢也很容易实现，点击爱心，把他变为实心，颜色改为红色（更改class），红色的爱，才是真爱。哈哈哈哈~~，并且设置播放列表里面的当前这首歌曲的like（自定义的）属性为like。再次点击的时候在变回去即可。
Ⅴ查看播放列表
把装播放列表的div显示出来就可以了。什么样的方式自己决定。
Ⅵ 点歌
点歌的原理其实与上一曲/下一曲是一样的，只是上下一曲是地址加减1，而点歌是指定某一首。
Ⅶ附录
所有的代码都在这里
<!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
Ⅷ其他说明
其实还有两种状态没考虑到，一是网络不好的时候，MP3歌曲没加载完成，处于等待播放的状态，这时候应该清楚定时器以及一些其他效果，等待MP3重新开始播放。二就是MP3等待结束重新开始播放，这时候应该还原到播放状态。但是我是本地测试，而且网速比较好完全没有这两个状态。。。测不了啊测不了。。。原谅我吧。。。
网友评论