修复JS audio音频代码iPhone端无声音、Android端正常的兼容问题

问题原因 #

iOS端音频播放逻辑和安卓存在核心差异，会直接导致现有代码失效：

• iOS对Web音频有严格的自动播放限制：非用户主动交互触发的音频播放、未配置行内播放属性的音频元素，都会被系统静默拦截，不会抛出显性错误，现有代码没有添加iOS要求的行内播放配置，直接调用play()会直接被拦截。
• 代码重复调用play()：初始化时同步调用一次n.play()，canplaythrough事件触发时又调用一次，iOS下重复触发播放会导致播放状态混乱，直接中断流程。
• DOM挂载顺序问题：部分iOS版本不支持对未插入DOM树的audio元素设置srcObject媒体流，赋值后不会正常加载资源。
• 未捕获play方法的Promise异常：现代浏览器play()方法返回Promise，iOS下播放被拦截时会返回reject状态，未做捕获会直接中断后续逻辑。
• 非静音音频必须由用户交互触发：如果传入的t参数为false（即非静音状态），iOS不允许在异步回调、页面加载阶段直接启动播放，必须提前解锁音频权限。

修复后完整代码 #

// 全局标记iOS音频权限是否已解锁
let isIOSAudioUnlocked = false;
// 全局一次性音频解锁方法，绑定在用户首次交互事件上执行
function unlockIOSAudio() {
    if (isIOSAudioUnlocked) return;
    const emptyAudio = new Audio();
    emptyAudio.muted = true;
    emptyAudio.play().then(() => {
        isIOSAudioUnlocked = true;
        document.removeEventListener('touchstart', unlockIOSAudio);
        document.removeEventListener('click', unlockIOSAudio);
    }).catch(() => {});
}
// 页面初始化时绑定解锁事件
document.addEventListener('touchstart', unlockIOSAudio, { once: true });
document.addEventListener('click', unlockIOSAudio, { once: true });

function fq(e, t, o) {
    var n = document.createElement("audio");
    // 添加iOS、微信X5内核强制要求的行内播放属性，禁止被原生全屏播放器劫持
    n.setAttribute('playsinline', 'true');
    n.setAttribute('webkit-playsinline', 'true');
    n.setAttribute('x5-playsinline', 'true');
    n.muted = t;
    n.autoplay = true;

    // 先挂载元素到DOM，再设置媒体流，兼容旧版本iOS
    $(n).appendTo(e);
    n.srcObject = o;

    n.onpause = function() {
        var t = $(n).parent().find(".evant>#showpf i.sounds")[0];
        $(t).text("Audio playback");
        e.removeClass('is_speaking');
    };

    n.onplay = function() {
        var t = $(n).parent().find(".evant>#showpf i.sounds")[0];
        $(t).text("turn off the sound");
        e.addClass('is_speaking');
    };

    n.addEventListener("ended", () => {
        e.removeClass('is_speaking');
    });

    n.addEventListener("canplay", () => {
        e.addClass('is_speaking');
    });

    // 封装安全播放方法，捕获iOS下的播放拦截异常
    const safePlay = () => {
        const playPromise = n.play();
        if (playPromise !== undefined) {
            playPromise.catch(err => {
                // 播放被拦截时，等待用户下次交互自动重试
                const retryPlay = () => {
                    n.play().catch(() => {});
                    document.removeEventListener('touchstart', retryPlay);
                    document.removeEventListener('click', retryPlay);
                };
                document.addEventListener('touchstart', retryPlay, { once: true });
                document.addEventListener('click', retryPlay, { once: true });
            });
        }
    };

    n.addEventListener("canplaythrough", safePlay);
    // 音频已解锁时直接触发播放，无需等待canplaythrough事件
    if (isIOSAudioUnlocked) safePlay();
}

关键修复点说明 #

• 新增全局iOS音频解锁逻辑：用户首次和页面交互时播放一个静音空音频，解锁全局音频播放权限，是iOS端音频自动播放的通用兼容方案。
• 补全全平台行内播放属性，避免音频被系统原生播放器劫持导致播放失败。
• 调整执行顺序：先插入audio元素到DOM，再赋值srcObject，兼容低版本iOS的媒体流加载逻辑。
• 封装安全播放方法，捕获播放拦截异常，被拦截时自动绑定一次性用户交互事件重试，不会出现完全无响应的情况。
• 移除初始化阶段重复的同步play()调用，避免播放状态冲突。
• 清理了原回调中重复给按钮文案赋值的冗余逻辑。

内容的提问来源于stack exchange，提问作者Mohammed Baqer