recorder-js+Vue录音插件

最新推荐文章于 2025-06-13 08:49:12 发布
最新推荐文章于 2025-06-13 08:49:12 发布
阅读量2w 收藏 16
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： recorder-js 录音插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ycl396232695/article/details/82628321

首先下载   npm  install recorder-js  --save

然后在你要用到的模块里面  


 

 

另外：如果电脑上面没有连接音频设备的话，那么你在取消录音的时候，会报错 （不认识stop()）

VUE pc端+移动端上传录音并上传(recorder-core)
唐屁屁
03-22 2145
首先安装 npm install recorder-core。以下录音组件完整代码可复用。
vue项目 实现浏览器录音 js-audio-recorder插件示例
weixin_41438668的博客
07-11 616
vue项目 实现浏览器录音 js-audio-recorder插件示例，可以定义格式，参数，支持下载上传等
Recorder.js
08-12
Recorder.js
使用 Recorder.js 在vue项目中实现录音功能
qq_41920758的博客
08-08 2854
btn_not_pressed_img: require("@/img/按钮未按状态.png"),console.log("音频设备打开失败, err= ", err);btn_pressed_img: require("@/img/按钮按下状态.png")console.log("录音设备关闭失败,err= ", err);console.log("没有在录音，请长按按钮");console.log("开始录音");
js的MediaRecorder
xiaohua0708day的博客
06-13 487
返回录制内容的 MIME 类型（如。⚠️ 仅支持部分格式（iOS 需用。（毫秒）指定分片间隔（如。手动请求生成数据块，触发。当数据块可用时触发，通过。后触发，用于最终数据处理。即每秒生成一个数据块）事件（用于非分片模式）✔️ 完整支持（≥47）✔️ 完整支持（≥25）✔️ 完整支持（≥79）视频编码比特率（只读）音频编码比特率（只读）暂停录制，状态变更为。发生错误时触发，通过。
vue使用recorder.js实现录音功能
10-15
主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
网页端录音Recorder.js，单声道16k采样率录音工具
07-04
网页端录音Recorder.js，单声道16k采样率录音工具，在使用各大平台语音转文字时可用
Recorder.js 纯HTML5+JS网页录音
04-10
# recorder.js :microphone:基于HTML5的录音功能，输出格式为mp3文件。 ## 前言 完全依赖H5原生API 所涉及的API：`WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL` ## 兼容性 Chrome、FF、Edge、QQ、360(注：目前IE和Safari全版本不兼容) 其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持 请尝试使用FF、Edge、360等浏览器进行体验，或将项目下载到本地通过localhost的方式   ## 使用方式 ```js var recorder = new Recorder({ sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率) bitRate: 128, //比特率，默认为128kbps(标准MP3质量) success: function(){ //成功回调函数 }, error: function(msg){ //失败回调函数 }, fix: function(msg){ //不支持H5录音回调函数 } }); ``` ## API ```js //开始录音 recorder.start(); //停止录音 recorder.stop(); //获取MP3编码的Blob格式音频文件 recorder.getBlob(function(blob){ //获取成功回调函数，blob即为音频文件 // ... },function(msg){ //获取失败回调函数，msg为错误信息 // ... }); ```
vue3完成录音/播放功能
weixin_73098736的博客
06-18 2466
使用recorder-core完成录音与播放功能
项目实训：VUE前端采用Recorder 实现录音
m0_63155449的博客
06-23 1030
2.button，点击录音小图标，开始录音，点叉取消录音，点勾录音成功。上传可以自己实现后端逻辑。
uniapp使用recorder-core实现H5、App、微信小程序多端适配的录音功能
weixin_51351053的博客
10-23 2286
实现多端适配的录音功能
recorder.js网页录音功能
11-08
换汤不换药，大概功能性代码不变，只是界面不同，这个模仿了微信按住录音，释放发送录音文本的功能！更加有趣，下载后运行应该注意的是，不要使用sublime运行，使用webstrom运行，然后点击谷歌的手机模拟器模拟长按效果才有效，单独网页点击无效的！
Jrecorder前端HTML JS实现录音
04-18
Jrecorder前端HTML JS实现录音，对于浏览器兼容非常好
HZRecorder.js
03-02
HZRecorder.js是一个用于在浏览器端实现录音的工具类，但是不支持IE
HTML5录音插件Recorder.js
06-01
Recorder.js HTML5 麦克风录音，输出WAV
Vue 使用 js-audio-recorder 实现录制、播放、下载音频
ProgramNovice的博客
12-19 6513
Vue 使用 js-audio-recorder 实现录制、播放、下载音频
【亲测免费】 Recorder.js：一款简单的Web音频录制库
gitblog_00030的博客
03-17 3666
Recorder.js：一款简单的Web音频录制库 Recorder.js 是一个轻量级的JavaScript库，它允许你在浏览器中轻松地录制、处理和保存音频数据。借助Recorder.js，你可以构建各种有趣的Web应用程序，如语音备忘录、在线录音室或教育工具。 功能与应用案例 使用Recorder.js，您可以实现以下功能： 录音：在Web页面上为用户提供简单的录音体验。 剪辑和处理：对音频...
【免费下载】 推荐开源项目：Recorder.js
gitblog_00057的博客
03-15 1653
推荐开源项目：Recorder.js Recorder.js 是一款轻量级的 JavaScript 库，用于在浏览器端录制音频。它基于 Web Audio API 和 MediaStream Recording API，可以在现代浏览器中轻松实现高质量的音频录制功能。 功能特性 Recorder.js 支持以下主要功能： 在浏览器端录制音频流。 支持多种编码格式（如 WAV、MP3）。 提供简单...
js-audio-recorder录音功能
最新发布
09-02
js-audio-recorder 是一个用于在 Vue 项目中实现录音功能的插件，可实现录音、暂停、继续、停止、播放等操作，并能将录音文件转成 wav 格式上传 [^1][^2][^3]。 使用方法如下： 1. **安装插件**：在项目中通过 `npm i js-audio-recorder` 进行安装 [^1][^3]。 2. **引入插件**：使用 `import Recorder from "js-audio-recorder";` 引入插件 [^1][^3][^4]。 3. **初始化实例**：在 `created` 生命周期中创建 `Recorder` 实例，代码如下： ```javascript data() { return { recorder: null, playTime: 0, timer: null, src: null } }, created() { this.recorder = new Recorder() } ``` 4. **使用相关方法控制录音**： - **开始录音**：需要先获取权限，然后调用 `start` 方法，代码如下： ```javascript Recorder.getPermission().then(() => { this.recorder.start() // 开始录音 }, (error) => { // 处理错误 }) ``` - **停止录音**：调用 `stop` 方法，代码为 `this.recorder.stop()` [^3]。 - **继续录音**：调用 `resume` 方法，代码为 `this.recorder.resume()` [^3]。 - **暂停录音**：调用 `pause` 方法，代码为 `this.recorder.pause()` [^3]。 - **销毁录音实例**：调用 `destroy` 方法，代码为 `this.recorder.destroy()` [^3]。 - **播放录音**：调用 `play` 方法，代码为 `this.recorder.play()` [^3]。 5. **设置参数（可选）**：可以在引入时设置采样位数、采样率、声道等参数，示例代码如下： ```javascript const parameter = { sampleBits: 16, // 采样位数，支持 8 或 16，默认是16 sampleRate: 8000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，chrome是48000 numChannels: 1, // 声道，支持 1 或 2， 默认是1 }; ```
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值