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

[zMoreFree]

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

[sentinelK]

“实时”的概念是什么？
对延时有要求？如果有的话，距离 websocket 推流之后多少毫秒必须要播放？

Web Audio API 哪点不满足？

[caiqichang]

webrtc ?

[lakehylia]

你不压缩一下么？ wav 的比特率太高了

[zMoreFree]

@sentinelK 延时在 2-3s 之内都可以的

[zMoreFree]

@caiqichang 不用 webrtc ，用 webrtc 还得走信令

[haah]

1 、backend 先将 capture 的音频转为 pcm int16 ；
2 、frontend 再通过 JS to wav float32 。

https://zhuanlan.zhihu.com/p/401715180

[haah]

data transmission 使用 base64 format 。

[Puteulanus]

我之前做过一个类似的，webrtc 录了音走 websocket 发走，服务端转一圈发给另一个客户端，然后在网页上放出来
源代码找不着了，记忆里好像是用了 AudioContext 和 AudioBufferSourceNode

[zMoreFree]

@haah 后端返回的流的格式就是 wav ，所以就不需要转换了吧，前端拿到流可以直接用 web audio api 播放把

[haah]

@zMoreFree wav 的 bit rate 太高，最佳实践是压缩。

[haah]

1 、backend 改成 return base64(pcm int16);
2 、frontend 参照 https://zhuanlan.zhihu.com/p/401715180 案例即可。

[zMoreFree]

@haah 我的场景是实时的，音频会不断的传过来，也就是说后端会隔一会传一个 base64 过来，前端怎么处理呢，你的案例是合成了 url 给 audio 标签，针对实时音频这种场景，你的方案肯定不可行吧

[haah]

@zMoreFree audio.onended = () => { 播放下一个 audio; }

[zMoreFree]

@haah 这种方案播放会流畅吗，比如一个字音，会分到两个 audio 上，是不是会有问题呢

[haah]

你试下不就知道了么！！！！！！！！！！
你试下不就知道了么！！！！！！！！！！
你试下不就知道了么！！！！！！！！！！
你试下不就知道了么！！！！！！！！！！

[Eension]

实时也就是要转流了吧，那除了后端转，别的都不是很好的方案

[zMoreFree]

已经解决，wav 文件格式，流的格式其实 PCM ；后端通过 websocket 发送二进制流，前端可以用 pcm-player 播放