移动端audio标签问题

Question

目前已知ios系统中的audio标签必须用户触发点击事件才能生效，那么这个问题要如何解决呢

Answer 1

ios安全方面做的比较好，点击事件只有用户进行触摸才能触发，暂时没法解决

Answer 2

是的，ios无法自动播放，，，我之前也遇到过，只能监听document的点击事件。。。

Answer 3

然而，该方案只是在微信内置浏览器生效，且微信内置浏览器中做了处理，可以实现自动播放，只需在微信 JS SDK ready 回调事件中触发即可。

---

iOS 最新的 Android 都是这个策略，为了避免页面自动播放浪费用户流量。
首先给你的页面 document 绑定一个click之类的事件，该事件中去调用 audio 的 play 方法，然后在代码里面手动触发一下 click 。

// music fix 自动播放
$(function () {
    if ("wView" in window) {
        window.wView.allowsInlineMediaPlayback = "YES";
        window.wView.mediaPlaybackRequiresUserAction = "NO";
    }
 
    var bgMusic = document.getElementById("bgMusic");
    var $MusicControl = $("#musicControl");
 
    $MusicControl.on("touchstart", function (event) {
        event.preventDefault();
 
        if ($(this).hasClass("play")) {
            $(this).removeClass("play").addClass("stop");
            bgMusic.pause();
        } else if ($(this).hasClass("stop")) {
            $(this).removeClass("stop").addClass("play");
            bgMusic.play();
        }
        return false;
    });
 
    $(document).on("touchstart", function () {
        if (($MusicControl.hasClass("play")) && bgMusic.paused) {
            bgMusic.play();
        }
    });
 
    bgMusic.addEventListener("canplay", function () {
        $(document).trigger("touchstart");
    }, false);
 
    if (window.WeixinJSBridge) {
        wx.getNetworkType({
            success: function (res) {
                $(document).trigger("touchstart");
            },
            fail: function (res) {
                $(document).trigger("touchstart");
            }
        });
    }else{
        document.addEventListener("WeixinJSBridgeReady", function() {
            wx.getNetworkType({
                success: function (res) {
                    $(document).trigger("touchstart");
                },
                fail: function (res) {
                    $(document).trigger("touchstart");
                }
            });
        }, false);
    }
 
    bgMusic.addEventListener("load", function () {
        $(document).trigger("touchstart");
    },false);
});