WebAudio-无缝播放音频块序列

Question

我有一个实时的，恒定的波形数据源，可为我提供每秒一秒钟的采样率恒定的单通道音频。目前，我以这种方式播放它们：

// 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);
}

音频可以正常播放，但是在连续播放的块之间有明显的暂停（如预期）。我想摆脱它们，而且我知道我必须引入某种缓冲。

问题：

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

Answer 1

您没有展示如何操作audioChunkReceived，但为了获得无缝播放，您必须确保在播放之前以及前一个停止播放之前拥有数据。

一旦有了这个，您就可以通过调用 start(t) 来安排最新的块在前一个块结束时开始播放，其中 t 是前一个块的结束时间。

但是，如果缓冲区采样率与 context.sampleRate 不同，则可能无法流畅播放，因为需要重新采样才能将缓冲区转换为上下文速率。

Answer 2

我已经在TypeScript中编写了一个小类，该类现在充当缓冲区。它定义了bufferSize，用于控制它可以容纳多少个块。它简短而具有自我描述性，因此我将其粘贴在此处。有很多改进，因此欢迎任何想法。

（您可以使用以下网址将其快速转换为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;
            }
        }
    }
}