用原生js写音乐播放器

这次我用原生js实现音乐播放器的功能 可以进行播放 暂停 上一首以及下一首和点击切换歌曲的功能。

首先把播放器的样式写好

<div class="music">
			<div class="musicL">
				<i class="iconfont icon-shangyishou" id="top"></i>
				<span class="play" id="play">
					<i class="iconfont icon-bofang"></i>
				</span>
				<i class="iconfont icon-xiayishou" id="down"></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"></audio>

		<div class="music_list">
			<ul id="ul">
				<li>1.mp3</li>
				<li>2.mp3</li>
				<li>3.mp3</li>
				<li>4.mp3</li>
			</ul>
		</div>

以及他的css样式

* {
				margin: 0;
				padding: 0;
			}
			
			ul li {
				list-style: none;
			}
			
			.music {
				width: 500px;
				height: 40px;
				background: #eee;
				margin: 20px auto;
				line-height: 40px;
			}
			
			.musicL {
				float: left;
			}
			
			.progress {
				float: left;
				font-size: 14px;
				width: 300px;
				height: 40px;
				margin-left: 10px;
			}
			
			.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: 10px;
				height: 10px;
				border-radius: 50%;
				background: #63A35C;
				left: 0px;
				top: -3px;
			}
			
			.music_list {
				width: 500px;
				background: #DDDDDD;
				margin: 0 auto;
			}
			
			.music_list li {
				height: 40px;
				border-bottom: 1px solid #ccc;
				line-height: 40px;
				cursor: pointer;
			}
			
			.music_list li:hover {
				background: pink;
			}

下面用js实现功能

首先获取各个标签

            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 oUl = document.getElementById("ul")
			var oLi = oUl.getElementsByTagName("li")
			var oTop = document.getElementById("top")
			var oDown = document.getElementById("down")
			
			
			

设置一个num 还有音频的数组 把要播放的歌曲放在数组里面

            var num = 0
			var arr = ["video/1.mp3", "video/2.mp3", "video/3.mp3", "video/4.mp3"]
			oAudio.src = arr[num]

接下来是功能的实现

1.点击切换歌曲

//点击切换歌曲

			for(var i = 0; i < oLi.length; i++) {
				oLi[i].index = i
				oLi[i].onclick = function() {
					num = this.index
					oAudio.src = arr[this.index]
					oAudio.play()

					oPlay.innerHTML = '<i class="iconfont icon-iconstop"></i>'
				}
			}

2.转换总时长

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

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

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

3.监听进度变化

//监听进度变化
			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
			}

4.点击进度变化

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

5.拖拽圆点

//拖拽原点
			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
					//					console.log("up")
				}
				return false

			}

6.获取分钟的函数用来计算总时长和当前播放时间

//获取分钟的函数
			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
			}

7.上一首

//上一首
			oTop.onclick = function() {
				num++
				if(num < 0) {
					num = arr.length - 1
				}
				oAudio.src = arr[num]
				oAudio.play()
			}

8.下一首

//下一首
			oDown.onclick = function() {
				num++
				if(num > arr.length - 1) {
					num = 0
				}
				oAudio.src = arr[num]
				oAudio.play()
			}

功能就完善了。

在做这个播放器的时候 注意当前歌曲的下标和num数字关联起来 方便下一首和上一首功能 还有音频要放在指定的文件夹（我这里是video）主意好每个标签的命名 其他的多看代码 认真思考就可以了