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

Posted

技术标签:

【中文标题】如何将音频 blob 从 javascript 发送到 java spring 服务器?【英文标题】:How to send audio blob from javascript to java spring server? 【发布时间】:2018-01-21 07:37:08 【问题描述】:

我正在使用RecordRTC 在我的javascript 客户端中录制一些音频数据。我想通过WebSockets将此音频数据发送到我的Spring RestController

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

我尝试使用 FileReader 将此 blob 转换为 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) 文件?我必须更改端点的参数吗?

【问题讨论】:

你在哪里打电话给.readAsArrayBuffer() @guest271314 在我的 stopRecording() 方法中,当我从记录器中获取 blob 时。我将 sn-p 添加到我的帖子中 System.out.println(input) 的预期结果是什么? 【参考方案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();

【讨论】:

它工作正常。非常感谢。我打算将音频块作为二进制发送,但我刚刚意识到 base64 字符串只是比 blob 稍大。

以上是关于如何将音频 blob 从 javascript 发送到 java spring 服务器?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 javascript 将 wav blob 转换为其他音频类型?

如何在给定 blob url 的情况下将大型音频文件上传到 django 服务器?

如何流式传输 blob

如何从 Angular 6 中的 blob URL 下载音频文件?

如何将blob url数据保存在目录中

如何将 Blob 对象从 javascript 传递到 Android?