V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zMoreFree
V2EX  ›  前端开发

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

  •  
  •   zMoreFree · 248 天前 · 1291 次点击
    这是一个创建于 248 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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