60% Complete
-00:00

CSS

<link rel="stylesheet" href="http://www.jscss.cc/static/css/music.css">

HTML

<div class="music-wrap clearfix pause" data-index="0">
	<div class="music-title">
		<h3 title="老街-李荣浩"></h3>
		<p title="老街-李荣浩"></p>
	</div>
	<div class="music-song">
	</div>
	<div class="music-lrc">
		<div class="music-lrc-context">
			<!-- <p>歌词</p> -->
		</div>
	</div>
	<div class="music-tool">
		<div class="glyphicon glyphicon-step-backward" data-number="-1"></div>
		<div class="play-pause">
			<div class="glyphicon glyphicon-pause"></div>
			<div class="glyphicon glyphicon-play-circle"></div>
		</div>
		<div class="glyphicon glyphicon-step-forward" data-number="1"></div>
		<div class="progress-box">
			<div class="progress">
				<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
			    	<span class="sr-only">60% Complete</span>
			  	</div>
			</div>
			<div class="audio-time">-00:00</div>
		</div>
	</div>
</div>

JavaScript

查看 requestAnimationFrame 资料

<script>
	//逐帧动画
	//查看 requestAnimationFrame 资料 https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame
	var rAF = window.requestAnimationFrame	||
	window.webkitRequestAnimationFrame	||
	window.mozRequestAnimationFrame		||
	window.oRequestAnimationFrame		||
	window.msRequestAnimationFrame		||
	function (callback) { return window.setTimeout(callback, 1000 / 60); };

	//定义 audio 模块
	define("audio",["jquery"],function($){
		function main(option){
			//替换默认方法
			option = $.extend({
				play : function(){},
				pause : function(){},
				progress : function(){}
			},option || {});
			
			var audio = document.createElement("audio");
			var rAFid;
			//清除更新频率
			function clearrAF(){
				if(window.cancelAnimationFrame){
					window.cancelAnimationFrame(rAFid);
				}else{
					clearTimeout(rAFid);
				}
			}
			//监听音乐播放
			$(audio).on('play',function(){
				option.play.call(audio);
				clearrAF(); 
				function loop(){
					rAFid = rAF(function(){
						option.progress(audio.currentTime,audio.duration);
						loop();
					});	
				}
				loop();
				
			});

			//监听音乐暂停
			$(audio).on('pause',function(){
				clearrAF();
				option.pause.call(audio);
			});

			this.play = function(){
				audio.play();
			};
			this.pause = function(){
				audio.pause();
			};

			this.checkout = function(src){
				this.pause(); //暂停播放
				audio.src = src;  //替换音乐播放资源地址
				audio.currentTime = 0; //设置音乐播放时间为开始状态
				this.play(); //从新播放歌曲
			};
		}
		return main;
	});
	//定义歌词模块
	define("lrc",["jquery"],function($){
		var $lrcbox = $(".music-lrc-context");
		var $lrcwrap = $lrcbox.parent();
		return {
			checkout : function(src){
				$.get(src,{},function(result){
					var html = "";
					result.split("\n").forEach(function(item,i){
						var index = item.lastIndexOf("]");
						//截取歌词字符串
						var text = item.substring(index+1);
						//截取时间字符串
						var time = item.substring(1,index).replace(/\..*/g,"");

						//获取一个临时时间
						var time_a = new Date("2000-01-01 00:00:00");
						//获取一个临时时间, 分秒时歌词时间
						var time_b = new Date("2000-01-01 00:"+time);
						//歌词时间 减默认的临时时间 得到时间戳
						time = (time_b.getTime() - time_a.getTime()) / 1000;
						
						html += "<p class='audio-t-"+ time +"' data-index='"+ i +"'>"+ text +"</p>";
					});
					$lrcbox.css({
						"top" : "0"
					}).html(html);
				},"text");
			},
			//歌词进度
			//currentTime  当前播放时间
			progress : function(currentTime){
				var time = parseInt(currentTime);
				//跟进播放时间找到对应歌词
				var $cur = $(".audio-t-"+time,$lrcbox);
				//如果找到对应歌词
				if($cur.length > 0){
					//清除上一次显示的歌词
					$(".acitve",$lrcbox).removeClass('acitve');
					//添加标示
					$cur.addClass('acitve');	

					var index = $cur.data("index");    //当前元素下标
					var lineHeight = $cur.height();    //一行歌词高度
					var boxHeight = $lrcwrap.height(); //歌词显示区域高度

					var screensize = boxHeight / lineHeight; //一屏显示多少句歌词
					var half = Math.floor(screensize / 2);   //半屏歌词数量
					//当前歌词超过半屏
					if(index > half){
						//计算出超过的高度 减去 一行歌词的高度
						var top = (half - index) * lineHeight + lineHeight
						$lrcbox.css({
							"top" : parseInt(top) + "px"
						});
					}
				}
			}
		};
	});
	//加载歌曲,歌词模块
	require(["$","audio","lrc"],function($,Audio,lrc){
		var $musicWrap = $(".music-wrap");
		var $countdown = $(".audio-time",$musicWrap);
		var $progressBar = $(".progress-bar",$musicWrap);
		//实例化 音乐对象
		var audio = new Audio({
			//当音乐播放时
			"play" : function(){
				//播放时删除可以暂停的 class
				$musicWrap.removeClass('pause');
			},
			//当音乐暂停时
			"pause" : function(){
				//暂停时添加暂停图片,默认为可以播放的图标
				$musicWrap.addClass('pause');
				//表示歌曲播放完毕
				if(this.ended == true){
					//播放下一首
					checkout(1);
				}
			},
			//播放进度
			// currentTime : 当前播放时间
			// duration : 当前音频已经加载可播放时间
			"progress" : function(currentTime,duration){
				//求剩余时间
				var percent = parseInt(duration - currentTime),
					m = Math.floor(percent / 60),
            		s = Math.floor(percent % 60);
            	//设置倒计时
				$countdown.html("-" + (m < 10 ? "0"+ m : m) + ":" + (s < 10 ? "0" + s : s));
				//设置进度条
				var progress = (currentTime / duration).toFixed(2);
				$progressBar.css({
					width : (progress * 100) + "%"
				});
				//更新歌词进度
				lrc.progress(currentTime);
			}
		});
		var dataList;
		$.get("/static/src/musiclist.json",{},function(result){
			dataList = result;
			//切换歌曲 默认播放第一首
			checkout();
		},"json");

		$(".play-pause",$musicWrap).on("click",function(){
			//判断是否暂停状态
			if($musicWrap.hasClass('pause')){
				$musicWrap.removeClass('pause');
				audio.play(); //暂停状态下播放歌曲
			}else{
				$musicWrap.addClass('pause');
				audio.pause(); //播放状态下暂停歌曲
			}
		});
		//切换歌曲
		function checkout(number){
			var curIndex = $musicWrap.data("index") || 0;
			curIndex += number || 0;
			if(curIndex < 0){
				curIndex = dataList.length - 1;
			}
			if(curIndex >= dataList.length){
				curIndex = 0;
			}
			$musicWrap.data("index",curIndex); //重新缓存歌曲播放进度
			var data = dataList[curIndex];
			//歌曲模块,切换歌曲
			audio.checkout(data.src);
			//歌词模块,切换歌词
			lrc.checkout(data.lrc);

			$(".music-title",$musicWrap).html(
				'<h3>'+ data.name +'</h3>'+
				'<p>'+ data.author +'</p>'
			);

			$(".music-song",$musicWrap).html(
				'<img src="'+ data.song +'"/>'		
			);


		}
		//上一曲下一曲切换
		$musicWrap.on(
			"click",
			".glyphicon-step-backward,.glyphicon-step-forward",
			function(){
				//按钮上自定义了歌曲切换方向
				var number = $(this).data("number");
				//切换歌曲
				checkout(number);
			}
		);
	});
</script>