V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xiangyuecn
V2EX  ›  JavaScript

HTML5 网页录音开源库,小巧功能丰富,欢迎把玩😃

  •  
  •   xiangyuecn · 2021-08-09 11:19:16 +08:00 · 3058 次点击
    这是一个创建于 1237 天前的主题,其中的信息可能已经有所发展或是发生改变。

    得益于 WebRTC 的标准化推进,今年越来越多的浏览器已经能够进行 H5 录音。

    去年折腾的要死的各种国产套壳浏览器今年已经有了非常大的改善,包括折腾到吐的 iOS 也已经不那么傲娇了终于放开了 App 里面的限制,基本上只要升级了浏览器或系统就能使用 H5 的录音功能。

    开源库: https://github.com/xiangyuecn/Recorder

    测试: https://xiangyuecn.gitee.io/recorder/

    这个库是很久以前写的一个网页版录音插件,经过几年的优化更新、功能添加,现在算是一个比较完整好用的 H5 录音开源解决方案了。


    目前已经提供了:mp3 、wav 、pcm 、ogg 、webm 、amr 录音格式的支持,当前最新的 wav 格式录音的 js min 文件 9.73kb,小巧精致,mp3 的 js 文件 153kb (理论上只要能提供编码器,任何音频格式都能很方便的进行扩展支持)

    库里面带有丰富的扩展功能插件,包括好几个音频可视化插件、变速变调处理、还带了一个 DTMF 编码解码插件。

    支持实时处理,可以做到边录音边处理、边录音边上传;除了可以实时处理麦克风录制的音频流外,其他的音频流均能处理,包括但不限于:getUserMedia 返回的流、WebRTC 中的 remote 流、audio 、video 标签的 captureStream 方法返回的流、自己创建的流 等等;另外提供了对音频数据的实时播放功能。


    在线测试>>

    编写代码运行>>

    14 条回复    2023-07-10 14:52:32 +08:00
    wudicgi
        1
    wudicgi  
       2021-08-09 11:22:29 +08:00
    很感兴趣,已 star

    试了一下,貌似捕获设备只能是 microphone, 不能是 loopback 类型设备?
    xiangyuecn
        2
    xiangyuecn  
    OP
       2021-08-09 11:25:54 +08:00
    @wudicgi #1 只要是音频设备,是可以选择使用从哪个音频设备进行录制的(在线测试页面底下有一个切 [换麦克风] 的选项);或者是任意音频数据,只要能转换成 MediaStream,就能进行录制
    40EaE5uJO3Xt1VVa
        3
    40EaE5uJO3Xt1VVa  
       2021-08-09 11:29:31 +08:00
    这个项目只有几十 star 的时候我点了 star,好几年了还在更新
    xiangyuecn
        4
    xiangyuecn  
    OP
       2021-08-09 11:38:48 +08:00
    @yanzhiling2001 #3 感谢支持😃 一直尽量保持着向前兼容,几年前写的代码放到现在都能运行,核心的功能并没有多大变化,基本上有点新想法就以扩展的形式往里面塞
    fumichael
        5
    fumichael  
       2021-08-09 11:47:38 +08:00
    感谢感谢,star
    phxsuns
        6
    phxsuns  
       2021-08-09 12:22:21 +08:00
    看起来功能很强大,文档也写的很详细。
    vone
        7
    vone  
       2021-08-09 15:21:13 +08:00
    mp4 测试文件过于正经。
    chengxiao
        8
    chengxiao  
       2021-08-09 15:28:26 +08:00
    去年用过一次,非常赞
    文档也很细致
    sagowave2
        9
    sagowave2  
       2021-08-09 15:36:55 +08:00
    @vone 哈哈哈 我以为就我一个人看到了
    andyskaura
        10
    andyskaura  
       2021-08-09 15:41:02 +08:00
    @vone 哈哈哈哈哈哈 感谢带路党
    xiangyuecn
        11
    xiangyuecn  
    OP
       2021-08-10 08:13:36 +08:00
    @chengxiao #8 感谢支持😃
    xiangyuecn
        12
    xiangyuecn  
    OP
       2021-08-10 08:16:14 +08:00
    @vone #7 资源再利用😂 无关紧要的细节不用太在意
    ljkWeb
        13
    ljkWeb  
       2021-08-10 15:25:48 +08:00
    很少见到这么详细的中文文档项目,已 star
    noahzh
        14
    noahzh  
       2023-07-10 14:52:32 +08:00
    唯一缺点就是缺少新手入门哈哈
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2806 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 07:05 · PVG 15:05 · LAX 23:05 · JFK 02:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.