PixiJS Sprite在Safari中pointerup事件播放音频遭拒绝问题

问题原因 #

现代浏览器的自动播放政策有严格限制：音频/视频的播放必须由用户的主动交互行为直接触发（比如点击、按下鼠标这类明确的用户操作）。

你代码里的pointerdown是用户直接点击Sprite触发的，属于浏览器认可的主动交互，所以音频能正常播放；但pointerup/pointerupoutside绑定在stage上，当用户松开鼠标触发stage的事件时，浏览器可能判定这个操作不属于“用户主动发起的直接交互”，或者不在之前pointerdown的信任交互上下文里，因此拒绝音频播放请求。

解决方案 #

核心思路是在用户第一次主动交互时获取音频播放权限，后续再调用播放就不会被阻止，推荐以下两种可靠方法：

方法1：提前初始化并复用Audio实例 #

在用户第一次触发pointerdown时，创建Audio实例并完成加载，甚至短暂播放后暂停来获取权限，后续在pointerup里直接复用这个实例播放：

// 全局/模块级变量存储音频实例
let clickAudio = null;

function onDragStart() {
    // 首次触发时初始化音频
    if (!clickAudio) {
        clickAudio = new Audio('1.mp3');
        clickAudio.load(); // 预加载避免播放延迟
        // 短暂播放后暂停，触发浏览器授予播放权限
        clickAudio.play().then(() => clickAudio.pause());
    }
    // 重置播放位置并播放
    clickAudio.currentTime = 0;
    clickAudio.play();
}

function onDragEnd() {
    if (clickAudio) {
        clickAudio.currentTime = 0;
        clickAudio.play();
    }
}

方法2：标记交互序列完整性 #

在pointerdown时标记拖拽状态，pointerup时检查状态，让浏览器认为这是同一个交互序列的一部分：

let isDragging = false;

function onDragStart() {
    isDragging = true;
    new Audio('1.mp3').play();
}

function onDragEnd() {
    if (isDragging) {
        isDragging = false;
        new Audio('1.mp3').play();
    }
}

注：方法2兼容性略逊于方法1，不同浏览器对交互序列的判定标准可能有差异，优先推荐方法1。

额外提示 #

• 尽量复用Audio实例，不要每次播放都创建新实例，既节省资源也能规避权限问题
• 复杂场景可考虑使用Web Audio API，它的权限控制更灵活，但学习成本稍高

内容的提问来源于stack exchange，提问作者lam fan