STU网页作业

在浏览器中不能自动播放网页背景音乐的解决办法

更新时间:2021-12-23   文章分类:网页技术课堂

声音没法自动播放这个在移动端上面一直是个惯例,目前经过测试,好像也就IE浏览器还支持播放背景音乐。其他电脑版的浏览器也相继关掉了声音自动播放,今天STU针对电脑和移动端分享两种方法可以达到网页背景音乐自动播放的目的。

适用于电脑端-创建点击监听

适用于电脑浏览器通过判断用户是否点击鼠标开启音乐播放。原理:当浏览器打开页面时,通过点击鼠标事件,来触发音频播放 。

<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>
<script>
// 将以下代码添加到js入口函数内即可
document.addEventListener('click', function() {
    document.getElementById('audios').play()
})
</script>

适用于手机端-创建触摸监听

通过判断用户是否触摸屏幕开启音乐播放。原理:当浏览器打开页面时,通过触摸屏幕事件,来触发音频播放 。

<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>
<script>
// 将以下代码添加到js入口函数内即可
document.addEventListener('touchstart', function() {
    document.getElementById('audios').play()
})
 
</script>


STU网页公众号

STU网页设计(STU-WORKS)专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生网页成品免费下载...

qq code back_top

微信扫码咨询