有偿求教,前端怎么实时播放 wav 格式的音频,注意是实时播放 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
zMoreFree

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

  •  
  •   zMoreFree Feb 26, 2024 2174 views
    This topic created in 793 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
        1
    sentinelK  
       Feb 26, 2024
    “实时”的概念是什么?
    对延时有要求?如果有的话,距离 websocket 推流之后多少毫秒必须要播放?

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

    https://zhuanlan.zhihu.com/p/401715180
    haah
        7
    haah  
       Feb 26, 2024
    data transmission 使用 base64 format 。
    Puteulanus
        8
    Puteulanus  
       Feb 26, 2024
    我之前做过一个类似的,webrtc 录了音走 websocket 发走,服务端转一圈发给另一个客户端,然后在网页上放出来
    源代码找不着了,记忆里好像是用了 AudioContext 和 AudioBufferSourceNode
    zMoreFree
        9
    zMoreFree  
    OP
       Feb 26, 2024
    @haah 后端返回的流的格式就是 wav ,所以就不需要转换了吧,前端拿到流可以直接用 web audio api 播放把
    haah
        10
    haah  
       Feb 26, 2024
    @zMoreFree wav 的 bit rate 太高,最佳实践是压缩。
    haah
        11
    haah  
       Feb 26, 2024
    1 、backend 改成 return base64(pcm int16);
    2 、frontend 参照 https://zhuanlan.zhihu.com/p/401715180 案例即可。
    zMoreFree
        12
    zMoreFree  
    OP
       Feb 26, 2024
    @haah 我的场景是实时的,音频会不断的传过来,也就是说后端会隔一会传一个 base64 过来,前端怎么处理呢,你的案例是合成了 url 给 audio 标签,针对实时音频这种场景,你的方案肯定不可行吧
    haah
        13
    haah  
       Feb 26, 2024
    @zMoreFree audio.Onended= () => { 播放下一个 audio; }
    zMoreFree
        14
    zMoreFree  
    OP
       Feb 26, 2024
    @haah 这种方案播放会流畅吗,比如一个字音,会分到两个 audio 上,是不是会有问题呢
    haah
        15
    haah  
       Feb 26, 2024   4
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    Eension
        16
    Eension  
       Feb 26, 2024
    实时也就是要转流了吧,那除了后端转,别的都不是很好的方案
    zMoreFree
        17
    zMoreFree  
    OP
       Feb 29, 2024
    已经解决,wav 文件格式,流的格式其实 PCM ;后端通过 websocket 发送二进制流,前端可以用 pcm-player 播放
    About     Help     Advertise     Blog     API     FAQ     Solana     3179 Online   Highest 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 38ms UTC 13:37 PVG 21:37 LAX 06:37 JFK 09:37
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86