音频播放,MP3

音频播放,MP3

HTML内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
	      <!--播放-->
			  window.onload=function(){
	var btn1 = document.getElementById("btn-play");
		btn1.onclick = function(){
		 	 if(audio.paused){                 
				audio.play();
			}
		}
	
	<!--暂停-->
	var btn2 = document.getElementById("btn-stop");
		btn2.onclick = function(){
		 	 if(audio.played){                 
				audio.pause();
			}
		}
		
	var music = new Array();
	music = ["灰白 - 君辞云梦泽","灰白- 双璧","小柯- 丰碑","炎上 - 小冤家"];//歌单
	var num = 0;
	var name = document.getElementById("name");
 
	
	<!--上一首-->
	var btn3 = document.getElementById("btn-pre");
	btn3.onclick = function(){
			num = (num +2)%3;
		 	audio.src =  "E:/下载/酷狗音乐/music/"+music[num]+".mp3";
			name.innerHTML = music[num];
			audio.play();
		}
		
	<!--下一首-->
	var btn4 = document.getElementById("btn-next");
	btn4.onclick = function(){
		 	num = (num +1)%3;
		 	audio.src =  "E:/下载/酷狗音乐/music/"+music[num]+".mp3";
			name.innerHTML = music[num];
			audio.play();
		}
			  }
	</script>
</head>
<div> 
 <h4 id="name">灰白 - 君辞云梦泽</h4>
 <br>
<audio id="audio" src="E:/下载/酷狗音乐/music/灰白 - 君辞云梦泽.mp3 " controls autoplay></audio><br/>
</div>

 <div>
 <button id="btn-play" >播放</button>  
 <button id="btn-stop" >暂停</button>  
 <button id="btn-pre" >上一首</button>  
 <button id="btn-next" >下一首</button>  
</div>
<body>
</body>
</html>

结果显示

在这里插入图片描述

在这里插入图片描述

发布了15 篇原创文章 · 获赞 4 · 访问量 1466

猜你喜欢

转载自blog.csdn.net/qq_40791070/article/details/92642305