网页audio标签中autoplay自动播放音乐失败解决方案

这几天写了一个网页，想给网页加一个背景音乐，随着页面加载好自动播放，一直实现不了，也没有报错，后来查询资料原来是因为audio设置的autoplay属性，记录一下。

<audio preload autoplay loop id="music"><source src="/music/bg.mp3" type="audio/mpeg">
</audio>

Chrome提示：DOMException: play() failed because the user didn’t interact with the document first.

原因：
Chrome等浏览器基于安全的策略，于早几年就已经停止自动播放

解决方法：
进入页面随便点击一下页面，这样用户和浏览器就产生了交互，可以开启自动播放

<script type="text/javascript">window.onload = function(){setInterval("toggleSound()",1);}function toggleSound() {var music = document.getElementById("music");//获取ID  if (music.paused) { //判读是否播放  music.paused=false;music.play(); //没有就播放 }    }
</script>

参考文献

https://blog.csdn.net/qq_30136729/article/details/121482527

网页audio标签中autoplay自动播放音乐失败解决方案相关推荐

谷歌浏览器audio标签自动播放音乐问题解决
前面一篇博客中有audio标签自动播放音乐的代码,可是后来再打开页面时音乐自动播放报错了: 看了网上的一些帖子才知道原来在4月份谷歌浏览器做了改革,不止谷歌, 其他浏览器好像也不支持自动播放了,现贴出 ...
audio标签有的浏览器不支持音乐自动播放
audio标签有的浏览器不支持音乐自动播放 H5中的audio标签有的IOS设备和安卓设备不支持自动播放,也就是不支持autoplay属性,并且,这些浏览器只支持用户click点击事件触发audio. ...
苹果微信html音乐播放,HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
html5手机不能自动播放音乐,H5案例---解决H5中背景音乐无法自动播放问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼四.完整代码您的浏览器不支持 audio标签. // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器 ...
linux java amr转mp3_本工具用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放...
音频转码工具本工具主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放. 支持 Linux/Windows/Mac 平台因为是基于 JAVE 项目 ...
java amr音频转码_jave: 音频转码工具，主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放...
音频转码工具本工具主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放. 支持 Linux/Windows/Mac 平台因为是基于 JAVE 项目 ...
微信网页audio标签无法正常播放音频
先简单说一下笔者遇到的情况,方便其他人员确认是否符合自身需要,项目需要做一个微信公众号活动,要求用户上传音频,然后为了减少播放器的麻烦,音频文件需要通过另外的转码服务器转成统一的mp3文件,然后再回传 ...
iphone 微信打开H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题 --由于苹果的ios系统的安全保护较严格,iphone手机打开微信H5的时候(针对于已对audio标签设置 autoplay为true的H5),通常要先点击 ...
selenium实现自动播放音乐
1-5节来自哔哩哔哩:selenium框架 1. 什么是selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,Selenium 可以直接运行在浏览器上,它 ...
下载spotify音乐_完成播放列表或专辑后如何停止Spotify停止自动播放音乐
下载spotify音乐 By default, whenever Spotify reaches the end of the song, album, artist, or playlist you ...

网页audio标签中autoplay自动播放音乐失败解决方案

参考文献

网页audio标签中autoplay自动播放音乐失败解决方案相关推荐

最新文章

热门文章