audio 标签自动播放不起作用或者 play() 报错
问题描述
页面的 audio 标签设置了自动播放属性,进入页面自动播放不起作用,或者用 js 控制 play(),方法无效,报错!
解决方案
经过各种百度,谷歌,追踪到原因如下:
页面必须进行交互才能进行对 audio 播放;
声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放,也就是说自动播放在在桌面版浏览器也将失效;
如Android Chrome文档提到。因此浏览器厂商放开了对多媒体自动播放的限制,只要具备以下条件就能自动播放:
(1)没音频轨道,或者设置了muted属性
(2)在视图里面是可见的,要插入到DOM里面并且不是display: none或者visibility: hidden的,没有滑出可视区域。
换句话说,只要你不开声音扰民,且对用户可见,就让你自动播放,不需要你去使用GIF的方法进行hack.桌面版的浏览器在近期也使用了这个策略;
所以上面提到很多人是监听整个页面的点击事件进行播放,不管点的哪里,只要点了就行,包括触摸下滑。这种方法只适用于一个声音资源,
原文:https://blog.csdn.net/yang450712123/article/details/84866611
在网站有订单提醒的提醒声音,css自动给audio增加了display:none,结果播放时报错:
Uncaught (in promise) DOMException: play()
我是加了个controls="controls"把audio 放在页面下面
解决!