如何从javascript发送音频blob到java spring服务器？

Question

我正在使用我的javascript客户端录制一些音频数据RecordRTC.我想这个音频数据发送到我的春天RestController通过WebSockets.

录制后我的javascript客户端中有一个blob对象: Blob {size: 65859, type: "audio/webm"}

我试图将此blob转换为使用FileReader它的ArrayBuffer对象ArrayBuffer {} byteLength: 65859

我发送ArrayBuffer的javascript代码如下所示:

    const reader = new FileReader();
    reader.addEventListener( 'loadend', () => {
        console.log( 'readerResult', reader.result );
        this.stompClient.send( "/app/hello", {}, reader.result );
    } );

    this.recorder.stopRecording(() => {
        const blob = this.recorder.getBlob();
        reader.readAsArrayBuffer( blob );
        console.log( "blob", blob );
    } );

我的Spring Boot应用程序中的WebSocket端点如下所示:

@MessageMapping("/hello")
public void stream(byte[] input) throws Exception {
    System.out.println("incoming message ...");
    System.out.println(input);
    System.out.println(input.length);
}

这是控制台输出:

incoming message ...
[B@6142acb4
20

我的服务器中的bytearray只包含20个字节,看起来只有元数据被传输？

如何将录制的Blob传输到我的Spring服务器并创建它的(webm)文件？我是否必须更改端点的参数？

Answer 1

我建议你使用下面的代码为你的音频blob创建base64字符串:

 var reader = new FileReader();
 var base64data;
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
      base64data = reader.result;                
      console.log(base64data);
  }

你会得到这样的base64字符串:

data:audio/webm;base64,T2dnUwACAAAAAAAAAAAyzN3N....

现在在您的后端将您的流方法代码更改为:

@MessageMapping("/hello")
public void stream(String base64Audio) throws Exception {
        System.out.println("incoming message ...");
        Decoder decoder = Base64.getDecoder();
        byte[] decodedByte = decoder.decode(base64Audio.split(",")[1]);
        FileOutputStream fos = new FileOutputStream("MyAudio.webm");
        fos.write(decodedByte);
        fos.close();
}