音乐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>

clipboard.png

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

阅读 15k
5 个回答

部分移动设备(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方法,最后也以失败告终,直接解决办法就是绑定一个触摸事件给最上层容器上,用户肯定要触摸滚动之类的啊,这样不得不就触发了。

移动端好像有流量保护机制 所以要手动触发 只是一个猜想 不一定正确

可以确定的是,IOS设备肯定是不支持自动播放的,部分安卓系统是可以的。所以一般的做法是把自动播放绑到touch事件上。这样就可以了。

这很正常,看毛片都不会自动播放,录音也不会,但是电脑上又一切正常。

其实交互事件触发过就可以自动播放了

不知道楼主找到补救方法了没?能否提供一下解决思路

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题