小小千想和您聊一聊

当前位置: 首页> 技术分享> 使用原生JS重构简单的音乐播放器

使用原生JS重构简单的音乐播放器

  上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧。

  首先,html界面index.html不需要改动,代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--播放器-->
		<audio id="song" autoplay="autoplay"></audio>
		<!--整体结构-->
		<div id="boxDiv">
			<!--歌词展示区域-->
			<div id="contentDiv">
				<!--歌词显示-->
				<div id="lrcDiv"></div>
				<!--上部阴影-->
				<span id="bgTopSpan"></span>
				<!--下部阴影-->
				<span id="bgBottomSpan"></span>
			</div>
			<!--控制区域-->
			<div id="controlDiv">
				<!--进度条-->
				<div id="progressDiv"></div>
				<!--进度条圆点-->
				<img id="pointerImg" src="img/audio/progress_pointer@2x.png"/>
				<!--播放时间-->
				<span id="playTimeSpan">00:00</span>
				<!--歌曲标题-->
				<span id="titleSpan"></span>
				<!--总时间-->
				<span id="totalTimeSpan">00:00</span>
				<!--按钮区域-->
				<div id="buttonDiv">
					<!--上一首按钮-->
					<img id="prevImg" src="img/audio/play_above_song@2x.png"/>
					<!--播放暂停按钮-->
					<img id="playOrPauseImg" src="img/audio/play@2x.png"/>
					<!--下一首按钮-->
					<img id="nextImg" src="img/audio/play_next_song@2x.png"/>
				</div>
			</div>
		</div>
	</body>
</html>

接下来,style.css也不需要变化,代码如下:
body{
	margin: 0px;
	background-color: #ccc;
}

#boxDiv{
	width: 375px;
	height: 568px;
	margin: 10px auto;
	position: relative;
}

#contentDiv{
	width: 375px;
	height: 460px;
	background-image: url(../img/audio/play_bg@2x.png);
	overflow: hidden;
}

#lrcDiv{
	margin-top: 260px;
}

#lrcDiv span{
	display: block;
	line-height: 40px;
	text-align: center;
	color: white;
	font-size: 20px;
}

#bgTopSpan{
	position: absolute;
	display: block;
	width: 375px;
	height: 30px;
	top: 0px;
	background-image: url(../img/audio/play_top_shadow@2x.png);
}

#bgBottomSpan{
	top: 430px;
	position: absolute;
	background-image: url(../img/audio/play_bottom_shadow@2x.png);
	display: block;
	width: 375px;
	height: 30px;
}

#controlDiv{
	width: 375px;
	height: 180px;
	position: relative;
	background-color: white;
}

#progressDiv{
	background-color: red;
	height: 1.5px;
	width: 0px;
}

#pointerImg{
	width: 18px;
	height: 18px;
	position: absolute;
	top: -8.5px;
	left: -3px;
}

#playTimeSpan{
	display: block;
	position: absolute;
	font-size: 14px;
	width: 35px;
	top: 5px;
	left: 5px;
}

#totalTimeSpan{
	display: block;
	position: absolute;
	font-size: 14px;
	width: 35px;
	top: 5px;
	left: 335px;
}

#titleSpan{
	display: block;
	position: absolute;
	height: 30px;
	width: 295px;
	font-size: 20px;
	text-align: center;
	left: 40px;
	top: 5px;
}

#buttonDiv{
	margin-top: 40px;
	position: relative;
}

#prevImg{
	width: 40px;
	height: 40px;
	position: absolute;
	top: 20px;
	left: 60px;
}

#playOrPauseImg{
	width: 70px;
	height: 70px;
	position: absolute;
	top: 5px;
	left: 152px;
}

#nextImg{
	width: 40px;
	height: 40px;
	position: absolute;
	top: 20px;
	left: 275px;
}

最后,common.js里面代码变动很多,如下:
// 表示页面加载完毕才开始执行
window.onload = function(){
	// 歌曲列表
	var playList = ["红日", "狼的诱惑", "漂洋过海来看你"];
	// 当前播放的歌曲序号
	var currentIndex = 0;
	// 播放器的原生对象
	var audio = getById("song");;
	// 播放时间数组
	var timeArr = [];
	// 歌词数组
	var lrcArr = [];
	
	// 默认调用一次
	setup();
	
	// 在播放前设置一下要播放的歌曲和歌词
	function setup(){
		// 设置播放哪一首歌曲
		// img/audio/红日.mp3  
		audio.src = "img/audio/" + playList[currentIndex] + ".mp3";
		// 设置歌曲的名字
		getById("titleSpan").innerText = playList[currentIndex];
		
		// 设置歌词
		setLrc();
	}
	
	// 播放歌曲
	function playMusic(){
		// 播放歌曲
		audio.play();
		// 设置为暂停的图片
		getById("playOrPauseImg").src = "img/audio/pause@2x.png";
	}
	
	
	// 设置歌词
	function setLrc(){
		// 清空上一首的歌词
		getById("lrcDiv").innerHTML = "";
		// 清空数组
		timeArr = [];
		lrcArr = [];
		// 加载歌词文件
		var url = "img/audio/" + playList[currentIndex] + ".lrc";
		
		/***********使用AJAX开始读取歌词      *************/
        var request = new XMLHttpRequest(); // 创建一个异步的请求对象
        request.open("get", url);/*设置请求方法与路径*/
        request.onload = function () {/*XHR对象获取到返回信息后执行*/
            if (request.status == 200) {/*返回状态为200,即为数据获取成功*/
           		var data = request.responseText;
           		if(data){ // 相当于if(data != "")
					// 按行切割字符串
					var arr = data.split("\n");
					// 分割歌词
					for (var i = 0; i < arr.length; i++) {
						// 分割时间和歌词
						var tempArr = arr[i].split("]");
						console.log(tempArr.length);
						if (tempArr.length > 1){
							// 添加时间和歌词到数组
							timeArr.push(tempArr[0]);
							lrcArr.push(tempArr[1]);
						}
					}
					var content = "";
					// 显示歌词
					for (var i = 0; i < lrcArr.length; i++) {
						content += "<span>"+lrcArr[i]+"</span>";
					}
					getById("lrcDiv").innerHTML = content;
				}
            }
        };
		request.send(null);// 发送请求
		/******************歌词读取结束************************/
	}
	
	// 播放暂停事件
	getById("playOrPauseImg").onclick = function(){
		// 如果播放器是暂停状态
		if(audio.paused){
			// 继续播放
			playMusic();
		}else{
			// 暂停
			audio.pause();
			// 变成播放的图片
			getById("playOrPauseImg").src = "img/audio/play@2x.png";
		}
	};
	
	// 上一首
	getById("prevImg").onclick = function(){
		// 如果是第一首,那么跳到最后一首
		if(currentIndex == 0){
			currentIndex = playList.length - 1;
		}else{
			currentIndex--;
		}
		// 播放前设置
		setup();
		// 播放
		playMusic();
	};
	
	// 下一首
	getById("nextImg").onclick = function(){
		// 如果是最后一首,就跳到第一首
		if(currentIndex == playList.length - 1){
			currentIndex = 0;
		}else{
			currentIndex++;
		}
		// 播放前设置
		setup();
		// 播放
		playMusic();
	};
	
	// 监听播放器播放时间改变事件
	audio.addEventListener("timeupdate", function(){
		// 当前播放时间
		var currentTime = audio.currentTime;
		// 总时间
		var totalTime = audio.duration;
		// 当是数字的时候
		if(!isNaN(totalTime)){
			// 得到播放时间与总时长的比值
			var rate = currentTime / totalTime;
			// 设置时间显示
			// 播放时间
			getById("playTimeSpan").innerText = getFormatterDate(currentTime);
			// 总时长
			getById("totalTimeSpan").innerText = getFormatterDate(totalTime);
			// 设置进度条
			getById("progressDiv").style.width = rate * 375 + "px";
			// 设置进度圆点
			getById("pointerImg").style.left = (375 - 15) * rate - 3 + "px";
			// 设置歌词的颜色和内容的滚动
			var lrcDiv = getById("lrcDiv");
			var spanArr = lrcDiv.children;
			for (var i = 0; i < timeArr.length - 1; i++) {
				if(!isNaN(getTime(timeArr[i]))){
					// 当前播放时间大于等于i行的时间,并且小于下一行的时间
					if (currentTime >= getTime(timeArr[i]) && currentTime < getTime(timeArr[i+1])){
						// 当前行歌词变红色
						spanArr[i].style.color = "#FF0000";
						// 其他行歌词变白色
						if(i - 1 >= 0){
							spanArr[i-1].style.color = "#FFFFFF";
						}
						// 当前行歌词滚动
						lrcDiv.style.marginTop = 260 - 40 * i + "px";
					}
				}
			}
		}
	});
	
	function getTime(timeStr){
		// 去掉左边的[
		var arr = timeStr.split("[");
		if(arr.length > 1){
			// 得到右边的时间
			var str = arr[1];
			// 分割分、秒
			var tempArr = str.split(":");
			// 分
			var m = parseInt(tempArr[0]);
			// 秒
			var s = parseFloat(tempArr[1]);
			return m * 60 + s;
		}
		return 0;
	}
	
	// 格式化时间(00:00)
	function getFormatterDate(time){
		// 分
		var m = parseInt(time / 60);
		// 秒
		var s = parseInt(time % 60);
		// 补零
		m = m > 9 ? m : "0" + m;
		s = s > 9 ? s : "0" + s;
		return m + ":" + s;
	}
	
	// 简化代码
	function getById(id){
		return document.getElementById(id);
	}
}

  代码至此就完了,最后,可以运行试试了。

上一篇:HTML5工具初识之网页编辑器

下一篇:Java异常类(错误和异常区别介绍)

QQ技术交流群

千锋Java开发官方①群
811099962

加入群聊