admin管理员组文章数量:1562425
由于Android，IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验，规定不自动播放音频视频，默认屏蔽了autoplay，如果要想达到自动播放效果，需要单独处理，方法有以下几种：
第一种：添加控制属性(controls)
原理：直接使用行内式添加controls属性，显示控制按钮，让用户手动触发音频播放
第二种：创建页面监听(WeixinJSBridgeReady)
原理：对页面加载进行监听，等待微信客户端页面加载完毕后，自动触发音频播放
// 将以下代码添加到js入口函数内即可
// 这里使用了微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
document.getElementById('audios').play()
})
第三种：创建触摸监听(touchstart)
原理：当浏览器打开页面时，通过触摸屏幕事件，来触发音频播放
// 将以下代码添加到js入口函数内即可
document.addEventListener('touchstart', function() {
document.getElementById('audios').play()
})
第四种：综合以上自定义Func实现交互触发play()
不推荐此方法，上面三种方法足以解决日常问题
function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('audios');
图片加载完成:
版权声明：本文标题：html手机端音乐不自动播放,解决移动端浏览器 HTML 音频不能自动播放的三种方法... 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1727476036a1116504.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论