audio 标签自动播放不起作用或者 play() 报错
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.桌面版的浏览器在近期也使用了这个策略；
所以上面提到很多人是监听整个页面的点击事件进行播放，不管点的哪里，只要点了就行，包括触摸下滑。这种方法只适用于一个声音资源
$(“#audio”).play()报错 not a function
<audio id=”audio” src=”waring.wav” preload=”auto” controls loop></audio>
$(‘#audio’).play();
报错原因：play()方法属于DOM对象方法，$(‘#audio’)为jquery对象
解决办法：将jquery对象转换为DOM对象
首先打印jquery对象$(‘#audio’)
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var audio =$(‘#audio’) ; //jQuery对象
var au=audio [0]; //DOM对象
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var audio =$(‘#audio’) ;//jQuery对象
var au=audio.get(0); //DOM对象