用JS写一个简单的音乐播放器

音乐播放主要用到HTML5元素中的audio属性

接下来我们开始写：

先布好局

<div class="music">
			<div class="musicL">
				<i class="iconfont icon-shangyishou"></i>
				<span class="play" id="play">
					<i class="iconfont icon-bofang"></i>
				</span>
				<i class="iconfont icon-xiayishou"></i>
			</div>

			<div class="progress">
				<span class="start_time" id="start_time">00:00</span>
				<div class="load" id="load">
					<div class="circle" id="circle">
						<div class="round" id="round">

						</div>

					</div>
				</div>
				<span class="total_time" id="total_time">00:00</span>
			</div>

		</div>
		<audio id="audio" autoplay="autoplay"></audio>

		<div class="music_list">
			<ul>
				<li class="title"><span><b>歌曲列表</b></span></li>
			</ul>
		</div>

加上样式

* {
				margin: 0;
				padding: 0;
			}
			
			ul li {
				list-style: none;
			}
			
			.music {
				width: 500px;
				height: 40px;
				background: #242424;
				margin: 20px auto;
				line-height: 40px;
			}
			
			.musicL {
				float: left;
			}
			
			.iconfont {
				color: #fff;
				margin: 0 10px
			}
			
			.progress {
				float: left;
				font-size: 14px;
				width: 300px;
				height: 40px;
				margin-left: 10px;
				color: #fff;
			}
			
			.progress span {
				margin: 0 4px;
			}
			
			.load {
				display: inline-block;
				width: 200px;
				height: 5px;
				background: #ddd;
				cursor: pointer;
				position: relative;
				top: -2px;
			}
			
			.circle {
				width: 0px;
				height: 5px;
				background: red;
				position: relative;
				left: 0;
				top: 0;
			}
			
			.round {
				position: absolute;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: crimson;
				left: 0px;
				border: 3px solid #fff;
				top: -5px;
				margin-left: -7px;
			}
			
			.music_list {
				width: 500px;
				background: #242424;
				margin: -20px auto;
				border-top: 2px solid #dc143c;
				border-bottom: 1px solid #ccc;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
				color: #fff;
			}
			
			.music_list li {
				height: 40px;
				border-bottom: 1px solid #ccc;
				line-height: 40px;
				cursor: pointer;
			}
			
			.music_list li span {
				margin: 0 10px;
				width: 220px;
				float: left;
			}
			
			.music_list .title span {
				font-size: 18px;
			}
			
			.music_list li:hover {
				border-left: 2px solid crimson;
				background: rgba(255, 255, 255, 0.5);
			}
			
			.music_list ul .title:hover {
				border-left: 0px;
				background: #242424;
			}
			
			.music .musicL i {
				cursor: pointer;
			}

这样播放器的基本样子就出来了，

最后把功能完善一下，

                var oUp = document.getElementsByClassName("icon-shangyishou")[0]
	        var oDo = document.getElementsByClassName("icon-xiayishou")[0]
			var oTotal = document.getElementsByClassName("total_time")[0]
			var oAudio = document.getElementById("audio")
			var oPlay = document.getElementById("play")
			var oCircle = document.getElementById("circle")
			var oStart = document.getElementById("start_time")
			var oRound = document.getElementById("round")
			var oLoad = document.getElementById("load")
			var oList = document.getElementsByClassName("music_list")[0]
			var oUl = oList.getElementsByTagName("ul")[0]
			
			var _this = null
			var num = 0
			var arr = ["video/4.mp3", "video/3.mp3", "video/2.mp3", "video/1.mp3"]
			var arr2 = ["明年今日", "爱的故事上集", "That Girl", "走马"]
			var arr3 = ["陈奕迅", "陈涵", "龙千里", "陈粒"]
			oAudio.src = arr[num]
			for(var i = 0; i < arr.length; i++) {
				var str = '<li index=' + i + '>' + '<span>' + arr2[i] + '</span>' + arr3[i] + '</li>'
				oUl.innerHTML += str

			}
			var oLi = oUl.getElementsByTagName("li")

			//转换总时长
			oAudio.addEventListener("canplay", function() {
				oTotal.innerHTML = getMin(this.duration)
			})

			//播放列表
			for(var i = 0; i < oLi.length; i++) {
				oLi[i].ondblclick = function() {
					oAudio.src = arr[this.getAttribute("index")]

					_this = this
				}

			}

			//点击开始播放
			oPlay.onclick = function() {
				if(oAudio.paused) {
					oAudio.play()
					oPlay.innerHTML = '<i class="iconfont icon-zanting"></i>'

				} else {
					oAudio.pause()
					oPlay.innerHTML = '<i class="iconfont icon-bofang"></i>'
				}
			}

			//监听进度变化
	oAudio.ontimeupdate = function() {
	var pre = Math.floor(oAudio.currentTime / oAudio.duration * 200)
	oCircle.style.width = pre + "px"
	oStart.innerHTML = getMin(oAudio.currentTime)
	oRound.style.left = oCircle.style.width
			}

			//点击进度变化
			oLoad.onclick = function(e) {
				var l = e.clientX - oLoad.offsetLeft
				oAudio.currentTime = (l / 200) * oAudio.duration

			}
			//拖拽原点
			oRound.onmousedown = function(e) {
				document.onmousemove = function(e) {
					var l = e.clientX - oLoad.offsetLeft
					oAudio.currentTime = (l / 200) * oAudio.duration

				}
				document.onmouseup = function() {
					document.onmousedown = null
					document.onmousemove = null

				}
				return false

			}

			//播放结束
			oAudio.addEventListener("ended", function() {
				num++
				oAudio.src = arr[num]
				if(num > arr.length) {
					num = 0
				}
				console.log(oAudio.src)
				oAudio.play()
			})

			//获取分钟的函数
			function getMin(time) {
				var m = Math.floor(time / 60)
				var s = Math.floor(time % 60)
				if(m <= 9) {
					m = "0" + m
				}
				if(s <= 9) {
					s = "0" + s
				}
				return m + ":" + s
			}

			_this = oLi[0]

			//上一首
			oUp.onclick = function() {
				var now = _this.getAttribute("index")
				now--
				if(now < 0) {
					now = arr.length - 1
				}
				console.log(now)
				_this = oLi[now]
				oAudio.src = arr[now]
				oAudio.play()
				console.log(oAudio.src)
			}
			//下一首
			oDo.onclick = function() {
				var now = _this.getAttribute("index")
				now++
				if(now > arr.length - 1) {
					now = 0
				}
				_this = oLi[now]
				console.log(now)
				oAudio.src = arr[now]
				oAudio.play()
				console.log(oAudio.src)
			}
		

这里要注意的是文件路径不要错

 上一首与下一首原理跟图片一样，都是改变下标来切换