因爲日常喜歡聽音樂，也就很想編寫一個音樂播放器玩玩。現在積累的差不多了，今天用html5和jquery實現一個音樂播放器的插件。
先奉上最終實現的效果圖：
界面很簡單，功能主要包括：
控制當前播放歌曲的進度；
前後切換；
播放模式包括順序播放、單曲循環、隨機播放；
顯示隱藏歌單；
1、創建插件文件夾：
2、編寫music.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音樂播放器</title>
<link rel="stylesheet" type="text/css" href="css/music.css">
</head>
<body>
<div id="music">
<div class="tag">
<span class="artist">Artist</span>
<strong>-Title</strong>
</div>
<div class="cover"></div>
<div class="progress">
<div class="timer left">0:00</div>
<div class="slider">
<div class="loaded"></div>
<div class="pace"></div>
<a href="javascript:void(0)"></a>
</div>
<div class="timer right">4:00</div>
</div>
<div class="control">
<div class="model">
<div class="continous"></div>
</div>
<div class="play">
<div class="current"></div>
<div class="prev"></div>
<div class="next"></div>
</div>
<div class="list"></div>
</div>
<div class="hide">
<ul id="playlist"></ul>
<span class="hidelist">隱藏</span>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.musicPlay.js"></script>
<script type="text/javascript" src="js/music.js"></script>
</html>編寫music.css文件：
*{margin: 0;padding: 0;font-family: "微軟雅黑";}
body{background: #222;}
ul{list-style: none;}
#music{
width: 330px;
height: 440px;
margin: 30px auto;
background-color: #f2f2f2;
position: relative;
overflow: hidden;
}
.tag{
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
background-color:#0078D7;
}
.cover{
width: 240px;
height: 240px;
margin: 20px auto;
border:10px solid #ccc;
border-radius: 120px;
-webkit-border-radius: 130px;
-moz-border-radius: 130px;
-khtml-border-radius: 130px;
background:url(../img/董小姐.jpg) center no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
.rotate{
-webkit-transform-style:preserve-3d;
-webkit-animation-name:x-spin;
-webkit-animation-duration:30s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes x-spin{
0%{
-webkit-transform:rotateZ(0deg);
}
50%{
-webkit-transform:rotateZ(180deg);
}
100%{
-webkit-transform:rotateZ(360deg);
}
}
.progress{
width: 100%;
height: 30px;
}
.timer{
width: 15%;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
font-size: 14px;
}
.progress .slider{
width: 70%;
height: 10px;
margin-top: 10px;
float: left;
cursor: pointer;
position: relative;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
background-color: #ccc;
}
.progress .loaded{
position: absolute;
height: 100%;
opacity: 0.7;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
}
.progress .pace{
position: absolute;
height: 100%;
background-color:#0078D7;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
}
.progress a{
width: 10px;
height: 10px;
display: block;
position: absolute;
left: -2%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
background-color:#fff;
}
.control{
width: 100%;
height: 80px;
}
.model{
width: 20%;
height: 40px;
float: left;
}
.play{
width: 60%;
height: 60px;
float: left;
position: relative;
}
.continous,.list{
width: 30px;
height: 30px;
margin: 20px auto;
background:url(../img/1182981.png) center no-repeat;
opacity:0.5;
}
.continous{
background:url(../img/1182981.png) center no-repeat;
}
.list{
float: left;
margin-left: 15px;
background:url(../img/1182976.png) center no-repeat;
}
.continous:hover,.list:hover{
opacity:1;
}
.current,.prev,.next{
width:44px;
height: 44px;
position: absolute;
top: 14px;
}
.current{
left: 50%;
margin-left: -22px;
background:url(../img/control.png) no-repeat;
background-position: top right;
}
.prev{
left: 20px;
background:url(../img/control.png) no-repeat;
background-position: bottom right;
}
.next{
right: 20px;
background:url(../img/control.png) no-repeat;
background-position: bottom left;
}
.prev,.next{
opacity:0.6;
transition:opacity 0.5s linear;
-webkit-transition:opacity 0.5s linear;
}
.prev:hover,.next:hover{
opacity:1;
}
.hide{
width: 330px;
min-height: 300px;
height: auto;
color: #f2f2f2;
background-color:rgba(0,0,0,0.5);
position: absolute;
bottom: -320px;
padding-top: 20px;
}
#playlist li{
width: 100%;
height: 30px;
cursor: pointer;
line-height: 30px;
margin:0 0 10px 0;
border-bottom:1px solid #ccc;
text-indent: 20px;
}
#playlist li:hover,.hidelist:hover{
color: #fff;
}
.hidelist{
width: 100%;
height: 40px;
display: block;
line-height: 40px;
text-align: center;
position: absolute;
bottom: 0;
background-color:rgba(0,0,0,0.6);
cursor: pointer;
font-size: 24px;
}這裏這裏爲實現歌曲封面自動旋轉，用到了css3的動畫內容，animations功能支持通過關鍵幀的指定在頁面上產生複雜的動畫效果。簡單介紹一下animation屬性：
animation-name：定義動畫的名稱，屬性初始值是none；
animation-duration：定義了動畫的播放時間。初始值爲0；
animation-timing-function：定義動畫的播放方式，屬性初始值是ease；
animation-iteration-count：定義動畫的播放次數。屬性初始值是1，適用於所有塊元素和內聯元素。infinite表示無限次。
3、編寫jquery.musicPlay.js插件文件：
;(function($){
$.fn.musicPlay=function(){
var autoplay = false,
repeat = localStorage.repeat || 0, //單曲循環，用到html5 web存儲知識
shuffle = localStorage.shuffle || 0, //隨機播放
continous = localStorage.continous || 1, //順序播放
playList = [
{
title:'董小姐',
artist:'宋冬野',
cover:'img/董小姐.jpg',
mp3:'media/董小姐.mp3',
},
{
title:'棉花糖',
artist:'至上勵合',
cover:'img/棉花糖.jpg',
mp3:'media/棉花糖.mp3',
},
{
title:'下雨天',
artist:'南拳媽媽',
cover:'img/下雨天.jpg',
mp3:'media/下雨天.mp3',
},
{
title:'不再聯繫',
artist:'Alex',
cover:'img/不再聯繫.jpg',
mp3:'media/不再聯繫.mp3',
},
{
title:'給我一首歌的時間',
artist:'周杰倫',
cover:'img/給我一首歌的時間.jpg',
mp3:'media/給我一首歌的時間.mp3',
}
];
//保持最近播放模式
if (continous==1) {
$('.continous').html('').css('background','url(img/1182981.png) center no-repeat');
}else if (repeat==1) {
$('.continous').html('1').css({
'line-height':'30px',
'text-align':'center',
'font-size':14
})
}else{
$('.continous').html('').css('background','url(img/1182983.png) center no-repeat');
}
//添加歌單元素
for (var i = 0; i < playList.length; i++) {
$("#playlist").append('<li>' + playList[i].artist + '-' + playList[i].title + '</li>');
}
var audio, //將被賦予一個音頻對象值
timeout, //定時器
isPlaying, //記錄當前播放狀態
currentTrack = 0; //記錄當前播放曲目索引
//定義播放函數
var play = function(){
audio.play();
$('.current').addClass("playing");
timeout = setInterval(updateProgress, 500);
isPlaying = true;
};
//定義暫停函數
var pause = function(){
audio.pause();
$('.current').removeClass("playing");
clearInterval(updateProgress);
isPlaying = false;
};
//設置當前進度條顯示
var setProgress = function(value){
var currentSec = parseInt(value%60)<10 ? '0' + parseInt(value%60):parseInt(value%60),
ratio = value / audio.duration * 100;
$('.left').html(parseInt(value/60) + ':' + currentSec);
$('.right').html(parseInt(audio.duration/60) + ':' + (parseInt(audio.duration%60)<10 ? '0' + parseInt(audio.duration%60):parseInt(audio.duration%60)));
$('.progress .pace').css('width',ratio+'%');
$('.progress a').css('left',(ratio-2)+'%');
};
var updateProgress = function(){
setProgress(audio.currentTime);
};
$('.progress .slider').slider(
{
step:0.1,
slide:function(event,ui){
setProgress(audio.duration * ui.value/100);
clearInterval(timeout);
},
stop:function(event,ui){
audio.currentTime = audio.duration * ui.value/100;
timeout = setInterval(updateProgress,500);
}
}
);
//切換歌曲索引
var switchTrack = function(i){
if (i<0) {
track = currentTrack = playList.length - 1;
}else if (i>= playList.length) {
track = currentTrack = 0;
}else{
track = i;
}
$('audio').remove();
loadMusic(track);
if (isPlaying == true) {
play();
}
};
//隨機播放函數
var shufflePlay = function(){
var time = new Date(),
lastTrack = currentTrack;
currentTrack = time.getTime() % playList.length;
if (currentTrack == lastTrack) {
++currentTrack;
}
switchTrack(currentTrack);
};
//定義加載前函數
var beforeLoad = function(){
var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
$('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) +'%');
};
//定義加載後函數
var afterLoad = function(){
if (autoplay == true) play();
};
//定義當前歌曲播放結束函數
var ended = function(){
audio.currentTime = 0;
if (continous==1) {
switchTrack(++currentTrack);
}else if (repeat == 1) {
play();
}else{
shufflePlay();
}
};
//定義加載歌曲函數，創建音頻對象
var loadMusic = function(i){
var newaudio = $('<audio>').html('<source src="'+playList[i].mp3+'">').appendTo('#music');
$('.cover').css(
{
"background":'url('+playList[i].cover+') center no-repeat',
"background-size":"cover"
}
);
$('.tag').html('<span class="artist">'+playList[i].artist+'-</span><span>'+playList[i].title+'</span>');
$('#playlist li').removeClass('playing').eq(i).addClass('playing');
audio = newaudio[0];
audio.addEventListener('progress',beforeLoad,false);
audio.addEventListener('durationchange',beforeLoad,false);
audio.addEventListener('canplay',afterLoad,false);
audio.addEventListener('ended',ended,false);
};
loadMusic(currentTrack);
//給播放按鈕綁定點擊事件切換狀態
$('.current').on('click',function(){
if ($(this).hasClass('playing')) {
pause();
$('.cover').removeClass('rotate');
$(this).css('background-position','top right');
}else{
play();
$('.cover').addClass('rotate');
$(this).css('background-position','top left');
}
});
//向前切換
$('.prev').on('click',function(){
if (shuffle == 1) {
shufflePlay();
}else{
switchTrack(--currentTrack);
}
});
//向後切換
$('.next').on('click',function(){
if (shuffle == 1) {
shufflePlay();
}else{
switchTrack(++currentTrack);
}
});
//歌單點擊
$('#playlist li').each(function(index){
$(this).on('click',function(){
switchTrack(index);
});
});
//播放模式切換
$('.continous').on('click',function(){
if (shuffle == 1) {
shuffle = localStorage.shuffle = 0;
continous = localStorage.continous = 1;
repeat = localStorage.repeat = 0;
$(this).html('');
$(this).css('background','url(img/1182981.png) center no-repeat');
}else if (continous == 1) {
continous = localStorage.continous = 0;
repeat = localStorage.repeat = 1;
shuffle = localStorage.shuffle = 0;
$(this).html('1');
$(this).css({
'line-height':'30px',
'text-align':'center',
'font-size':14
})
}else if (repeat==1){
repeat = localStorage.repeat = 0;
shuffle = localStorage.shuffle = 1;
continous = localStorage.continous = 0;
$(this).html('');
$(this).css('background','url(img/1182983.png) center no-repeat');
}
});
//顯示歌單
$('.list').click(function(){
$('.hide').animate({
bottom:0
},300);
});
//隱藏歌單
$('.hidelist').click(function(){
$('.hide').animate({
bottom:"-320px"
},300);
});
}
})(jQuery)編寫music.js引用代碼：
$(document).ready(function(){
$(document).musicPlay();
})至此即完成一個簡單的音樂播放器。
完整插件下載地址：音樂播放器。