自定义MediaStream

Question

我通过websockets接收原始float32音频,并希望在浏览器中播放.根据我的理解,我需要使用MediaStream API.但是,我找不到一种方法来创建一个可以附加数据缓冲区的MediaStream.

实现这个目标的正确方法是什么？

我正在尝试这样的事情:

    var context = new AudioContext();

    context.sampleRate = 48000;

    var stream = null; // ????

    var source = context.createMediaStreamSource(stream);
    source.connect(context.destination);
    source.start(0);

    socket.onmessage = function (event) {
        stream.appendBuffer(new Float32Array(event.data)); // ????
    };

Answer 1

您应该使用AudioBuffers从 websocket 的缓冲区读取声音并播放。

var context = new AudioContext();
var sampleRate = 48000;
var startAt = 0;

socket.onmessage = function (event) {
    var floats = new Float32Array(event.data);
    var source = context.createBufferSource();
    var buffer = context.createBuffer(1, floats.length, sampleRate);
    buffer.getChannelData(0).set(floats);
    source.buffer = buffer;
    source.connect(context.destination);
    startAt = Math.max(context.currentTime, startAt);
    source.start(startAt);
    startAt += buffer.duration;
};

这会从网络套接字播放音乐。

要将 AudioBuffer 转换为 MediaStream，请使用AudioContext.createMediaStreamDestination(). 将 BufferSource 连接到它以根据缓冲区的数据创建自定义 MediaStream。

var data = getSound(); // Float32Array;
var sampleRate = 48000;
var context = new AudioContext();

var streamDestination = context.createMediaStreamDestination();
var buffer = context.createBuffer(1, data.length, sampleRate);
var source = context.createBufferSource();

buffer.getChannelData(0).set(data);
source.buffer = buffer;
source.connect(streamDestination);
source.loop = true;
source.start();

var stream = streamDestination.stream;

这将从数据数组中读取音频并将其转换为 MediaStream。