音乐audio 的 play() 方法无效 怎么补救。

音乐audio 的 play() 方法无效怎么补救。

<body>
    <div>
        <audio controls="true" autoplay="true" id="audio">
            <source src="http://i.dxlfile.com/app/music/27.mp3" />
            <!-- <source src="http://i.dxlfile.com/app/music/27.ogg" /> -->
            <!-- <source src="http://i.dxlfile.com/app/music/27.ogg" /> -->
        </audio>
    </div>
    <script>
        var audio=document.getElementById("audio");
        audio.addEventListener("canplay", function() {

              console.log("canplay");
              audio.play();
              console.log(1111);
        });
        console.log(audio.canPlayType("audio/mp3"));
        console.log(audio.readyState);
        if (audio.readyState==0) {
            console.log("readyState");
              audio.play();
        }
          
    </script>
</body>

然而手机上的音乐状态一直都是不自动播放，必须手动点击一下才能播放

阅读 15k

部分移动设备（IOS）浏览器有限制，需要被动（手动触摸）触发才能播放，亲测我的（Meizu）浏览器可以自动播放，（OPPO R9S）自带浏览器失败，微信内置浏览器是可以的，其它OPPO系列应该差不多，国产就是这样，都模仿，弄的我不得不吐槽了，搞的移动端和当初IE一个样儿了，真的是！

更新：

    <div>
        <audio controls="true" id="audio">
            <source src="http://i.dxlfile.com/app/music/27.mp3" />
            <!-- <source src="http://i.dxlfile.com/app/music/27.ogg" /> -->
            <!-- <source src="http://i.dxlfile.com/app/music/27.ogg" /> -->
        </audio>
        <a href="javascript:;" id="fakeClick"></a>
    </div>
    <script>
    var audio = document.getElementById("audio");
    var aEle = document.getElementById("fakeClick");

    aEle.addEventListener('click', function(e) {
        e.preventDefault();
        audio.play();
    })

    function fakeClick(fn) {
        var evt;
        if (document.createEvent) {
            evt = document.createEvent("MouseEvents");
            if (evt.initMouseEvent) {
                evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                aEle.dispatchEvent(evt);
            }
        }
    }

    audio.addEventListener("canplay", fakeClick);
    </script>

测试了一下模拟点击触发也不成功，最后无奈去apple开发者中心找了一下，发现了答案。
直接搬迁过来的原话：

User Control of Downloads Over Cellular Networks

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

This plays the movie: <input type="button" value="Play" onclick="document.myMovie.play()">

This does nothing on iOS: <body onload="document.myMovie.play()">

用我学了长达12年的英语翻译一下“就是不可以啦，需要用户主动去触发才得行啦”。好了，我能做的就是这么多了，其实我还手动测试了一下其他hack方法，最后也以失败告终，直接解决办法就是绑定一个触摸事件给最上层容器上，用户肯定要触摸滚动之类的啊，这样不得不就触发了。

音乐audio 的 play() 方法无效怎么补救。

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

快开发完的Vue3项目要做SEO该如何处理？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

音乐audio 的 play() 方法无效 怎么补救。

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

快开发完的Vue3项目要做SEO该如何处理？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

音乐audio 的 play() 方法无效怎么补救。