页面上多个 APlayer 实例的互斥控制

为什么需要互斥

一个页面上可能同时存在多个 APlayer：比如一个吸底播放器 + 文章内的几个迷你播放器。默认情况下，APlayer 的 mutex 参数设为 true，这意味着同一时间只允许一个播放器在播放——当你开始播放第二个时，第一个会自动暂停。

这是用户体验层面的考虑：谁也不希望两个音乐同时响起来。

mutex 参数

// 实例一：吸底播放器
const ap1 = new APlayer({
    container: document.getElementById('fixed-player'),
    fixed: true,
    mutex: true,  // 参与互斥
    audio: [...]
});

// 实例二：文章内嵌播放器
const ap2 = new APlayer({
    container: document.getElementById('inline-player'),
    mutex: true,  // 也参与互斥
    audio: [...]
});

// 实例三：一个不参与互斥的独立播放器
const ap3 = new APlayer({
    container: document.getElementById('background-player'),
    mutex: false,  // 不参与互斥——永远可以单独播放
    audio: [...]
});

互斥的工作原理

当 ap1 开始播放时，APlayer 内部会遍历页面上所有设置了 mutex: true 的实例，调用它们的 pause() 方法。mutex: false 的实例不会被影响。

具体来说，ap1.play() 执行时会：

1. 播放自己
2. 找到 ap2（mutex: true），调用 ap2.pause()
3. 跳过 ap3（mutex: false），不动它

典型场景：全站吸底 + 文章内嵌

// 全站吸底播放器（在页面模板中初始化）
const globalPlayer = new APlayer({
    container: document.getElementById('global-player'),
    fixed: true,
    mutex: true,
    audio: globalPlaylist
});

// 文章内嵌播放器（动态创建）
function createArticlePlayer(containerId, audioData) {
    const player = new APlayer({
        container: document.getElementById(containerId),
        mutex: true,  // 与全站播放器互斥
        audio: audioData
    });
    return player;
}

// 当用户点击文章内播放器时，全站吸底自动暂停
// 当用户点击全站吸底时，文章内播放器自动暂停

如何让特定播放器不互斥

如果你想某个播放器"永远在后台播放"（比如背景音乐），把它的 mutex 设为 false：

// 背景音乐播放器
const bgm = new APlayer({
    container: document.getElementById('bgm'),
    mutex: false,  // 不和任何播放器互斥
    autoplay: false,  // 但浏览器仍然会阻止自动播放
    audio: [{
        name: '背景音乐',
        artist: '环境音',
        url: 'bgm.mp3'
    }]
});

注意：mutex: false 不会帮你绕过浏览器的自动播放限制。背景音乐仍然需要用户先交互才能开始播放。

手动管理多实例

你也可以自己不依赖 mutex，通过事件来手动控制：

const players = [ap1, ap2, ap3];
let currentPlaying = null;

players.forEach(function(ap) {
    ap.on('play', function() {
        if (currentPlaying && currentPlaying !== ap) {
            currentPlaying.pause();
        }
        currentPlaying = ap;
    });

    ap.on('pause', function() {
        if (currentPlaying === ap) {
            currentPlaying = null;
        }
    });
});

这种方式比 mutex 更灵活——你可以定义自己的优先级或规则。但在绝大多数场景下，mutex: true 就够用了。