H5实现简单的音乐播放器

zhy

发布于 2020.02.17 14:34 阅读 2591 评论 0

html5提供了<audio> 标签定义声音，比如音乐或其他音频流。

下面是<audio> 标签的属性和方法：

接下来要用<audio>标签实现一个播放器：

基本思路：

1. 先画出一个简单的前端界面

2. 利用js代码给歌曲添加onclick点击事件

3. 设置歌曲播放完毕后的处理方法

具体代码：

<!DOCTYPE html>
<html>
<head>
	<title>music</title>
	<meta charset="gbk">
	<link rel="stylesheet" type="text/css" href="music.css">
</head>
<body> 
	<div id = love>
		<audio src="" class="music" controls ></audio>
		<ul class="mlist">
			<li class="">这个年纪</li>
			<li>七月的风</li>
			<li>音乐</li>			
		</ul>
	</div>
<script type="text/javascript" src="music.js"></script>
</body>
</html>

js源码：

var musicNode = document.getElementsByClassName('music')[0];//获取audio标签的对象
var     mlist = document.getElementsByClassName('mlist')[0];//获取列表
var       lis = document.getElementsByTagName('li');//获取所有列表项
var       len = lis.length;//列表长度
var  musicsrc =['http://i.y.qq.com/rsc/fcgi-bin/fcg_pyq_play.fcg?songid=&songmid=001IVmR52EKTx0&songtype=1&fromtag=50&uin=3233793689&code=52EB9'
   ,'http://i.y.qq.com/rsc/fcgi-bin/fcg_pyq_play.fcg?songid=&songmid=003NRZIf12Rbsy&songtype=1&fromtag=50&uin=3233793689&code=405BF'
   ,'http://i.y.qq.com/rsc/fcgi-bin/fcg_pyq_play.fcg?songid=&songmid=000T9Ie41JG3Dc&songtype=1&fromtag=50&uin=3233793689&code=F9B10'
   ];
   //初始化audio的歌曲源路径
   musicNode.src = musicsrc[0];
 for (var i = 0; i < len; i++) {//单击改变playmusic
 	(function(i){
 		lis[i].onclick =function(){        
 		musicNode.src = musicsrc[i];
                //重新加载
 		musicNode.load();
                //播放
 		musicNode.play();
                //将其他列表项的classname改为空
 		for (var j= 0; j < len; j++) {
 			lis[j].className = '';
 		}
 		this.className = 'play';
 	}})(i);
 }
 musicNode.onended =function(){//音乐播放完后自动下一曲
 	 var ended = getPlay();
     if (ended == len-1) {//若为最后一曲则放第一曲
      musicNode.src = musicsrc[0];
      lis[0].className = 'play'
       lis[ended].className = '';
      musicNode.load();
 	  musicNode.play(); 
     }else{ 
      musicNode.src = musicsrc[ended + 1];
      lis[ended + 1].className = 'play';
      lis[ended].className = '';
      musicNode.load();
 	  musicNode.play(); }
     
 }
function getPlay(){//获取正在播放music的li
     for (var i = 0; i < len; i++) {
     	if (lis[i].getAttribute('class') == 'play') {
     		return i
     	}
      }
}

实现效果：

发表评论