zMoreFree

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

  •  
  •   zMoreFree · Feb 26, 2024 · 2688 views
    This topic created in 980 days ago, the information mentioned may be changed or developed.

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

    17 replies  •  2024-02-29 09:20:17 +08:00
    sentinelK
    sentinelK
    Feb 26, 2024
    1
    “实时”的概念是什么?
    对延时有要求?如果有的话,距离 websocket 推流之后多少毫秒必须要播放?

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

    https://zhuanlan.zhihu.com/p/401715180
    haah
    haah
    Feb 26, 2024
    7
    data transmission 使用 base64 format 。
    Puteulanus
    Puteulanus
    Feb 26, 2024
    8
    我之前做过一个类似的,webrtc 录了音走 websocket 发走,服务端转一圈发给另一个客户端,然后在网页上放出来
    源代码找不着了,记忆里好像是用了 AudioContext 和 AudioBufferSourceNode
    zMoreFree
    zMoreFree
    OP
    Feb 26, 2024
    9
    @haah 后端返回的流的格式就是 wav ,所以就不需要转换了吧,前端拿到流可以直接用 web audio api 播放把
    haah
    haah
    Feb 26, 2024
    10
    @zMoreFree wav 的 bit rate 太高,最佳实践是压缩。
    haah
    haah
    Feb 26, 2024
    11
    1 、backend 改成 return base64(pcm int16);
    2 、frontend 参照 https://zhuanlan.zhihu.com/p/401715180 案例即可。
    zMoreFree
    zMoreFree
    OP
    Feb 26, 2024
    12
    @haah 我的场景是实时的,音频会不断的传过来,也就是说后端会隔一会传一个 base64 过来,前端怎么处理呢,你的案例是合成了 url 给 audio 标签,针对实时音频这种场景,你的方案肯定不可行吧
    haah
    haah
    Feb 26, 2024
    13
    @zMoreFree audio.onended = () => { 播放下一个 audio; }
    zMoreFree
    zMoreFree
    OP
    Feb 26, 2024
    14
    @haah 这种方案播放会流畅吗,比如一个字音,会分到两个 audio 上,是不是会有问题呢
    haah
    haah
    Feb 26, 2024❤️4
    15
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    Eension
    Eension
    Feb 26, 2024
    16
    实时也就是要转流了吧,那除了后端转,别的都不是很好的方案
    zMoreFree
    zMoreFree
    OP
    Feb 29, 2024
    17
    已经解决,wav 文件格式,流的格式其实 PCM ;后端通过 websocket 发送二进制流,前端可以用 pcm-player 播放
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1569 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 23:14 · PVG 07:14 · LAX 15:14 · JFK 18:14
    ♥ Do have faith in what you're doing.