Html5 audio标签实现音乐播放

最新推荐文章于 2024-05-16 16:07:10 发布

wentaox

最新推荐文章于 2024-05-16 16:07:10 发布

阅读量4k

点赞数 8

分类专栏： Web前端文章标签： audio 音乐播放器

本文链接：https://blog.csdn.net/wentaox/article/details/72795014

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!--通过原生js代码，和html5的audio标签实现音乐播放-->

<!DOCTYPE HTML>
<html>
<head>
	<style>
	 *{margin:0;padding:0;}
	 body{padding:30px;background:#9e9e9e}
	 header{width:500px;margin:0 auto;text-align:center}
	 .content{width:510px;overflow-y:auto;margin:0 auto; padding:5px; font-size:24px;box-shadow:10px 10px 5px #888888;background:#a1887f;}
	 .musicDiv{width:500px;height:50px;margin:0px auto;line-height:50px;cursor:pointer}
	 .line{width:500px;height:2px;background:white;float:left;margin:5px 0}
	 .clear{clear:both}
	</style>
	<script>		
		var olderBox;//记录前一个播放的音乐位置
		var currentBox;
		var stateImg;
		window.onload = function()
		{	
			
			
			var player = document.getElementById("player");
			player.addEventListener('pause',function()
			{
			if(currentBox != null)
				stateImg[0].src="pause.png";
			},false);
			player.addEventListener('playing',function()
			{
			if(currentBox != null)
				stateImg[0].src="play.png";
			},false);
		}
		
		function play(obj)
		{
			//alert(obj);
			//var box = document.getElementsByName("box");
			currentBox = obj;
			stateImg = obj.getElementsByTagName("img");
			if(olderBox != obj)
			{
				if(olderBox != null)
				{
					stateImg1 = olderBox.getElementsByTagName("img");
					stateImg1[0].src = "";
				}
				olderBox = obj;
				var box1 = obj.getElementsByTagName("span");
				
				var songName = "music/" + box1[0].innerText+".mp3";
				player.src = songName;
				player.play();
				stateImg[0].src="play.png";
			}else
			{
				if(player.paused)
				{
					player.play();
					stateImg[0].src="play.png";
					}
				else
				{
					player.pause();
					stateImg[0].src="pause.png";
					}
			}	
		}
		
		function changeState()
		{
		alert("点击");
			if(current != null)
			{
				if(player.paused)
				{
					stateImg[0].src="pause.png";
				}else
				{
					stateImg[0].src="play.png";
				}
			}
		}
		
	</script>
</head>
<body>
	<header><h1>音乐播放列表</h1></header>
	<div style="width:510px;height:30px;margin:10px auto;" οnclick="changeState()">
		<audio id="player"  controls="controls" style="width:510px;"></audio>
	</div>
	
	<div id="content" class="content">
	<script>
		var content = document.getElementById("content");
			var clientHeight = document.documentElement.clientHeight-document.documentElement.scrollTop;
			content.style.height = clientHeight+'px';
	</script>
		<div class="musicDiv" style="margin-top:0" name="box" οnclick="play(this)">
			<div style="width:450px;height:50px;float:left;">
				<span name="songName">1.给你们</span><span name="singer"> - 张宇</span>
			</div>
			<div style="width:50px;height:50px;float:left;text-align:center;">
				<img style="vertical-align:middle;">
			</div>
			<div class="line"></div>
		</div>
		
		
		<div class="musicDiv" name="box" οnclick="play(this)">
			<div style="width:450px;height:50px;float:left;">
				<span>2.Thanks for your love</span><span> - 刘德华</span>
			</div>
			<div style="width:50px;height:50px;float:left;text-align:center;">
				<img style="vertical-align:middle;">
			</div>
			<div class="line"></div>
		</div>
		
		<div class="musicDiv" name="box" οnclick="play(this)">
			<div style="width:450px;height:50px;float:left;">
				<span>3.酒干倘卖无</span><span> - 苏芮</span>
			</div>
			<div style="width:50px;height:50px;float:left;text-align:center;">
				<img style="vertical-align:middle;">
			</div>
			<div class="line"></div>
		</div>
		<div class="clear"></div>
		
	</div>
</body>
</html>