{"id":15029787,"url":"https://github.com/2fps/recorder","last_synced_at":"2025-05-15T04:04:25.585Z","repository":{"id":37733336,"uuid":"166237951","full_name":"2fps/recorder","owner":"2fps","description":"html5 js 浏览器 web端录音","archived":false,"fork":false,"pushed_at":"2022-12-09T19:43:40.000Z","size":2416,"stargazers_count":1151,"open_issues_count":65,"forks_count":266,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-14T04:58:59.395Z","etag":null,"topics":["audio","html5","javascript","lu-yin","mp3","pcm","recorder","typescript","wav","web","webaudio"],"latest_commit_sha":null,"homepage":"https://recorder.zhuyuntao.cn/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/2fps.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-17T14:20:17.000Z","updated_at":"2025-04-08T15:24:04.000Z","dependencies_parsed_at":"2023-01-25T23:17:37.462Z","dependency_job_id":null,"html_url":"https://github.com/2fps/recorder","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2fps%2Frecorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2fps%2Frecorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2fps%2Frecorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2fps%2Frecorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2fps","download_url":"https://codeload.github.com/2fps/recorder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270641,"owners_count":22042858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","html5","javascript","lu-yin","mp3","pcm","recorder","typescript","wav","web","webaudio"],"created_at":"2024-09-24T20:11:37.676Z","updated_at":"2025-05-15T04:04:25.529Z","avatar_url":"https://github.com/2fps.png","language":"JavaScript","readme":"# recorder\njs audio recorder plugin.\n\n![](https://travis-ci.org/2fps/recorder.svg?branch=master) ![](https://img.shields.io/npm/v/js-audio-recorder.svg) ![](https://img.shields.io/npm/dw/js-audio-recorder.svg)\n\n![English](./README.md) | 简体中文\n\n\u003e 主要用于Web浏览器端录制短音频。\n\n+ 支持录音，暂停，恢复，和录音播放。\n+ 支持音频数据的压缩，支持单双通道录音。\n+ 支持录音时长、录音大小的显示。\n+ 支持边录边转（播放）。\n+ 支持导出录音文件，格式为pcm或wav。\n+ 支持录音波形显示，可自己定制。\n+ 录音数据支持第三方平台的语音识别。\n\n## 使用\n### 在线演示地址\n[Recorder](https://recorder.zhuyuntao.cn/)\n\n### 在线文档\n\n[文档](http://recorder.api.zhuyuntao.cn/)\n\n### demo使用\n```\nnpm ci (推荐) 或 npm install\nnpm run dev\n```\n\n### 调试移动端\n```\nnpm run https\n```\n\n### 编译\n```\nnpm run build\n```\n\n### 使用方法\n#### 引入方式\n+ npm方式：\n\n安装：\n```\nnpm i js-audio-recorder\n```\n调用：\n``` js\nimport Recorder from 'js-audio-recorder';\n\nlet recorder = new Recorder();\n```\n+ script标签方式\n\n``` js\n\u003cscript type=\"text/javascript\" src=\"./dist/recorder.js\"\u003e\u003c/script\u003e\n\nlet recorder = new Recorder();\n```\n\n## API\n### 初始化实例\n可以配置输出数据参数，\n``` js\nlet recorder = new Recorder({\n    sampleBits: 16,         // 采样位数，支持 8 或 16，默认是16\n    sampleRate: 16000,      // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000\n    numChannels: 1,         // 声道，支持 1 或 2， 默认是1\n    compiling: false,       // 是否边录边转换，默认是false\n});\n```\n+ 返回: \\\u003cRecorder\u003e\n\n### 开始录音\n``` js\nrecorder.start().then(() =\u003e {\n    // 开始录音\n}, (error) =\u003e {\n    // 出错了\n    console.log(`${error.name} : ${error.message}`);\n});\n```\n+ 返回: Promise\u003c{}\u003e\n\n### 录音暂停\n``` js\n// 暂停录音\nrecorder.pause();\n```\n+ 返回: void\n\n### 继续录音\n``` js\n// 继续录音\nrecorder.resume()\n```\n+ 返回: void\n\n仅支持暂停后，恢复录音。\n\n### 结束录音\n``` js\n// 结束录音\nrecorder.stop();\n```\n+ 返回: void\n\n### 录音播放\n``` js\n// 录音播放\nrecorder.play();\n```\n+ 返回: void\n\n支持不结束直接调用录音播放。\n\n### 暂停录音播放\n```js\n// 暂停录音播放\nrecorder.pausePlay();\n```\n+ 返回: void\n\n### 恢复录音播发\n```js\n// 恢复录音播发\nrecorder.resumePlay();\n```\n+ 返回: void\n\n### 停止播放\n``` js\n// 停止播放\nrecorder.stopPlay();\n```\n+ 返回: void\n\n### 销毁实例\n``` js\n// 销毁录音实例，置为null释放资源，fn为回调函数，\nrecorder.destroy().then(function() {\n    recorder = null;\n});\n```\n+ 返回: Promise\u003c{}\u003e\n\n### 直接获取录音数据\n#### 获取 PCM 数据\n``` js\n// 获取 PCM 数据(Blob)\nrecorder.getPCMBlob();\n```\n+ 返回: \\\u003cBlob\u003e\n\n#### 获取 WAV 数据\n``` js\n// 获取 WAV 数据(Blob)\nrecorder.getWAVBlob();\n```\n+ 返回: \\\u003cBlob\u003e\n\n### 下载录音文件\n#### 下载 PCM 格式\n``` js\n// 下载pcm文件\nrecorder.downloadPCM(fileName ?);\n```\n+ fileName \\\u003cString\u003e 重命名文件\n+ 返回: \\\u003cBlob\u003e\n\n#### 下载 WAV 格式\n``` js\n// 下载wav文件\nrecorder.downloadWAV(fileName ?);\n```\n+ fileName \\\u003cString\u003e 重命名文件\n+ 返回: \\\u003cBlob\u003e\n\n### 录音实时回调 获取录音数据\n目前支持获取以下数据：\n\n+ 录音时长（duration）。\n+ 已录音文件大小(字节)（fileSize）。\n+ 录音音量百分比（vol）。\n+ 所有的录音数据（data）。\n\n``` js\n// 回调持续输出时长(当收集的栈满时触发)\n\n// 不推荐使用\nrecorder.onprocess = function(duration) {\n    console.log(duration);\n}\n// 推荐使用\nrecorder.onprogress = function(params) {\n    console.log('录音时长', params.duration);\n    console.log('已录音文件大小（字节）', params.fileSize);\n    console.log('录音音量百分比', params.vol);\n    console.log('当前录音的总数据', params.data);\n}\n// 手动获取录音总时长\nconsole.log(recorder.duration);\n// 手动获取已录音文件大小（字节）\nconsole.log(recorder.fileSize);\n```\n\n注意：回调中不要进行太耗cpu的计算行为，以免造成性能问题。\n\n### 边录边转换\n现支持边录音边转换出对应的PCM数据。获取方式：\n\n1. onprogress 回调，见录音回调函数\n2. getWholeData() 和 getNextData() 方法。\n\n#### getWholeData()\n用于获取录音的整个数据，与 onprogress 回调中的 data 相同。若没有开启边录边转，则返回是空数组。\n\n#### getNextData()\n用于获取前一次 getNextData() 之后的数据。同样的，若没有开启边录边转，则返回是空数组。\n\n注：demo操作见 example.ts 文件。\n\n### 录音波形显示\n``` js\nlet dataArray = recorder.getRecordAnalyseData();\n```\n返回的是一个1024长的，0-255大小的Uint8Array类型。用户可以根据这些数据自定义录音波形。\n\n### 播放外部音频文件\n``` js\nRecorder.playAudio(/* 放入blob数据 */);\n```\n支持的音乐格式由浏览器的audio支持的类型决定。\n\n## 任务列表\n- [ ] 拆分recorder到各个功能模块。\n- [x] 增加test代码。\n- [x] promise，支持async, await。\n- [ ] 功能完善。\n- [x] 兼容性测试。\n- [x] 支持边录音边转换(播放)。\n\n## 注意\n\n1. 使用127.0.0.1或localhost尝试，因为getUserMedia在高版本的chrome下需要使用https。\n\n## 兼容性\n\n\u003e 以下为测试结果，低于以下版本并不表示不支持，可能是未测试到，增加或标注请查看：[issues6](https://github.com/2fps/recorder/issues/6)\n\n### window pc端\n|  ![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/chrome_12-48/chrome_12-48_32x32.png)   |  ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/firefox_23-56/firefox_23-56_32x32.png)  |  ![Edge](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/edge/edge_32x32.png)  |  ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/safari/safari_32x32.png)  | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/opera_15-32/opera_15-32_32x32.png) |  ![IE](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/internet-explorer_6/internet-explorer_6_32x32.png)  |\n|  ----  | ---- | ---- | ---- | ---- | ---- |\n| 38+ | 30+ | 42+ | 11+ | 21+ | 不支持 |\n\n### 移动端\n#### 安卓\n| ![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/chrome_12-48/chrome_12-48_32x32.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/firefox_23-56/firefox_23-56_32x32.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/safari-ios/safari-ios_32x32.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/opera_15-32/opera_15-32_32x32.png) | ![UC](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/uc/uc_32x32.png) | ![QQ](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/qq_2/qq_2_32x32.png) | ![猎豹](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/cheetah/cheetah_32x32.png) | ![搜狗]() | ![华为]() | ![小米]() |\n| ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |\n| 42+ | 40+ | ？ | 不支持 | 不支持 | 9.2+ | 不支持 | 不支持 | 不支持 | 不支持 |\n\n#### IOS\n| ![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/chrome_12-48/chrome_12-48_32x32.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/firefox_23-56/firefox_23-56_32x32.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/safari-ios/safari-ios_32x32.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/opera_15-32/opera_15-32_32x32.png) | ![UC](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/uc/uc_32x32.png) | ![QQ](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/qq_2/qq_2_32x32.png) | ![猎豹](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/51.0.17/archive/cheetah/cheetah_32x32.png) | ![搜狗]() | ![华为]() | ![小米]() |\n| ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |\n| ？ | ？ | 11+ | ？ | ？ | ？ | ？ | ？ | ？ | ？ |\n\n\u003e 需要打开浏览器录音权限，在设置-权限中可以配置。\n\n## 其他资源\n\n+ [webAudio播放本地音乐](https://github.com/2fps/demo/tree/master/view/2019/04/webAudio%E6%92%AD%E6%94%BE%E6%9C%AC%E5%9C%B0%E9%9F%B3%E4%B9%90)\n+ [webAudio制造噪音并播放](https://github.com/2fps/demo/tree/master/view/2019/04/webAudio%E5%88%B6%E9%80%A0%E5%99%AA%E9%9F%B3%E5%B9%B6%E6%92%AD%E6%94%BE)\n+ [web Audio实现pcm音频数据收集](https://github.com/2fps/demo/tree/master/view/2019/04/webAudio%E5%AE%9E%E7%8E%B0pcm%E9%9F%B3%E9%A2%91%E6%95%B0%E6%8D%AE%E6%94%B6%E9%9B%86)\n+ [js实现pcm数据编码](https://github.com/2fps/demo/tree/master/view/2019/04/js%E5%AE%9E%E7%8E%B0pcm%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A0%81)\n+ [基于阿里云实现简单的语音识别功能(node)](https://github.com/2fps/demo/tree/master/view/2019/01/%E5%9F%BA%E4%BA%8E%E9%98%BF%E9%87%8C%E4%BA%91%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB%E5%8A%9F%E8%83%BD(node))\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2fps%2Frecorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2fps%2Frecorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2fps%2Frecorder/lists"}