audio标签在某些手机浏览器不支持自动播放的问题

发布于 2022-09-01 23:14:11 字数 356 浏览 118 评论 0

在大多数手机浏览器例如Safari和安卓自带浏览器无法自动播放音频文件,也无法使用js,jq触发播放,只能通过手动点击播放按钮才可以播放,在手机qq浏览器,微信 qq内置浏览器是没有问题的,查了下官方也说不支持,请问怎么解决这个问题?
部分代码如下:

<audio id="shake_action" src="xxx.mp3" preload="auto" autoplay="true"></audio>
<script>    
var myAuto = document.getElementById('shake_action');
myAuto.play();
</script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

南城追梦 2022-09-08 23:14:11

var myAuto = document.getElementById('shake_action');
myAuto.play();
if(myAuto.paused){
//还是暂停的,去注册点击播放事件或者做其它
}

勿忘初心 2022-09-08 23:14:11

autoplay 属性不是布尔吧,autoplay = “autoplay” Safari浏览器和安卓QQ内置的QQ浏览器都不支持,目前也在找办法,请问题主现在解决了吗?

木格 2022-09-08 23:14:11
document.addEventListener('touchstart', function(){
   audio.play();
}, false);

js给document添加一个互动事件就可以了,用户只要点击了屏幕,就可以实现自动播放

北斗星光 2022-09-08 23:14:11

系统默认,禁止了Audio的Autoplay属性
微信解决方案:监听WeixinJSBridgeReady事件、DOMContentLoaded事件
部分Android浏览器和所有IOS下Safari浏览器不支持自动播放,解决方案:监听body的touchstart事件,回调中播放音乐;

// 音乐播放
function autoPlayMusic() {
    // 自动播放音乐效果,解决浏览器或者APP自动播放问题
    function musicInBrowserHandler() {
        musicPlay(true);
        document.body.removeEventListener('touchstart', musicInBrowserHandler);
    }
    document.body.addEventListener('touchstart', musicInBrowserHandler);

    // 自动播放音乐效果,解决微信自动播放问题
    function musicInWeixinHandler() {
        musicPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
    var audio = document.getElementById('musicid');
    if (isPlay && audio.paused) {
        audio.play();
    }
    if (!isPlay && !audio.paused) {
        audio.pause();
    }
}
autoPlayMusic();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文