Web Audio API播放Blob URL无声音 寻求调试帮助

我用Web Audio API写了一个测试函数，可以正常播放Blob URL：

// 接收一个触发播放的回调函数
function loadSound(url, trigger) {
    let context = new (window.AudioContext || window.webkitAudioContext)();
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    // 异步解码音频
    request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
        trigger(()=>{
            // 播放音频
            var source = context.createBufferSource(); // 创建音源
            source.buffer = buffer;                    // 绑定音频数据
            source.connect(context.destination);       // 连接到输出设备
            source.start();
        });
    }, e=>{
        console.log(e);
    });
    }
    request.send();
}

loadSound(url, fc=>{
    window.addEventListener('click', fc);
});

但实际需要一个可直接调用、能停止当前播放音频的函数，于是写了第二个版本，触发正常但没有声音：

let ac;
function playSound(url) {
    if(ac){ac.suspend()}
    let context = new (window.AudioContext || window.webkitAudioContext)();
    let request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    // 异步解码音频
    request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
        // 播放音频
        let source = context.createBufferSource();  // 创建音源
        source.buffer = buffer; // 绑定音频数据
        source.connect(context.destination);    // 连接到输出设备
        // source.noteOn(0);    // 旧版播放API
        ac = context;
        source.start();
    }, e=>{
        console.log(e);
    });
    }
    request.send();
}

window.addEventListener('click',()=>{
    playSound(url);
});

怀疑是作用域问题，需要调试帮助。

问题原因 #

1. AudioContext激活规则不满足：浏览器要求AudioContext必须由用户交互（如点击）触发激活。第二个版本每次调用playSound都新建AudioContext，而音频解码完成后执行source.start()时，已经脱离了用户交互的上下文，新创建的context处于suspended状态，无法正常播放。
2. 错误的暂停逻辑：调用ac.suspend()只是暂停旧上下文，没有清理旧资源，且新上下文未绑定到用户交互的激活操作上。

修复后的代码 #

// 全局保存AudioContext和当前播放的音源
let audioContext;
let currentSource;

function playSound(url) {
    // 停止当前正在播放的音频
    if (currentSource) {
        try {
            currentSource.stop();
        } catch(e) {
            // 兼容已播放结束的音频，避免报错
        }
        currentSource = null;
    }

    // 复用AudioContext，避免重复创建
    if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
    }
    // 在用户交互上下文内恢复暂停的AudioContext
    if (audioContext.state === 'suspended') {
        audioContext.resume();
    }

    let request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    request.onload = function() {
        audioContext.decodeAudioData(request.response, function(buffer) {
            let source = audioContext.createBufferSource();
            source.buffer = buffer;
            source.connect(audioContext.destination);
            // 保存当前音源，用于后续停止操作
            currentSource = source;
            source.start();
            // 音频播放结束后清空音源引用
            source.onended = () => {
                currentSource = null;
            };
        }, e=>{
            console.error('音频解码失败:', e);
        });
    };

    request.onerror = function(e) {
        console.error('音频请求失败:', e);
    };

    request.send();
}

// 用户交互触发播放（符合浏览器AudioContext激活要求）
window.addEventListener('click',()=>{
    playSound(url);
});

关键修复点 #

• 复用AudioContext：避免重复创建上下文，减少资源消耗，同时确保上下文处于可激活状态。
• 显式恢复上下文：在用户交互触发的playSound函数内检查并恢复暂停的上下文，满足浏览器的交互激活规则。
• 精准控制音频停止：直接调用当前音源的stop()方法，而非暂停整个上下文，控制更精准。
• 资源清理：音频播放结束后清空音源引用，避免内存泄漏。

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