javascript - WebAudio - 无缝播放音频 block 序列

Question

我有一个实时的、恒定的波形数据源，每秒以恒定的采样率为我提供一秒钟的单 channel 音频。目前我是这样玩的:

// data : Float32Array, context: AudioContext
function audioChunkReceived (context, data, sample_rate) { 
    var audioBuffer = context.createBuffer(2, data.length, sample_rate);
    audioBuffer.getChannelData(0).set(data);
    var source = context.createBufferSource(); // creates a sound source
    source.buffer = audioBuffer;
    source.connect(context.destination);
    source.start(0);
}

音频播放正常，但在连续播放的 block 之间有明显的停顿(如预期)。我想摆脱它们，我知道我必须引入某种缓冲。

问题:

• 是否有可以为我做这件事的 JS 库？ (我正在搜索它们)
• 如果没有图书馆可以做到这一点，我应该如何自己做？
• 检测一个源的播放何时结束并让另一个源准备好在之后立即播放？ (使用 AudioBufferSourceNode.onended 事件处理程序)
• 创建一个大缓冲区并一个接一个地复制我的音频 block 并使用 AudioBufferSourceNode.start AudioBufferSourceNode.stop 函数控制流？
• 有什么不同吗？

Answer 1

我已经用 TypeScript 编写了一个小类，暂时用作缓冲区。它定义了 bufferSize 来控制它可以容纳多少 block 。它简短且 self 描述，所以我将其粘贴在这里。还有很多需要改进的地方，欢迎提出任何想法。

(您可以使用以下命令快速将其转换为 JS:https://www.typescriptlang.org/play/)

class SoundBuffer {
    private chunks : Array<AudioBufferSourceNode> = [];
    private isPlaying: boolean = false;
    private startTime: number = 0;
    private lastChunkOffset: number = 0;

    constructor(public ctx:AudioContext, public sampleRate:number,public bufferSize:number = 6, private debug = true) { }

    private createChunk(chunk:Float32Array)  {
        var audioBuffer = this.ctx.createBuffer(2, chunk.length, this.sampleRate);
        audioBuffer.getChannelData(0).set(chunk);
        var source = this.ctx.createBufferSource();
        source.buffer = audioBuffer;
        source.connect(this.ctx.destination);
        source.onended = (e:Event) => { 
            this.chunks.splice(this.chunks.indexOf(source),1);
            if (this.chunks.length == 0) {
                this.isPlaying = false;
                this.startTime = 0;
                this.lastChunkOffset = 0;
            }
        };

        return source;
    }

    private log(data:string) {
        if (this.debug) {
            console.log(new Date().toUTCString() + " : " + data);
        }
    }

    public addChunk(data: Float32Array) {
        if (this.isPlaying && (this.chunks.length > this.bufferSize)) {
            this.log("chunk discarded");
            return; // throw away
        } else if (this.isPlaying && (this.chunks.length <= this.bufferSize)) { // schedule & add right now
            this.log("chunk accepted");
            let chunk = this.createChunk(data);
            chunk.start(this.startTime + this.lastChunkOffset);
            this.lastChunkOffset += chunk.buffer.duration;
            this.chunks.push(chunk);
        } else if ((this.chunks.length < (this.bufferSize / 2)) && !this.isPlaying) {  // add & don't schedule
            this.log("chunk queued");
            let chunk = this.createChunk(data);
            this.chunks.push(chunk);
        } else  { // add & schedule entire buffer
            this.log("queued chunks scheduled");
            this.isPlaying = true;
            let chunk = this.createChunk(data);
            this.chunks.push(chunk);
            this.startTime = this.ctx.currentTime;
            this.lastChunkOffset = 0;
            for (let i = 0;i<this.chunks.length;i++) {
                let chunk = this.chunks[i];
                chunk.start(this.startTime + this.lastChunkOffset);
                this.lastChunkOffset += chunk.buffer.duration;
            }
        }
    }
}