SOURCE

//播放控制
var myAudio = $("audio")[0];
var lyricArr = [];
// 播放/暂停控制

$(".btn1").click(function(){
	if (myAudio.paused) {
		play();
	} else {
		pause();
	}
});
// 频道切换
$(".btn2").click(function(){
	getChannel();
});
// 播放下一曲音乐
$(".btn3").click(function(){
	getmusic();
});
function play(){
	myAudio.play();
    $('.btn1').removeClass('m-play').addClass('m-pause');
}
function pause(){
	myAudio.pause();
	$('.btn1').removeClass('m-pause').addClass('m-play');
}
//获取频道信息
function getChannel(){
	$.ajax({
		url: 'http://api.jirengu.com/fm/getChannels.php',
		dataType: 'json',
		Method: 'get',
		success: function(response){
			var channels = response.channels;
			var num = Math.floor(Math.random()*channels.length);
			var channelname = channels[num].name;
			var channelId = channels[num].channel_id;
			$('.record').text(channelname);
			$('.record').attr('title',channelname);
			$('.record').attr('data-id',channelId);
			getmusic();
		}
	})
}
// 通过ajax获取歌曲
function getmusic(){
	$.ajax({
		url: 'http://api.jirengu.com/fm/getSong.php',
		dataType: 'json',
		Method: 'get',
		data:{
		      'channel': $('.record').attr('data-id')
		    },
		success: function (ret) {
		   var resource = ret.song[0],
		       url = resource.url,
		       bgPic = resource.picture,
		       sid = resource.sid,//
		       ssid = resource.ssid,//
		       title = resource.title,
		       author = resource.artist;
	       $('audio').attr('src',url);
	       $('audio').attr('sid',sid);
	       $('audio').attr('ssid',ssid);
	       $('.musicname').text(title);
	       $('.musicname').attr('title',title)
	       $('.musicer').text(author);
	       $('.musicer').attr('title',author)
	       $(".background").css({
	       		'background':'url('+bgPic+')',
	       		'background-repeat': 'no-repeat',
				'background-position': 'center',
				'background-size': 'cover',
	 		});
	       play();//播放
	       getlyric();//获取歌词
		}
	})
};
//获取歌词
function getlyric(){
	var Sid = $('audio').attr('sid');
	var Ssid = $('audio').attr('ssid');
	$.post('http://api.jirengu.com/fm/getLyric.php', {ssid: Ssid, sid: Sid})
        .done(function (lyr){
        	console.log(lyr);
        	var lyr = JSON.parse(lyr);;
        	console.log(lyr);
        	if (!!lyr.lyric) {
	        	$('.music-lyric .lyric').empty();//清空歌词信息
	        	var line = lyr.lyric.split('\n');//歌词为以排数为界的数组
                var timeReg = /\[\d{2}:\d{2}.\d{2}\]/g;//时间的正则
                var result = [];
                if(line != ""){
                    for(var i in line){//遍历歌词数组
                        var time = line[i].match(timeReg);//每组匹配时间 得到时间数组
                        if(!time)continue;//如果没有 就跳过继续
                        var value = line[i].replace(timeReg,"");// 纯歌词
                        for(j in time){//遍历时间数组
                            var t = time[j].slice(1, -1).split(':');//分析时间  时间的格式是[00:00.00] 分钟和毫秒是t[0],t[1]
                            //把结果做成数组 result[0]是当前时间，result[1]是纯歌词
                            var timeArr = parseInt(t[0], 10) * 60 + parseFloat(t[1]); //计算出一个curTime s为单位
                            result.push([timeArr, value]);
                        }
                    }
                }
	            //时间排序
	            result.sort(function (a, b) {
	                return a[0] - b[0];
	            });
	            lyricArr = result;//存到lyricArr里面
	            renderLyric();//渲染歌词
        	}
        }).fail(function(){
        	$('.music-lyric .lyric').html("<li>本歌曲展示没有歌词</li>");
        })
}
function renderLyric(){
	var lyrLi = "";
    for (var i = 0; i < lyricArr.length; i++) {
        lyrLi += "<li data-time='"+lyricArr[i][0]+"'>"+lyricArr[i][1]+"</li>";
    }
    $('.music-lyric .lyric').append(lyrLi);
    setInterval(showLyric,100);//怎么展示歌词
}
function showLyric(){
    var liH = $(".lyric li").eq(5).outerHeight()-3; //每行高度
    for(var i=0;i< lyricArr.length;i++){//遍历歌词下所有的li
        var curT = $(".lyric li").eq(i).attr("data-time");//获取当前li存入的当前一排歌词时间
        var nexT = $(".lyric li").eq(i+1).attr("data-time");
        var curTime = myAudio.currentTime;
        if ((curTime > curT) && (curT < nexT)){//当前时间在下一句时间和歌曲当前时间之间的时候 就渲染 并滚动
            $(".lyric li").removeClass("active");
            $(".lyric li").eq(i).addClass("active");
            $('.music-lyric .lyric').css('top', -liH*(i-2));
        }
    }

}
//进度条控制
setInterval(present,500)	//每0.5秒计算进度条长度
$(".basebar").mousedown(function(ev){  //拖拽进度条控制进度
	var posX = ev.clientX;
	var targetLeft = $(this).offset().left;
	var percentage = (posX - targetLeft)/400*100;
	myAudio.currentTime = myAudio.duration * percentage/100;
});
function present(){
	var length = myAudio.currentTime/myAudio.duration*100;
	$('.progressbar').width(length+'%');//设置进度条长度
	//自动下一曲
	if(myAudio.currentTime == myAudio.duration){
		getmusic()
	}
}
//icon
$('.m-star').on('click',function(){
	$(this).toggleClass('stared')
})
$('.m-heart').on('click',function(){
	$(this).toggleClass('loved')
})
$('.m-xunhuan').on('click',function(){
	$(this).toggleClass('recycleed').toggleClass('colored')
	if ($(this).hasClass('recycleed')) {
		$('audio').attr('loop','loop');
	}
	if($(this).hasClass('colored')){
		$('audio').removeAttr('loop','no-loop');
	}
})
$('.m-lyric').on('click',function(){
	$(this).toggleClass('lyriced');
	if ($(this).hasClass('lyriced')) {
		$('.background .music-lyric').css({'display':'block'})
	}else{
		$('.background .music-lyric').css({'display':'none'})
	}
})
$(document).ready(getChannel());

<div class="wrapper">
		<!-- 背景图片 -->
		<div class="background">
			<div class="music-lyric">
				<div class="lyric-view">
					<ul class="lyric"></ul>
				</div>
			</div>
		</div>
		<div class="content">
			<!-- 播放源及音乐信息 -->
			<audio src=""></audio>
			<div class="music-massage">
				<p class="musicname"></p>
				<p class="musicer"></p>
				<p class="record"></p>
			</div>
			<!-- 分享，收藏，喜欢按钮 -->
			<div class="music-icon">
				<a class="m-icon m-fenxiang colored" href="http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538" target="new"><img src="images/share.png"></a>
				<span class="m-icon m-star colored"><img src="images/收藏.png"></span>
				<span class="m-icon m-loved colored"><img src="images/喜欢.png"></span>
			</div>
		</div>
		<!-- 进度条 -->
		<span class="basebar">
			<span class="progressbar"></span>
		</span>
		<!-- 音乐播放控制 -->
		<div class="controls">
			<!-- 音乐播放，换频道，下一曲按钮 -->
			<div class="play-control">
				<span class="m-icon m-play btn1" title="播放/暂停"></span>
				<span class="m-icon m-change btn2" title="换频道"></span>
				<span class="m-icon m-next btn3" title="换曲"></span>
			</div>
			<!-- 循环播放，随机播放按钮 -->
			<div class="music-control">
				<span class="m-icon m-xunhuan colored"></span>
				<span class="m-icon m-lyric colored"></span>
			</div>
		</div>
	</div>

* {
	margin: 0;
	padding: 0;
}
html,body {
	background-color: #d2d5d6;
	height: 100%;
	font-family: 微软雅黑，sans-serif;
	-webkit-font-smoothing: antialiased;/*抗锯齿，让字体看起来更光滑*/
}
span {
	cursor: pointer;
}
a {
	text-decoration: none;
}
.wrapper {
	position: relative;
	width: 440px;
	height: 500px;
	background-color: #eef1f2;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 6px 7px #999;
}
.background {
	width: 100%;
	height: 230px;
	padding: 20px 0;
	background-color: rgba(100,100,100,0.5);
}
.background .music-lyric .lyric-view {
	height: 230px;
	overflow: hidden;
	/*background-color: blue;*/
}
.background .music-lyric ul {
	position: relative;
	transition: all 1s;/*这是什么作用*/
}
.lyric li {
	position: relative;
	padding: 5px 0 2px 0;
	text-align: center;
	color: rgba(255,255,255,0.6);
	font-size: 12px;
	transition: all 1s;
}
.lyric li.active {
	font-size: 13px;
	color: #fff;
}
.content {
	height: 100px;
	width: 400px;
	padding: 20px 20px 10px 20px;
	/*background-color: green;*/
}
.music-massage {
	display: inline-block;
	width: 280px;
	height: 100%;
	/*background-color: pink;*/
}
.content .music-massage p{
	cursor: default;
}
.content .musicname {
	font-weight: 700;
	font-size: 26px;
	color: #455569;
	/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
	white-space:nowrap;
	/*显示省略符号来代表被修剪的文本。*/
	text-overflow:ellipsis;
	overflow: hidden;
}
.content .musicer{
	font-weight: bold;
	font-size: 18px;
	color: #455569;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}
.content .record{
	font-size: 14px;
	color: #455569;
	margin-top: 4px;
}
.content .music-icon {
	float: right;
	/*禁止用户选中*/
	-webkit-user-select:none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.content .music-icon a,.content .music-icon span {
	margin-left: 10px;
	font-size: 22px;
}
span.colored,a.colored {
	color: #cdd2d7;
}
span.stared {
	color: #feec98;
}
span.loved {
	color: #fe8698;
}
.content .music-icon span:hover {
	text-shadow: 1px 1px 1px #ccc;
}
.basebar {
	position: relative;
	display: block;
	border: none;
	width: 400px;
	height: 4px;
	margin: 0 auto 10px auto;
	border-radius: 2px;
	background-color: #414141;
}
.basebar .progressbar {
	display: block;
	border: none;
	width: 0%;
	height: 4px;
	border-radius: 2px;
	background-color: #cdd2d7;
}
.controls {
	width: 400px;
	height: 50px;
	padding: 20px 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.controls .play-control,.music-control {
	display: inline-block;
}
.controls .play-control .btn1 {
	display: inline-block;
	width: 38px;
	height: 38px;
	border-radius: 19px;
	background-color: #414141;
	color: #d9d9d9;
	font-size: 20px;
	text-align: center;
	line-height: 38px;
}
.controls .play-control .btn2,.btn3{
	display: inline-block;
	width: 28px;
	height: 28px;
	border-radius: 14px;
	background: #414141;
	color: #d9d9d9;
	font-size: 16px;
	text-align: center;
	line-height: 28px;
}
.controls .music-control{
	float: right;
	line-height: 38px;
}
.controls .music-control span{
	margin-left: 10px;
	font-size: 22px;
}
.controls .music-control span:hover{
	text-shadow: 1px 1px 1px #ccc;
}
.music-control span {
	display: inline-block;
	width: 28px;
	height: 28px;
}
.music-control span.m-xunhuan {
	color: #414141;
	background-image: url(../images/循环.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:25px 25px;
}
.music-control span.recycleed {
	color: #414141;
	background-image: url(../images/循环1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:25px 25px;
}

.music-control span.m-lyric {
	color: #414141;
	background-image: url(../images/桌面歌词.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:25px 25px;
}
.music-control span.lyriced {
	color: #414141;
	background-image: url(../images/桌面歌词1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:25px 25px;
}
.music-control span.recycleed {
	color: #414141;
}
.m-play {
	background-image: url(../images/播放.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:20px 20px;
}
.m-pause {
	background-image: url(../images/暂停.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:20px 20px;
}
.controls .play-control .btn2 {
	background-image: url(../images/下一首.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:15px 15px;
}
.controls .play-control .btn3 {
	background-image: url(../images/下一曲.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:15px 15px;
}
.lyriced {
	background-image: url(../images/循环.png);
}
.m-lyric {
	background-image: url(../images/循环.png);
}