音乐的播放与暂停

最新推荐文章于 2022-11-15 15:18:12 发布

前端-文龙刚

最新推荐文章于 2022-11-15 15:18:12 发布

阅读量226

点赞数

分类专栏： html+css 音视频文章标签： javascript html webview

本文链接：https://blog.csdn.net/qq_17211063/article/details/123253036

版权

html+css 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

音视频

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style type="text/css">
			*{margin:0;padding:0;list-style-type:none;}
			a{width:150px;height:40px;line-height:40px;border-radius:4px;background:red;color:#fff;display:block;text-align:center;}
		</style>
	</head>

	<body>
		
		<a href="javascript:;">播放</a>
		<span>暂停</span>
		<audio id="audion" controls="controls">
		  <source src="music.mp3" type="audio/mpeg">
		您的浏览器不支持音频播放
		</audio>
		
	</body>

</html>
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	var audio = document.getElementById("audion");
	$('a').click(function(){
        audio.play();
        
        
		//$('audio').play()
	});
	
	$('span').click(function(){
		audio.pause();
	});
	
	audio.addEventListener('ended', function () {  
        alert('播放完毕');
    }, false);
</script>

关注博主即可阅读全文