粗仿网易云PC端底部音乐播放器

2018-11-24 22:31:29  阅读 897 次 评论 0 条

最近在研究js,导致博客已经好久没更新文章了,这不这几天到网上到处翻箱倒柜的去学习,终于折腾了一个功能不全,bug蛮多的音乐播放器,对于这几天的学习,觉得自己要学习的还蛮多,看到那一个个函数的使用,一条条的代码,内心是崩溃的,哎。。。不说了,上图


20171027173938_84090.png


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>&nbsp;&nbsp;&nbsp;<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 = "&nbsp;";
        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);
}



以上就是这几天的成果,心有点累,话说余生还长,请多指教!!!



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2011
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?