最近在研究js，导致博客已经好久没更新文章了，这不这几天到网上到处翻箱倒柜的去学习，终于折腾了一个功能不全，bug蛮多的音乐播放器，对于这几天的学习，觉得自己要学习的还蛮多，看到那一个个函数的使用，一条条的代码，内心是崩溃的，哎。。。不说了，上图
index.html
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <meta name="keywords" content=""> <meta name="description" content=""> <link href="css/style.css" type="text/css" rel="stylesheet"> </head> <style type="text/css"> </style> <body> <div class="zmusic"> <div class="mbar"> <div class="pre"><a href="javascript:;" title="上一首" class="bg z_pre">上一首</a></div> <div class="start"><a href="javascript:;" title="暂停/播放" class="bg paused ">暂停/播放</a></div> <div class="next"><a href="javascript:;" title="下一首" class="bg z_next">下一首</a></div> <div class="head"> <!-- <img src=""> --> </div> <div class="player"> <div class="title" title="音乐标题"><a href="" id="music_name"></a> <a href="" id="music_auth"></a></div> <div class="playbar" title="播放条" > <div class="bar progress" ></div> <span class="btn cur"><i></i></span> </div> <div class="time" title="播放时间"><span id="t1">00:00</span> / <span id="t2">00:00</span></div> </div> <div class="playbutton"> <div class="voice" title="声音"><a href="javascript:;" class="voice_btn">声音</a></div> <div class="order"><a href="javascript:;" title="顺序播放" class="btn">播放排序</a></div> <div class="list"><a href="javascript:;" title="列表" id="music_num">0</a></div> </div> <div class="voice_barbg"> <div class="currj_h"></div> <div class="bar currj"></div> <span class="btn btnj"></span> </div> <div class="playlist_Lyrics" title="列表"> <div class="list-box"></div> <ul id="ul_list"></ul> <div class="lrc"><ul id="lrc"></ul></div> </div> </div> </div> </div> <div id="d"></div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript" src="js/lrc.js"></script> <script type="text/javascript" src="js/playlist.js"></script> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/music.js"></script> </body> </html>
style.css
* {
margin: 0;
padding: 0;
}
.body{
position: relative;
color:white;
font: 14px "Microsoft YaHei",Helvetica,Arial,Lucida Grande,Tahoma,sans-serif;
line-height: 180%;
overflow-y: scroll;
}
a{
color:white;
text-decoration: none;
}
li{list-style: none;}
.zmusic{
background: url(../images/playbar.png) no-repeat 0 9999px;
}
.zmusic{
position: fixed;
bottom: 0;
zoom: 1;
width: 100%;
height: 53px;
margin-right: 67px;
background-position: 0 0;
background-repeat: repeat-x;
}
.mbar{
position: absolute;
left: 50%;
right: 50%;
margin-left: -490px;
top: 6px;
z-index: 15;
width: 980px;
height: 41px;
padding: 6px 0 0 0;
}
.mbar .pre, .mbar .start, .mbar .next{
float: left;
height: 36px;
margin:auto 10px;
}
.mbar .pre a,.mbar .next a,.playbutton .voice a,.playbutton .order a,.playbutton
.list a{
height: 25px;
width: 25px;
margin:5.5px 0px;
line-height: 100px;
display: block;
overflow: hidden;
}
.mbar .pre a{
background: url(../images/playbar.png) -2px -132px;
}
.mbar .pre a:hover{
background-position: -32px -132px;
}
.mbar .start a{
height: 35px;
width: 35px;
line-height: 100px;
display: block;
overflow: hidden;
background: url(../images/playbar.png) 0px -204px;
}
.mbar .start a:hover{
background-position: -40px -204px;
}
.mbar .start .z_pause{
background-position: 0px -165px;
}
.mbar .start .z_pause:hover{
background-position: -40px -165px;
}
.mbar .next a{
background: url(../images/playbar.png) -82px -132px;
}
.mbar .next a:hover{background-position: 40px -132px;
}
.mbar .head{
width: 35px;
height: 35px;
float: left;
margin: 0px 0 0px 20px;
overflow: hidden;
background: url(../images/playbar.png) 0px -80px;
}
.mbar .head img{
width:35px;
height:35px;
}
.player{
float: left;
position: relative;
}
.player .title{
margin-left: 15px;
line-height: 14px;
}
.player .title a{
padding: 0px;
font-size: .8rem;
}
.player .playbar,.player .playbar .progress{
background: url(../images/statbar.png) 0px 0px no-repeat;
}
.player .playbar{
float: left;
height: 9px;
width: 495px;
margin:10px 0 0px 15px;
position: relative;
z-index: 8;
}
.player .playbar .progress{
width: 0%;
height: 9px;
background-position: left -66px;
}
.player .playbar span,.player .player span i{
background: url(../images/iconall.png) no-repeat;
}
.player .playbar span{
position: absolute;
top: -7px;
left: -7px;
clear: left;
z-index: 9999;
width: 16px;
height: 24px;
display: block;
background-position: -3px -250px;
}
.player .player span i{
visibility: hidden;
position: absolute;
left: 5px;
top: 5px;
width: 12px;
height: 12px;
}
.player .time{
float: left;
color: #a9a9a9;
margin:5px 0 0px 10px;
font-size: .7rem;
}
.playbutton{
position: relative;
margin-left: 20px;
display: inline-block;
}
.playbutton .voice,.playbutton .order,.playbutton .list{
float: left;
}
.playbutton .voice a{
display: inline-block;
background: url(../images/playbar.png) no-repeat;
}
.playbutton .voice a{
background-position: 0px -247px;
}
.playbutton .voice .voice_btn:hover{
background-position: -29px -247px;
}
.playbutton .voice .btn-state-quiet{
background-position: -106px -68px;
}
.playbutton .voice .btn-state-quiet:hover{
background-position: -128px -68px;
}
.playbutton .order a{
width: 20px;
height: 25px;
margin-left: 5px;
display: inline-block;
background: url(../images/playbar.png) -5px -343px;
}
.playbutton .order a:hover{
background-position: -35px -343px;
}
.playbutton .list a{
width: 47px;
color: #a9a9a9;
line-height: 25px;
text-align: right;
padding: 0 13px 0 0;
font-size: .7rem;
background: url(../images/playbar.png) -40px -68px;
}
.playbutton .list a:hover{
background-position: -40px -98px;
}
/*.voice_barbg{
background: url(../images/playbar.png) no-repeat;
}*/
.voice_barbg{
position: relative;
top: -84px;
height: 33px;
width: 150px;
right:-750px;
z-index: 5;
background: #000;
overflow: hidden;
border-radius: 3px;
/*background-position: 0 -503px;*/
}
.currj{
/*background: url(../images/playbar.png) no-repeat;*/
}
.currj_h,
.currj{
height:4px;
clear: both;
width: 0%;
margin:14px 0px;
background: #fff;
overflow: hidden;
position: absolute;
z-index: 3;
}
.currj_h{
position: absolute;
z-index: 2;
background: #777;
width: 100%;
}
.btnj{ background: url(../images/iconall.png) no-repeat;}
.btnj{
position: absolute;
top:6.5px;
left: -3px;
margin-left: 0%;
display: block;
width: 15px;
height: 20px;
background-position: -40px -250px;
_background-position: 0 0;
cursor: pointer;
z-index: 4
}
.playlist_Lyrics{
position: absolute;
top:-605px;
left:50%;
right: 50%;
margin-left:-490px;
width: 980px;
height: 600px;
display: none;
border:1px solid #ddd;
overflow:hidden;
z-index: 4;
}
.playlist_Lyrics .list-box .sheet-item{
height: 177px;
}
.playlist_Lyrics .list-item{
position: relative;
background: #fff;
z-index: 2;
}
.playlist_Lyrics #ul_list, .playlist_Lyrics .list-box{
position: absolute;
top: 0px;
z-index: 1;
padding: 30px 0 0 0;
width: 650px;
height: 570px;
overflow-y:scroll;
}
.playlist_Lyrics li , .playlist_Lyrics .list-item{
width: 630px;
height: 30px;
line-height: 30px;
display: inline-block;
/* border:1px solid #ddd;*/
}
.playlist_Lyrics li #spa{
float: left;
display: inline-block;
}
.playlist_Lyrics li:hover{
background: #ddd
}
.playlist_Lyrics li .col,.playlist_Lyrics .list-item span,.playlist_Lyrics li span{
float: left;
height: 35px;
}
.playlist_Lyrics li .col-1,.playlist_Lyrics li .col-2,.playlist_Lyrics li .col-3{
display: inline-block;
width: 36%;
text-align: center;
word-spacing: 2;
font-size: 14px;
text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
}
.playlist_Lyrics .list-item span{width: 30%;text-align: center;}
.playlist_Lyrics li #spa,.playlist_Lyrics .list-item span:nth-child(1){
display: block;
width: auto;
margin-left: 10px;
}
.playlist_Lyrics li .col-3{
width: 20%;
}
.playlist_Lyrics .lrc{
position: absolute;
width: 330px;
right: 0px;
top: 10px;
bottom: 10px;
overflow: hidden;
text-align: center;
line-height: 28px;
padding: 20px 0;
}
.playlist_Lyrics .lrc #lrc{
position: absolute;
width: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.playlist_Lyrics .lrc #lrc li{
width: 300px
}
.playlist_Lyrics .lrc #lrc li.lplaying{
color:red;
}ajax.js
// 完善获取音乐信息
// 音乐所在列表ID、音乐对应ID、回调函数
function ajaxUrl(music, callback)
{
// 已经有数据，直接回调
if(music.mp3Url !== null && music.mp3Url !== "err") {
callback(music);
return true;
}
// id为空，赋值链接错误。直接回调
if(music.musicId === null) {
playlist[listID].mp3Url = "err";
callback(music);
return true;
}
$.ajax({
type: zPlay.method,
url: zPlay.url,
data: "types=musicInfo&id=" + music.musicId,
dataType : "jsonp",
success: function(jsonData){
var mp3Url, picUrl;
mp3Url = jsonData.url; // 获取音乐链接
// 调试信息输出
if(zPlay.debug) {
console.log("歌曲信息获取成功");
}
if(!mp3Url) mp3Url = "err";
if(!picUrl) picUrl = null;
music.mp3Url = mp3Url; // 记录结果
callback(music); // 回调函数
return true;
}, //success
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('歌曲信息获取失败 - ' + XMLHttpRequest.status);
} // error
}); //ajax
}
// 参数：歌单网易云 id, 歌单存储 id，回调函数
// alert(zPlay.url);
function ajaxPlayList(lid, id, callback){
if(!lid) return false;
// 已经在加载了，跳过
if(playlist[id].isloading === true) {
// layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); //0代表加载的风格，支持0-2
return true;
}
playlist[id].isloading = true; // 更新状态：列表加载中
$.ajax({
type: zPlay.method,
url: zPlay.url,
data: "types=playlist&id=" + lid,
dataType : "jsonp",
complete: function(XMLHttpRequest, textStatus) {
playlist[id].isloading = false; // 列表已经加载完了
}, // complete
success: function(jsonData){
// 存储歌单信息
var tempList = {
id: lid, // 列表的网易云 id
name: jsonData.playlist.name, // 列表名字
cover: jsonData.playlist.coverImgUrl, // 列表封面
creatorName: jsonData.playlist.creator.nickname, // 列表创建者名字
creatorAvatar: jsonData.playlist.creator.avatarUrl, // 列表创建者头像
item: []
};
if(jsonData.playlist.coverImgUrl !== '') {
tempList.cover = jsonData.playlist.coverImgUrl;
} else {
tempList.cover = playlist[id].cover;
}
if(typeof jsonData.playlist.tracks !== undefined || jsonData.playlist.tracks.length !== 0) {
// 存储歌单中的音乐信息
for (var i = 0; i < jsonData.playlist.tracks.length; i++) {
tempList.item[i] = {
musicName: jsonData.playlist.tracks[i].name, // 音乐名字
artistsName: jsonData.playlist.tracks[i].ar[0].name, // 艺术家名字
albumName: jsonData.playlist.tracks[i].al.name, // 专辑名字
albumPic: jsonData.playlist.tracks[i].al.picUrl, // 专辑图片
musicId: jsonData.playlist.tracks[i].id, // 网易云音乐ID
mp3Url: null//urlHandle(jsonData.playlist.tracks[i].mp3Url) // mp3链接
};
}
}
// 存储列表信息
playlist[id] = tempList;
// 首页显示默认列表
if(id == zPlay.defaultlist) musicList(id);
if(callback) callback(id); // 调用回调函数
// 改变前端列表
$(".sheet-item[data-no='" + id + "'] .sheet-cover").attr('src', tempList.cover); // 专辑封面
$(".sheet-item[data-no='" + id + "'] .sheet-name").html(tempList.name); // 专辑名字
// 调试信息输出
if(zPlay.debug) {
console.log("歌单 [" +tempList.name+ "] 中的音乐获取成功");
}
}, //success
error: function(XMLHttpRequest, textStatus, errorThrown) {
// layer.msg('歌单读取失败 - ' + XMLHttpRequest.status);
$(".sheet-item[data-no='" + id + "'] .sheet-name").html('<span style="color: #EA8383">读取失败</span>'); // 专辑名字
} // error
});//ajax
}
// ajax加载歌词
// 参数：音乐ID，回调函数
function ajaxLyric(mid, callback) {
lyricTip('歌词加载中...');
if(!mid) callback(''); // 没有音乐ID，直接返回
$.ajax({
type: zPlay.method,
url: zPlay.url,
data: "types=lyric&id=" + mid,
dataType : "jsonp",
success: function(jsonData){
if(jsonData.code == -1) {
console.log("歌曲ID为空");
return false;
}
var lyric;
if ((jsonData.nolyric === true)||(typeof jsonData.lrc === undefined) || (typeof jsonData.lrc == "undefined")||(typeof jsonData.lrc.lyric === undefined) || (typeof jsonData.lrc.lyric == "undefined")) //没有歌词
{
lyric = '';
} else {
lyric = jsonData.lrc.lyric;
}
// 调试信息输出
if(zPlay.debug) {
console.log("歌词获取成功");
}
callback(lyric); // 回调函数
}, //success
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('歌词读取失败 - ' + XMLHttpRequest.status);
callback(''); // 回调函数
} // error
});//ajax
}lrc.js
var lyricArea = $("#lrc"); // 歌词显示容器
// var str = playlist[zPlay.currentIndex].lrc;
// 在歌词区显示提示语（如歌词加载中、无歌词等）
function lyricTip(str) {
lyricArea.html("<li class='lyric-tip'>"+str+"</li>"); // 显示内容
}
// 歌曲加载完后的回调函数
// 参数：歌词源文件
function lyricCallback(str) {
zbp.lyric = parseLyric(str); // 解析获取到的歌词
if(zbp.lyric === '') {
lyricTip('没有歌词');
return false;
}
lyricArea.html(''); // 清空歌词区域的内容
lyricArea.scrollTop(0); // 滚动到顶部
zbp.lastLyric = -1;
// 显示全部歌词
var i = 0;
for(var k in zbp.lyric){
var txt = zbp.lyric[k];
if(!txt) txt = " ";
var li = $("<li data-no='"+i+"' class='lrc-item'>"+txt+"</li>");
lyricArea.append(li);
i++;
}
}
// 强制刷新当前时间点的歌词
// 参数：当前播放时间（单位：秒）
function refreshLyric(time) {
if(zbp.lyric === '') return false;
time = parseInt(time); // 时间取整
var i = 0;
for(var k in zbp.lyric){
if(k >= time) break;
i = k; // 记录上一句的
}
scrollLyric(i);
}
// 滚动歌词到指定句
// 参数：当前播放时间（单位：秒）
function scrollLyric(time) {
if(zbp.lyric === '') return false;
time = parseInt(time); // 时间取整
if(zbp.lyric === undefined || zbp.lyric[time] === undefined) return false; // 当前时间点没有歌词
if(zbp.lastLyric == time) return true; // 歌词没发生改变
var i = 0; // 获取当前歌词是在第几行
for(var k in zbp.lyric){
if(k == time) break;
i ++;
}
zbp.lastLyric = time; // 记录方便下次使用
$(".lplaying").removeClass("lplaying"); // 移除其余句子的正在播放样式
$(".lrc-item[data-no='" + i + "']").addClass("lplaying"); // 加上正在播放样式
var scroll = (lyricArea.children().height() * i) - ($("#lrc").height() / 2);
lyricArea.stop().animate({scrollTop: scroll}, 1000); // 平滑滚动到当前歌词位置(更改这个数值可以改变歌词滚动速度，单位：毫秒)
}
// 解析歌词
// 这一函数来自 https://github.com/TivonJJ/html5-music-player
// 参数：原始歌词文件
function parseLyric(lrc) {
if(lrc === '') return '';
var lyrics = lrc.split("\n");
var lrcObj = {};
for(var i=0;i<lyrics.length;i++){
var lyric = decodeURIComponent(lyrics[i]);
var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
var timeRegExpArr = lyric.match(timeReg);
if(!timeRegExpArr)continue;
var clause = lyric.replace(timeReg,'');
for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
var t = timeRegExpArr[k];
var min = Number(String(t.match(/\[\d*/i)).slice(1)),
sec = Number(String(t.match(/\:\d*/i)).slice(1));
var time = min * 60 + sec;
lrcObj[time] = clause;
}
}
return lrcObj;
}
// 歌词
// function lyric(){
// var lyric_txt , lyric_arr ,lrchtml='' ,lyric_time;
// lyric_txt=playlist[zPlay.currentIndex].lrc;
// lyric_arr=lyric_txt.split('[');//分隔时间与歌词
// // alert(lyric_arr);
// for(var i=0; i<lyric_arr.length;i++){
// lyric_time=lyric_arr[i].split(']');//分隔时间与歌词
// var lrctime=lyric_time[0];
// var lyrc=lyric_time[1];
// //获取时间，毫秒
// var s=lrctime.split('.');
// var ms=s[1];//毫秒
// var f=s[0].split(":");//分钟加秒分隔出来
// var _ms=f[0]*60+f[1]*1;//秒
// lrchtml +='<p id="'+_ms+'">'+lyrc+'</p>';
// }
// if(lrchtml){
// $('.lrc').append(lrchtml);
// }
// }playlist.js
var playlist = [
{
name: "自定义列表", // 播放列表名字
cover: "http://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 播放列表封面
creatorName: "", // 列表创建者名字
creatorAvatar: "http://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 列表创建者头像
item: [
{
musicName: "成都", // 音乐名字
artistsName: "赵雷", // 歌手名字
albumName: "成都", // 歌曲专辑
albumPic: "http://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 歌曲封面
musicId: 436514312, // 歌曲的网易云音乐ID(歌曲的歌词会根据这个 ID 来获取，请务必填写正确。id值不需要加引号)
mp3Url: "http://p2.music.126.net/7o5D4dA6271VktgawcbZFA==/18665309393829604.mp3" // 歌曲链接(这里不加逗号)
}
]
},
{
id: 3778678 // 云音乐热歌榜
},
{
id: 3779629 // 云音乐新歌榜
},
{
id: 4395559 // 华语金曲榜
},
{
id: 64016 // 中国TOP排行榜（内地榜）
},
{
id: 112504 // 中国TOP排行榜（港台榜）
},
{
id: 19723756 // 云音乐飙升榜
},
{
id: 2884035 // "网易原创歌曲榜"
},
{
id: 969862275
},
{
id: 964072485
},
{
id: 319777286
},
{
id: 911642235
},
{
id: 907602836
},
{
id: 934882307
},
{
id: 699506934
},
{
id: 699194774
},
{
id: 753015636
}
];script.js
/**
*播放器配置
*
*/
var zPlay={
url:'api.php',
method:"POST",
autoplay: false, // 是否自动播放(true/false) *在手机端可能无法自动播放
volume: 0.6, //初始音量0~1
debug:false, //是否开启调试模式true/false
currentIndex:0, //设置歌曲数组索引，默认为0
}
var zbp=[];
// 音频错误处理
function audioErr() {
// if(zbp.mList.mp3Url=== undefined) return true;
// alert(zbp.mList.mp3Url)
console.log('当前歌曲播放失败，自动播放下一首');
next();
}
// 播放列表歌曲
function musicPlayList(i) {
if(zPlay.debug){
console.log("点播了列表中的第 " + (i+1) + " 首歌 "+ playlist[zbp.mList].item[i].musicName);
}
$(".listnow").removeClass("listnow");
$("#spa[data-no='" + i + "']").parent().addClass("listnow");
zPlay.currentIndex = i;
if(playlist[zbp.mList].item[i].mp3Url === null) {
ajaxUrl(playlist[zbp.mList].item[i], play);
} else {
play(playlist[zbp.mList].item[i]);
}
$('#music_name').html(playlist[zbp.mList]);
}
function play(currentIndex) {
// 调试信息输出
if(zPlay.debug) {
console.log('开始播放 - ' + currentIndex.musicName + '\n' +
'musicName: "' + currentIndex.musicName + '",\n' +
'artistsName: "' + currentIndex.artistsName + '",\n' +
'albumName: "' + currentIndex.albumName + '",\n' +
'albumPic: "' + currentIndex.albumPic + '",\n' +
'musicId: ' + currentIndex.musicId + ',\n' +
'mp3Url: "' + currentIndex.mp3Url + '"');
}
if(currentIndex.mp3Url =="err") {
audioErr(); // 调用错误处理函数
return false;
}
ajaxLyric(currentIndex.musicId, lyricCallback); // ajax加载歌词
$('audio').remove(); //移除各种点击带来的重复加载播放器
var newaudio = $('<audio><source src="'+currentIndex.mp3Url+'"></audio>').appendTo('body');
zbp.audio = newaudio[0];
// 应用初始音量
zbp.audio.volume = zPlay.volume;
// 监听歌曲进度变化事件
zbp.audio.addEventListener('timeupdate', updateProgress);
zbp.audio.addEventListener('play', musicPlay); // 开始播放
zbp.audio.addEventListener('pause', musicPause); // 暂停
zbp.audio.addEventListener('ended', next); // 播放结束
zbp.audio.addEventListener('error', audioErr); // 播放器错误处理
zbp.audio.addEventListener("loadstart",function(){
$('#music_name').text(currentIndex.musicName);
$('#music_auth').text(currentIndex.artistsName);
if(currentIndex.albumPic==undefined){
$('.head').html('<img src="images/playzm.png"/>');
}else{
$('.head').html('<img src='+currentIndex.albumPic+'>');
}
});
zbp.audio.play();
// 设置 5s 后为歌曲超时，自动切换下一首
window.setTimeout("delayCheck()", 5000);
music_bar.lock(false); // 取消进度条锁定
}
// 歌曲播放超时检测
function delayCheck() {
if(isNaN(zbp.audio.duration) || zbp.audio.duration === undefined || zbp.audio.duration ===0) {
audioErr();
} else {
// 调试信息输出
if(zPlay.debug) {
console.log('超时检测 - 播放正常');
}
}
}
// 播放
function musicPlay() {
zbp.audio.paused = false; // 更新状态（未暂停）
$(".paused").addClass("z_pause");
music_bar.lock(false);
//时间
setInterval(function () {
var currentTime = zbp.audio.currentTime;
setTimeShow(currentTime);
});
// 设置播放时间计时
function setTimeShow(t) {
t = Math.floor(t);
var playTime = alltime(zbp.audio.currentTime);
$("#t1").html(playTime);
$('#t2').text(alltime(zbp.audio.duration));
music_bar.volgoto(zbp.audio.currentTime / zbp.audio.duration);
}
}
// 暂停
function musicPause() {
zbp.audio.paused = true; // 更新状态（已暂停）
$(".paused").removeClass("z_pause"); // 移除其它的正在播放
}
//上一曲
function pre(){
musicPlayList(zPlay.currentIndex -1);
}
//下一曲
function next(){
musicPlayList(zPlay.currentIndex +1);
}
//获取当前播放时间
function updateProgress(){
var time,s;
time=zbp.audio.currentTime;
s=parseInt(time);
document.title='粗仿网易云音乐';
music_bar.volgoto(zbp.audio.currentTime / zbp.audio.duration);
// 同步歌词显示
scrollLyric(zbp.audio.currentTime);
if(s==parseInt(zbp.audio.duration)){ //歌曲时间播放完移除播放状态按钮
$('.paused').removeClass('z_pause');
// next();
}
}
//感谢孟坤大大的js
// 音乐进度条拖动回调函数
function mBcallback(newVal) {
var newTime = zbp.audio.duration * newVal;
// 应用新的进度
zbp.audio.currentTime = newTime;
refreshLyric(newTime); // 强制滚动歌词到当前进度
}
// 音量条变动回调函数
// 参数：新的值
function vBcallback(newVal) {
if(zbp.audio !== undefined) { // 音频对象已加载则立即改变音量
zbp.audio.volume = newVal;
}
if(newVal === 0){ $(".voice_btn").addClass("btn-state-quiet");}
else{$(".voice_btn").removeClass("btn-state-quiet");}
}
//音量控制
var musicVolume = function(){
music_bar = new sto(".playbar", 0, mBcallback);
music_bar.lock(true);
// 初始化音量设定
var vol = zPlay.volume;
if(vol < 0) vol = 0; // 范围限定
if(vol > 1) vol = 1;
if(vol == 0) $(".btn-quiet").addClass("btn-state-quiet"); // 添加静音样式
volume_bar = new sto(".voice_barbg", vol, vBcallback);
};
//存储变量
//进度条id 初始量 回调
sto = function(zm , percent , callback){
this.zm=zm;
this.percent=percent;
this.callback=callback;
this.locked=false;
this.init();
};
sto.prototype = {
init : function(){
var zp = this, mdown = false;
//获取偏移量
zp.cStart = $(zp.zm).offset().left;
zp.maxLength = $(zp.zm).width() + zp.cStart;
// 窗口大小改变偏移量重置
$(window).resize(function(){
zp.cStart = $(zp.zm).offset().left;
zp.maxLength = $(zp.zm).width() + zp.cStart;
});
// 监听小点的鼠标按下事件
$(zp.zm +" .btn").mousedown(function(e){
e.preventDefault(); // 取消原有事件的默认动作
});
// 监听进度条整体的鼠标按下事件
$(zp.zm).mousedown(function(e){
if(!zp.locked) mdown = true;
zmMove(e);
});
// 监听鼠标移动事件，用于拖动
$("html").mousemove(function(e){
zmMove(e);
});
// 监听鼠标弹起事件，用于释放拖动
$("html").mouseup(function(e){
mdown = false;
});
function zmMove(e) {
if(!mdown) return;
var percent = 0;
if(e.clientX < zp.cStart){
percent = 0;
}else if(e.clientX > zp.maxLength){
percent = 1;
}else{
percent = (e.clientX - zp.cStart) / (zp.maxLength - zp.cStart);
}
zp.callback(percent);
zp.volgoto(percent);
return true;
}
zp.volgoto(zp.percent);
return true;
},
volgoto : function(percent) {
if(percent > 1) percent = 1;
if(percent < 0) percent = 0;
this.percent = percent;
$(this.zm + " .btn").css("margin-left", (percent*100) +"%");
$(this.zm + " .bar").css("width", (percent*100)+"%");
return true;
},
// 锁定进度条
lock : function(islock) {
if(islock) {
this.locked = true;
} else {
this.locked = false;
}
return true;
}
}
//格式化歌曲时间
function alltime(time){
var hour , other, minute, second;
hour = Math.floor (time/ 3600);
other = time % 3600;
minute = Math.floor (other / 60);
second = parseInt(other % 60);
if(hour<10) hour='0' + hour;
if(minute<10) minute='0' + minute;
if(second<10) second='0' + second;
if(hour > 0) {
return hour + ":" + minute + ":" + second;
} else {
return minute + ":" + second;
}
}
musicVolume();
document.title='粗仿网易云音乐_阳光梦想';music.js
//播放器基本效果
if(zPlay.debug) {
console.log('播放器调试模式已开启，正常使用时请在 js/script.js 中按说明关闭调试模式');
}
var num=0 ,mainList=$('.playlist_Lyrics'),mainListul=$('.playlist_Lyrics .list-box'),sheetList=$('.list-box');
$('.paused').click(function(){//点击按钮播放与停止
if(zbp.audio.paused){
$(this).addClass('z_pause');
zbp.audio.play();
}else{
$(this).removeClass('z_pause');
zbp.audio.pause();
}
})
//歌曲列表显示与隐藏
mainList.show();
$('.voice_barbg').hide();
$('#music_num').click(function(){
mainList.toggle();
})
$('.voice a').click(function(){
$('.voice_barbg').toggle();
})
//上一首
$('.z_pre').click(function(){
pre();
zbp.audio.play();
})
//下一首
$('.z_next').click(function(){
next();
zbp.audio.play();
})
// $('.btn').toggle(function(){
// // 顺序播放
// $(this).attr('title','单曲循环');
// console.log("zPlay.currentIndex :", zPlay.currentIndex);
// zbp.audio.onended = function() {
// $('.z_next').click();
// };
// $(this).addClass('btn-loop');
// },function(){
// // 单曲循环
// console.log("zPlay.currentIndex :", zPlay.currentIndex);
// zbp.audio.onended = function() {
// zbp.audio.load();
// zbp.audio.play();
// };
// $(this).removeClass('btn-loop').addClass('btn-order');
// $('.btn').attr('title','顺序播放');
// mun=0;
// },function(){
// // 随机播放
// zbp.audio.onended = function() {
// var i = parseInt((playlist.length - 1) * Math.random());
// alert(i);
// musicPlayList(i);
// };
// $(this).addClass('btn-order').removeClass('btn-random');
// $('.btn').attr('title','顺序循环');
// })
//列表单击播放
$(".playlist_Lyrics").on("click","#m", function() {
var num = parseInt($(this).find('span').data("no"));
if(isNaN(num)) return false;
musicPlayList(num);
});
// 点击专辑显示专辑歌曲
$(".playlist_Lyrics").on("click",".sheet-cover,.sheet-name", function() {
var num = parseInt($(this).parent().data("no"));
// 是用户列表，但是还没有加载数据
if(playlist[num].id) {
// ajax加载数据
ajaxPlayList(playlist[num].id, num, musicList);
$("#ul_list").fadeIn();
$('.list-box').fadeOut();
return true;
}
$("#ul_list").fadeIn();
$('.list-box').fadeOut();
musicList(num);
});
//获取歌曲列表
function musicList(listid){//列表id
zbp.mList = listid; // 记录当前显示的列表
// 调试信息输出
if(zPlay.debug) {
if(playlist[listid].id) {
console.log('加载播放列表 ' + listid + ' - ' + playlist[listid].name + '\n' +
'id: ' + playlist[listid].id + ',\n' +
'name: "' + playlist[listid].name + '",\n' +
'cover: "' + playlist[listid].cover + '",\n' +
'item: []');
} else {
console.log('加载播放列表 ' + listid + ' - ' + playlist[listid].name);
}
}
$('.playlist_Lyrics #ul_list').html(''); // 清空列表中原有的元素
for(var i=0;i<=playlist[listid].item.length;i++){//遍历歌曲进歌曲列表
if(zPlay.debug){
console.log(playlist[i]);
}
var musicName,artistsName;
var list='<li id="m">'+
'<span id="spa" data-no='+i+'>'+(i+1)+'</span>'+
'<div class="col col-1">'+playlist[listid].item[i].musicName+'</div>'+
'<div class="col col-2">'+playlist[listid].item[i].artistsName+'</div>'+
'<div class="col col-3">'+playlist[listid].item[i].albumName+'</div>'+
'</li>';
$('#music_num').html(playlist[listid].item.length);//统计列表歌曲数量
$('.playlist_Lyrics #ul_list').append(list);
}
}
//向页面加入歌曲、演唱者、时长信息
function addListhead() {
var html = '<div class="list-item list-head">' +
' <span class="mbtn music-name" data-action="plist">' +
' 网络列表' +
' </span>' +
' <span class="mbtn auth-name" data-action="zlist">' +
' 自定义列表' +
' </span>' +
' <span class="mbtn music-time" data-action="wlist">' +
' 无定义' +
' </span>' +
'</div>';
mainListul.before(html);
}
addListhead();
// 顶部按钮点击处理
$("#ul_list").fadeOut();
$(".mbtn").click(function(){
switch($(this).data("action")) {
case "plist": // 播放器
$("#ul_list").fadeOut();
$(".list-box").fadeIn();
break;
case "zlist": // 正在播放
$("#ul_list").fadeIn();
$(".list-box").fadeOut();
break;
case "wlist": // 播放列表
// dataBox("wlist")
break;
}
});
function musicsheet(){
for(var i=0;i<playlist.length;i++){//遍历列表
ajaxPlayList(playlist[i].id, i, listsheet);
}
listsheet(0, playlist[0].name, playlist[0].cover)
}
musicsheet();
// 添加一个歌单
// 参数：编号、歌单名字、歌单封面
function listsheet(no, name, cover) {
if(!cover) cover = "images/player_cover.png";
if(!name) name = "读取中...";
cover += "?param=80x80"; // 限制封面图像大小
var html = '<div class="sheet-item" data-no="' + no + '" style="float:left;margin:0 4px;width:110px;">' +
' <img class="sheet-cover" src="' +cover+ '" width="100%" height="auto">' +
' <p class="sheet-name">' +name+ '</p>' +
'</div>';
sheetList.append(html);
}以上就是这几天的成果，心有点累，话说余生还长，请多指教！！！
微信扫码查看本文
发表评论