一个个人写的基于html5的音乐播放器，不多说贴码。
首先给个做好的界面：
1.首先是css，文件名：music.css
body{
margin:20px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
}
#musicList{
}
li{
list-style: url(../images/heart.png) outside circle;
line-height:20px;
padding-bottom:3px;
vertical-align: middle;
}
.float_r{float:right;}
.float_l{float:left;}
.playMode{text-align:right;}
.songStyle{
width: 300px;
margin-bottom:20px;
border:1px solid #96C2F1;
background-color: #EFF7FF
}
.songStyle h3{
margin: 1px;
padding: 1px 1px 1px 10px;
background-color: #B2D3F5;
height: 24px;
}
.playDiv{
width: 610px;
margin-bottom:10px;
border:1px solid #92B0DD;
background-color: #FFFFFf
}
.currentMusic{
background-color: #E2EAF8;
height: 24px;
width:100%;
}
.currentSpan{
padding-left:3px;
}
.lastMusic{
background-color: #E2EAF8;
text-align:center;
}
.lastMusic img{
width:32px;
height:32px;
cursor:pointer;
}
.infoStyle{
margin-left:10px;
width: 300px;
margin-bottom:20px;
border:1px solid #96C2F1;
background-color: #EFF7FF;
}
.infoStyle h3{
margin: 1px;
padding: 1px 1px 1px 10px;
background-color: #B2D3F5;
height: 24px;
}
.info{
width:49%;
}
.picInfo{
width:49%;
margin-right:2px;
height:100%;
}
strong span{
margin-left:4px;
}
.info div{
padding: 10px 0px 10px 10px;
font-size:12px;
}
.liOn{
background-color:#E3E197;
}
.Gray
{
filter:alpha(style=0,opacity=30,finishopacity=30);
}
2.javascript文件，文件名:music.js
var myMusic = null;
var MyMusic = function(){
var _this = this;
var musicBox_H = document.getElementById("musicBox");
var people = "images/people/";
//音乐列表
var musicFiles=[new MusicObj("HISTORY","musics/HISTORY.mp3","EXO-K","MAMA",people+"EXO-K.jpg",0,1),
new MusicObj("MAMA","musics/MAMA.mp3","EXO-K","MAMA",people+"EXO-K.jpg",0,1),
new MusicObj("Sexy, Free & Single","musics/Sexy, Free & Single.mp3","Super Junior","Sexy, Free & Single",people+"Super Junior.jpg",0,0),
new MusicObj("Muzik","musics/Muzik.mp3","4 Minute","4 Minute For Muzik Cd",people+"4 Minute.jpg",1,0),
new MusicObj("爱情终点","musics/爱情终点.mp3","王绎龙","电音之王",people+"wyl.jpg",0,0)
];
//播放模式 1-全部循环 2-单曲循环 3-随机播放
var playMode = 1;
//当前音乐播放的下标
var index = -1;
var length = musicFiles.length;
var playMode_H = $("#playMode");
var musicList_H = $("#musicList");
var playMsg_H = $("#playMsg");
var name = $("#name");
var author = $("#author");
var CD = $("#CD");
var picInfo = $("#picInfo");
var pop =$("#pop");
var playMsg = null;
_this.fristMusic = function(){
index = 0;
_this.play();
}
_this.playOrPause=function(){
pop.addClass("Gray");
var popVal = pop.attr("imgVal");
if(popVal == 0){
pop.attr("src","images/play/play.png");
pop.attr("title","点击播放");
pop.attr("imgVal","1");
musicBox_H.pause();
}else{
pop.attr("src","images/play/pause.png");
pop.attr("title","点击暂停");
pop.attr("imgVal","0");
musicBox_H.play();
}
}
_this.end = function(){
index = length -1;
_this.play();
}
_this.lastMusic = function(){
if(index == 0){
index = length-1;
}else{
index --;
}
_this.play();
}
_this.loadMusic = function(){
for(var i in musicFiles){
var html = "<li>"+musicFiles[i].name;
if(musicFiles[i].hot == 1){
html+="<img src='images/HOT/hot1.gif'/>";
}
if(musicFiles[i].newSong == 1){
html+="<img src='images/NEW/new.png'/>";
}
html+= "</li>";
musicList_H.append(html);
}
};
_this.nextMusic = function(){
var currentMusic = null;
switch(parseInt(playMode)){
case 1:
index ++;
if(index>=length){
index = 0;
}
break;
case 2:
if(index == -1){
index = 0;
}
break;
case 3:
index = Math.floor(Math.random()*length);
break;
}
_this.play();
};
_this.loadInfo = function(){
name.text(musicFiles[index].name);
author.text(musicFiles[index].author);
CD.text(musicFiles[index].CD);
picInfo.attr("src",musicFiles[index].people);
};
_this.play = function(){
currentMusic = musicFiles[index];
playMsg_H.text(musicFiles[index].name+"【"+musicFiles[index].author+"】");
$(musicBox_H).attr("src",musicFiles[index].url);
$("#musicList").children().each(function(i){
$($("#musicList").children().get(i)).removeClass("liOn");
});
$($("#musicList").children().get(index)).addClass("liOn");
_this.loadInfo();
musicBox_H.play();
};
_this.init = function(){
_this.loadMusic();
var songheight = $("#songs").height();
$("#infos").css("height",songheight+"px");
playMode_H.change(function(){
playMode = playMode_H.val();
});
};
}
$().ready(function(){
myMusic = new MyMusic();
myMusic.init();
myMusic.nextMusic();
});
//音乐对象
function MusicObj(name,url,author,cd,people,hot,newSong){
var _this = this;
this.name = name;
this.url = url;
this.author = author;
this.CD = cd;
this.people = people;
this.hot = hot;
this.newSong= newSong;
}
页面文件，music.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/music.js"></script> <link href="css/music.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="playDiv"> <div class="currentMusic"><span class="currentSpan">当前正在播放：<span id="playMsg"></span></span></div> <div> <audio id="musicBox" controls onended="myMusic.nextMusic()" style="width:99%;padding-left:2px;"> An audio clip from Johann Sebastian Bach. </audio> </div> <div class="currentBtns"> <div id="lastMusic" class="lastMusic"> <img title="第一首歌曲" src="images/play/first.png" onclick="myMusic.fristMusic()"/> <img title="上一首歌曲" src="images/play/last.png" onclick="myMusic.lastMusic()"/> <img title="点击暂停" id="pop" src="images/play/pause.png" onclick="myMusic.playOrPause()" imgVal="0"/> <img title="下一首歌曲" src="images/play/next.png" onclick="myMusic.nextMusic()"/> <img title="最后一首歌曲" src="images/play/end.png" onclick="myMusic.end()"/> </div> <div id="play"></div> <div id="nextMusic"></div> </div> </div> <div style="width:100%"> <div class="songStyle float_l"> <h3>歌曲列表 <div class="float_r"><span class="playMode"> <select id="playMode"> <option value="1">全部循环</option> <option value="2">单曲循环</option> <option value="3">随机播放</option> </select> </span></div></h3> <div id="songs"> <ul id="musicList"> </ul> </div> </div> <div class="infoStyle float_l"> <h3>歌曲信息</h3> <div style="width:100%" id="infos"> <div class="info float_l"> <div><strong><span>歌名:</span><span id="name"></span></strong></div> <div><strong><span>歌手:</span><span id="author"></span></strong></div> <div><strong><span>专辑:</span><span id="CD"></span></strong></div> </div> <div class="picInfo float_l"> <img id="picInfo" style="width:100%;height:100%;"/> </div> </div> <ul id="musicList"> </ul> </div> </div> </body> </html>记住引入jquery.js,文中的图片均来自网络。
到这儿，基本都做好了：
