如何将音频 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 服务器?