有偿求教,前端怎么实时播放 wav 格式的音频,注意是实时播放

301 天前
 zMoreFree

目前和后端约定的是,后端采集到音频后,通过 websocket 不断的将音频流发送到前端。 前端可以接收到 ArrayBuffer 的二进制流数据,然后怎么实现播放呢 目前自测本地读取一个 3M 左右的 wav 文件,每次读 500kb,然后播放失败, 如果你感兴趣,可以加我微信 qdys-yxh,酬劳问题私聊,有知道的希望给点建议,不胜感感激。

1358 次点击
所在节点    前端开发
17 条回复
sentinelK
301 天前
“实时”的概念是什么?
对延时有要求?如果有的话,距离 websocket 推流之后多少毫秒必须要播放?

Web Audio API 哪点不满足?
caiqichang
301 天前
webrtc ?
lakehylia
301 天前
你不压缩一下么? wav 的比特率太高了
zMoreFree
301 天前
@sentinelK 延时在 2-3s 之内都可以的
zMoreFree
301 天前
@caiqichang 不用 webrtc ,用 webrtc 还得走信令
haah
301 天前
1 、backend 先将 capture 的音频转为 pcm int16 ;
2 、frontend 再通过 JS to wav float32 。

https://zhuanlan.zhihu.com/p/401715180
haah
301 天前
data transmission 使用 base64 format 。
Puteulanus
301 天前
我之前做过一个类似的,webrtc 录了音走 websocket 发走,服务端转一圈发给另一个客户端,然后在网页上放出来
源代码找不着了,记忆里好像是用了 AudioContext 和 AudioBufferSourceNode
zMoreFree
301 天前
@haah 后端返回的流的格式就是 wav ,所以就不需要转换了吧,前端拿到流可以直接用 web audio api 播放把
haah
301 天前
@zMoreFree wav 的 bit rate 太高,最佳实践是压缩。
haah
301 天前
1 、backend 改成 return base64(pcm int16);
2 、frontend 参照 https://zhuanlan.zhihu.com/p/401715180 案例即可。
zMoreFree
301 天前
@haah 我的场景是实时的,音频会不断的传过来,也就是说后端会隔一会传一个 base64 过来,前端怎么处理呢,你的案例是合成了 url 给 audio 标签,针对实时音频这种场景,你的方案肯定不可行吧
haah
301 天前
@zMoreFree audio.onended = () => { 播放下一个 audio; }
zMoreFree
301 天前
@haah 这种方案播放会流畅吗,比如一个字音,会分到两个 audio 上,是不是会有问题呢
haah
301 天前
你试下不就知道了么!!!!!!!!!!
你试下不就知道了么!!!!!!!!!!
你试下不就知道了么!!!!!!!!!!
你试下不就知道了么!!!!!!!!!!
Eension
301 天前
实时也就是要转流了吧,那除了后端转,别的都不是很好的方案
zMoreFree
299 天前
已经解决,wav 文件格式,流的格式其实 PCM ;后端通过 websocket 发送二进制流,前端可以用 pcm-player 播放

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1018460

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX