移动端自动播放失败问题排查

现象

代码里明明写了 autoplay: true，但页面加载后播放器就是不自动响起来。桌面浏览器偶尔还行，手机浏览器100%不工作。

根本原因

移动端浏览器（iOS Safari、Android Chrome、微信内置浏览器）全部默认禁止无用户交互的音频自动播放。这是浏览器层面的硬性策略，不是 bug。

各浏览器策略速查

移动端的微信内置浏览器尤其严格，几乎禁止一切自动播放。

可行的解决思路

方案一：首次交互触发

监听页面上的第一次点击或触摸，在回调里调用 ap.play()：

function firstTouch() {
    ap.play();
    document.removeEventListener('touchstart', firstTouch);
    document.removeEventListener('click', firstTouch);
}

document.addEventListener('touchstart', firstTouch);
document.addEventListener('click', firstTouch);

方案二：引导用户点击

在播放器旁边放一个显眼的"点击开始播放"按钮：

<button id="start-play">▶ 点击播放音乐</button>
<div id="aplayer"></div>

<script>
    document.getElementById('start-play').addEventListener('click', function() {
        ap.play();
        this.style.display = 'none';
    });
</script>

方案三：静音自动 + 首次交互取消静音

const ap = new APlayer({
    autoplay: true,   // 尝试自动播放（大概率会被阻止）
    volume: 0,        // 初始静音
    audio: [...]
});

document.addEventListener('click', function() {
    if (ap.audio.volume === 0) {
        ap.volume(0.7);
    }
}, { once: true });

检测自动播放是否成功

用 play 和 pause 事件来判断：

let autoPlaySucceeded = false;

ap.on('play', function() {
    autoPlaySucceeded = true;
});

// 页面加载 1 秒后检查
setTimeout(function() {
    if (!autoPlaySucceeded) {
        // 自动播放被阻止了，显示引导按钮
        document.getElementById('play-gate').style.display = 'block';
    }
}, 1000);

常见误区

"为什么桌面浏览器有时可以有时不行？"

Chrome 桌面版的策略是：如果用户之前访问过你的站点并且有过媒体交互，下次就允许自动播放。这就是为什么你自己电脑上自动播放成功了，但新访客打开同样的页面不行。

"能不能用 <audio> 标签的 autoplay + muted 属性绕过？"

APlayer 内部创建 audio 元素，你控制不到原生属性。但 APlayer 自己没有暴露独立的 muted 参数——只有通过 volume: 0 来实现静音。加上 autoplay: true 就能在部分浏览器触发静音自动播放。

"为什么微信里特别难用？"

微信内置浏览器比系统浏览器更严格。如果你的页面主要面向微信用户，推荐放弃自动播放，让用户自己点。

总结

移动端自动播放在绝大多数场景下是"不可能完成的任务"。最佳实践是接受这个限制，用引导按钮或首次交互触发的方式让用户主动开始播放。这反而给用户更好的体验——没有人希望打开一个新页面就被音乐突然吓一跳。