有偿求教,前端怎么实时播放 wav 格式的音频,注意是实时播放 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zMoreFree
V2EX    前端开发

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

  •  
  •   zMoreFree 2024-02-26 12:54:10 +08:00 1781 次点击
    这是一个创建于 598 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    https://zhuanlan.zhihu.com/p/401715180
    haah
        7
    haah  
       2024-02-26 13:59:51 +08:00
    data transmission 使用 base64 format 。
    Puteulanus
        8
    Puteulanus  
       2024-02-26 13:59:59 +08:00
    我之前做过一个类似的,webrtc 录了音走 websocket 发走,服务端转一圈发给另一个客户端,然后在网页上放出来
    源代码找不着了,记忆里好像是用了 AudioContext 和 AudioBufferSourceNode
    zMoreFree
        9
    zMoreFree  
    OP
       2024-02-26 14:09:38 +08:00
    @haah 后端返回的流的格式就是 wav ,所以就不需要转换了吧,前端拿到流可以直接用 web audio api 播放把
    haah
        10
    haah  
       2024-02-26 14:47:25 +08:00
    @zMoreFree wav 的 bit rate 太高,最佳实践是压缩。
    haah
        11
    haah  
       2024-02-26 14:49:41 +08:00
    1 、backend 改成 return base64(pcm int16);
    2 、frontend 参照 https://zhuanlan.zhihu.com/p/401715180 案例即可。
    zMoreFree
        12
    zMoreFree  
    OP
       2024-02-26 14:55:56 +08:00
    @haah 我的场景是实时的,音频会不断的传过来,也就是说后端会隔一会传一个 base64 过来,前端怎么处理呢,你的案例是合成了 url 给 audio 标签,针对实时音频这种场景,你的方案肯定不可行吧
    haah
        13
    haah  
       2024-02-26 15:00:54 +08:00
    @zMoreFree audio.Onended= () => { 播放下一个 audio; }
    zMoreFree
        14
    zMoreFree  
    OP
       2024-02-26 15:16:55 +08:00
    @haah 这种方案播放会流畅吗,比如一个字音,会分到两个 audio 上,是不是会有问题呢
    haah
        15
    haah  
       2024-02-26 15:18:48 +08:00   4
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    你试下不就知道了么!!!!!!!!!!
    Eension
        16
    Eension  
       2024-02-26 17:16:41 +08:00
    实时也就是要转流了吧,那除了后端转,别的都不是很好的方案
    zMoreFree
        17
    zMoreFree  
    OP
       2024-02-29 09:20:17 +08:00
    已经解决,wav 文件格式,流的格式其实 PCM ;后端通过 websocket 发送二进制流,前端可以用 pcm-player 播放
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5390 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 37ms UTC 08:51 PVG 16:51 LAX 01:51 JFK 04:51
    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