网页播放背景音乐实现完整代码

2021-07-01 18:31:29 阅读：163 来源： 互联网

标签：背景音乐 audio 网页 play paused btn active 播放

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="">
			你好
		</div>
		<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
			<source src="https://xxx-vue-2d4g055fe160b-1254304076.tcloudbaseapp.com/test/5.mp3" />
		</audio>
		<!--这里是音乐-->	
		<button type="button" onclick="play()">播放</button>
		<!--这里是一个可以控制背景音乐播放暂停的开关-->
		<script type="text/javascript">
			var audio = document.getElementById('music1');
			// $("#btn").bind("touchstart", function bf() {

			// 	if (audio !== null) {
			// 		//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
			// 		//alert(audio.paused);
			// 		if (audio.paused) {
			// 			audio.play(); //audio.play();// 这个就是播放
			// 			$("#btn").addClass("active")
			// 		} else {
			// 			audio.pause(); // 这个就是暂停
			// 			$("#btn").removeClass("active")
			// 		}
			// 	}
			// })
			function play(){
				console.log('aaaaaa')
				alert('播放音乐')
				audio.play();
			}
		</script>
	</body>
</html>

点击播放按钮，就可以播放拉。

标签：背景音乐,audio,网页,play,paused,btn,active,播放
来源： https://blog.csdn.net/qq_35713752/article/details/112025122

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

网页播放背景音乐实现完整代码