HTML/JS添加音乐

HTML/JS添加背景音乐

由于需要避免浏览器不必要的资源消耗，音乐播放必须要有事件触发

文章目录

HTML/JS添加背景音乐
html
js
手机浏览器自动播放

html

在body中添加你的音乐

<body>
<audio autoplay="autopaly" loop="loop" id="audios"><source src="../music/潮汐 (Natural)-傅梦彤.128.mp3" type="audio/mp3" />
</audio>
</body>

js

在js中添加这段播放触发事件

<script type="text/javascript">// 将以下代码添加到js入口函数内即可document.addEventListener('touchstart', function () {document.getElementById('audios').play()})document.addEventListener('click', function () {document.getElementById('audios').play()})document.addEventListener('load', function () {document.getElementById('audios').play()})
</script>

手机浏览器自动播放

这个不需要触发条件就可以播放
前提是点击的链接走的是浏览器，像微信走的是内置浏览器，所以还是不能自动播放

<audio id="bgm" autoplay="autoplay" loop="loop" src="../music/潮汐 (Natural)-傅梦彤.128.mp3"></audio>
<script>window.onload = function () {var audio = document.getElementById('bgm');//背景音乐自动播放监听document.addEventListener("WeixinJSBridgeReady", function () {if (audio.paused) {audio.play();}}, false);
}