将 AudioBuffer 发送到扬声器答案

【问题标题】：Send AudioBuffer to Speaker将 AudioBuffer 发送到扬声器
【发布时间】：2020-09-28 00:05:31
【问题描述】：

这是我想做的：

将麦克风音频发送到 AudioWorketProcessor（工作）
使用 WebSockets 从 AudioWorkletProcessor 将结果发送到服务器（工作）
通过 WebSockets 接收数据（工作）
向计算机的扬声器发送数据（怎么做？）

除了我不知道如何实现 #4 之外，一切正常。这就是我所拥有的，简化了一些事情以专注于问题：

//1.设置音频上下文的代码。将麦克风连接到工作集

    const audioContext = new AudioContext({ sampleRate: 8000 });
    audioContext.audioWorklet.addModule('/common/recorderworkletprocess.js').then(
        function () {
            const recorder = new AudioWorkletNode(audioContext, 'recorder-worklet');
            let constraints = { audio: true };
            navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                const microphone = audioContext.createMediaStreamSource(stream);
                microphone.connect(recorder);
                recorder.connect(audioContext.destination);
            });
        }
    );

//2. AudioWorklet 处理器。将音频发送到 WebSocket，WebSocket 将其作为二进制发送到服务器：

  class RecorderWorkletProcessor extends AudioWorkletProcessor {
     constructor() {
        super();
     }
     process(inputs) {
        const inputChannel = inputs[0][0];  //inputChannel Float32Array(128)
        socket.send(inputChannel);  // sent as byte[512]
        return true;
     }
  }
  registerProcessor('recorder-worklet', RecorderWorkletProcessor);

//3 和 4. 最后，服务器完全按照收到的数据发回。 WebSocket 将其转换为 ArrayBuffer(512)。在这里，我想尽一切努力将其作为音频输出到计算机的扬声器：

socket.messageReceived = function (evt) {
// evt.data contains an ArrayBuffer with length of 512
// I want this to be played on the computer's speakers. How to do this?
  }

任何指导将不胜感激。

【问题讨论】：

嘿，我正在尝试重现类似的情况，但一直无法访问 AudioWorkletProcessor 中的 WebSocket。在您的代码中，您有 process(inputs) { const inputChannel = inputs[0][0]; //inputChannel Float32Array(128) socket.send(inputChannel); // 发送为 byte[512] return true;您是如何访问 socket.send 的？每当我尝试从 AudioWorkletProcessor 类中启动 WebSocket 的新实例时，我都会收到未定义 WebSocket 的错误。
这只是一个标准的 WebSocket 连接。只需建立一个连接并确保它在范围内。
我遇到的问题是在 AudioWorkletProcessor 范围内获取 WebSocket 连接。如果我尝试在 AudioWorkletProcessor 类中定义它，或者如果我尝试使用 options.processorOptions 传递 WebSocket 连接，我会不断收到 WebSocket is not defined at AudioWorkletProcessor.process 的错误，它说它不能被克隆。如果你不介意我问，你能展示你用来让 websocket 在你的 AudioWorkletProcessor 中工作的代码吗？谢谢。

标签： javascript websocket audiocontext audio-worklet

【解决方案1】：

好的，我相信我可以回答我的问题。这并不可靠，但它提供了我需要知道的内容。

  socket.messageReceived = function (evt) {
     // evt.data contains an ArrayBuffer with length of 512
     // I want this to be played on the computer's speakers. How to do this?
     let fArr = new Float32Array(evt.data);
     let.buf = audioContext.createBuffer(1, 128, 8000);
     buf.copyToChannel(fArr, 0);
     let player = audioContext.createBufferSource();
     player.buffer = buf;
     player.connect(audioContext.destination);    
     player.start(0);
  }

【讨论】：

我尝试了您的示例，但遇到了问题。声音是机器人。你也遇到过这个问题吗？我觉得它与缓冲区有关。我尝试直接从worklet播放，和从socket播放没有区别。
不，我没有经历过。