音乐播放器
2016-02-26 17:48
141 查看
因为日常喜欢听音乐，也就很想编写一个音乐播放器玩玩。现在积累的差不多了，今天用html5和jquery实现一个音乐播放器的插件。
先奉上最终实现的效果图：
界面很简单，功能主要包括：
控制当前播放歌曲的进度；
前后切换；
播放模式包括顺序播放、单曲循环、随机播放；
显示隐藏歌单；
1、创建插件文件夹：
2、编写music.html文件：
编写music.css文件：
这里这里为实现歌曲封面自动旋转，用到了css3的动画内容，animations功能支持通过关键帧的指定在页面上产生复杂的动画效果。简单介绍一下animation属性：
animation-name：定义动画的名称，属性初始值是none；
animation-duration：定义了动画的播放时间。初始值为0；
animation-timing-function：定义动画的播放方式，属性初始值是ease；
animation-iteration-count：定义动画的播放次数。属性初始值是1，适用于所有块元素和内联元素。infinite表示无限次。
3、编写jquery.musicPlay.js插件文件：
编写music.js引用代码：
至此即完成一个简单的音乐播放器。
完整插件下载地址：音乐播放器。
先奉上最终实现的效果图：
界面很简单，功能主要包括：
控制当前播放歌曲的进度；
前后切换；
播放模式包括顺序播放、单曲循环、随机播放；
显示隐藏歌单；
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();
})至此即完成一个简单的音乐播放器。
完整插件下载地址：音乐播放器。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- lamp lnmp lnamp区别
- [Linux]./configure 编译调试信息
- Linux中Apache安装、配置、加为服务
- 如何学好图像处理——从小白到大神？
- xml增强学习笔记
- 使用jquey的css()方法改变样式，
- How to make workflow chart using several tools in Linux?
- SQL语句详细汇总
- 年度十佳 DevOps 博客文章（后篇）
- ioS开发知识（三十一）
- 做飞行器的规划及想法
- Yii2 framework学习笔记(八) -- 整合blueimp的jquery-file-upload插件
- Git学习笔记总结和注意事项
- Android Process 详解
- chrome dev 4000 tools
- springmvc讲解
- Android插件化开发 第五篇 [360 Droid Plugin]
- Sublime Text3中配置Java环境
- iOS闭包循环引用精讲
- adt各个版本下载地址