利用HTML5制作音乐播放器【一】

jynine

浏览: 135807 次
性别:
来自: 重庆

最近访客更多访客>>

leoeco2000

让蛋蛋飞_007

sinwaj

夜爽星

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5
CSS
JavaScript

html5 html java css audio

今天做了一个播放器，不过美工没学好，所以样式有点丑，不多说贴码。
首先给个做好的界面：

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()"/>&nbsp;&nbsp;
		<img title="上一首歌曲" src="images/play/last.png" onclick="myMusic.lastMusic()"/>&nbsp;&nbsp;
		<img title="点击暂停" id="pop" src="images/play/pause.png" onclick="myMusic.playOrPause()" imgVal="0"/>&nbsp;&nbsp;
		<img title="下一首歌曲" src="images/play/next.png" onclick="myMusic.nextMusic()"/>&nbsp;&nbsp;
		<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,文中的图片均来自网络。
到这儿，基本都做好了：