Javascript – 使用AudioContext播放音频

1 Javascript使用AudioContext播放音频

JS中可通过AudioContext管理和播放声音，以下代码可以创建一个AudioContext对象

try {
    var audio_context = new AudioContext();
} catch (e) {
    alert ('Web Audio API is not supported in this browser');
}

在创建AudioContext对象之后，在Web Audio API中使用AudioBuffer保存声音文件的buffer，可以通过XMLHttpRequest的方法获取音频文件数据，可支持WAV、MP3、AAC、OGG等音频数据格式，以下代码说明了如何使用XMLHttpRequest加载音频数据到AudioBuffer对象中

    // 从远程url下载声音二进制数据
    function loadAudioFileFromUrl(url) {
        var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function(e) { //下载完成
            initSound(this.response);
        };
        xhr.send();
    }
    // 初始化声音数据
    function initSound(arrayBuffer) {
        audio_context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数
            audio_buffer = buffer;
            playSound();
        }, function(e) { //解码出错时的回调函数
            console.log('Error decoding file', e);
        });
    }

音频数据是二进制数据，而不是文本数据，所以将XMLHttpRequest的responseType设置为arraybuffer。在请求完成接收到音频数据之后，使用AudioContext的decodeAudioData方法对音频二进制数据进行解码，此方法会获取存储在 request.response 中的音频二进制数据的 ArrayBuffer 并对其进行异步解码，不会阻塞主 JavaScript 执行线程。在解码完成之后，会触发回调函数，返回已经解码的PCM音频数据。

在解码音频数据被解码完成之后，之后就是控制音频的播放与停止播放了，以下的代码演示了如何开始播放音频和停止播放音频

    // 播放声音
    function playSound() {
        if(audio_buffer)
        {
            audio_buffer_source = audio_context.createBufferSource();
            audio_buffer_source.buffer = audio_buffer;
            audio_buffer_source.loop = true; //循环播放
            audio_buffer_source.connect(audio_context.destination);
            audio_buffer_source.start(0); //立即播放，或者使用audio_buffer_source.noteOn(0);
        }
    }

    // 立即停止播放声音
    function stopSound() {
        if (audio_buffer_source) {
            audio_buffer_source.stop(0); //
        }
    }

完整的示例代码如下

try {
    var audio_context = new AudioContext();
    var audio_buffer_source = null;
    var audio_buffer = null;

    // 从远程url下载声音二进制数据
    function loadAudioFileFromUrl(url) {
        var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function(e) { //下载完成
            initSound(this.response);
        };
        xhr.send();
    }

    // 初始化声音数据
    function initSound(arrayBuffer) {
        audio_context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数
            audio_buffer = buffer;
            playSound();
        }, function(e) { //解码出错时的回调函数
            console.log('Error decoding file', e);
        });
    }

    // 播放声音
    function playSound() {
        if(audio_buffer)
        {
            audio_buffer_source = audio_context.createBufferSource();
            audio_buffer_source.buffer = audio_buffer;
            audio_buffer_source.loop = true; //循环播放
            audio_buffer_source.connect(audio_context.destination);
            audio_buffer_source.start(0); //立即播放，或者使用audio_buffer_source.noteOn(0);
        }
    }

    // 立即停止播放声音
    function stopSound() {
        if (audio_buffer_source) {
            audio_buffer_source.stop(0); //
        }
    }


} catch (e) {
    alert ('Web Audio API is not supported in this browser');
}

参考

• https://web.dev/articles/webaudio-intro?hl=zh-cn
• https://www.cnblogs.com/ezhar/p/13267754.html