HTML 无法自动播放背景音乐

最新推荐文章于 2023-10-29 16:58:24 发布

三流程序员_

最新推荐文章于 2023-10-29 16:58:24 发布

阅读量5.6k

点赞数 1

文章标签： html5 javascript html java

本文链接：https://blog.csdn.net/PangBo_Cool/article/details/120368716

版权

问题描述：

解决移动端访问HTML5 无法自动播放背景音乐

原因分析：

苹果为了用户着想，禁止了Autoplay和JS “onload” 加载播放，也就是说即使你在html文件里使用了preload和autoplay属性，在移动版 Safari 上，此属性会被忽视，并且不会加载视频流，甚至不会下载该视频流。除非用户物理点击一次屏幕，其实现在不止苹果手机，其他的安卓手机和部分App有时也存在背景音不能自动播放的问题。

解决方案：

在 head标签中使用的 audio 标签播放音乐


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Music -->
		<audio style="display:none; height: 0" id="bg-music" preload="auto" src="youxing.mp3" loop="loop"></audio>
		<!-- Metas -->
		<meta charset="utf-8">

在页面中添加下面的js代码即可解决


<script>
			//音乐自动播放
			$(document).ready(function() {
				autoPlayMusic();
				audioAutoPlay();
			});

			function audioAutoPlay() {
				var audio = document.getElementById('bg-music');
				audio.play();
				document.addEventListener("WeixinJSBridgeReady", function() {
					audio.play();
				}, false);
			}
			// 音乐播放
			function autoPlayMusic() {
				// 自动播放音乐效果，解决浏览器或者APP自动播放问题
				function musicInBrowserHandler() {
					musicPlay(true);
					document.body.removeEventListener('touchstart', musicInBrowserHandler);
				}
				document.body.addEventListener('touchstart', musicInBrowserHandler);
				// 自动播放音乐效果，解决微信自动播放问题
				function musicInWeixinHandler() {
					musicPlay(true);
					document.addEventListener("WeixinJSBridgeReady", function() {
						musicPlay(true);
					}, false);
					document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
				}
				document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
			}

			function musicPlay(isPlay) {
				var media = document.querySelector('#bg-music');
				if (isPlay && media.paused) {
					media.play();
				}
				if (!isPlay && !media.paused) {
					media.pause();
				}
			}
		</script>