javascript - 音乐audio 的 play() 方法无效怎么补救。-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

PHP中文网 2017-04-11 11:12:10

[JavaScript讨论组]

1138

<body>
    <p>
        <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>
    </p>
    <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>

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

PHP中文网

认证高级PHP讲师

全部回复(5)

伊谢尔伦2017-04-11 11:14:10 5楼

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

更新：

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