web端实现录音上传功能

最新推荐文章于 2025-09-09 15:27:10 发布

原创

最新推荐文章于 2025-09-09 15:27:10 发布 · 1.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5 #前端 #es6

本文介绍了如何在web端使用js-audio-recorder插件实现录音并上传至服务器的功能，详细讲解了安装、调用及具体实现步骤，并提供了示例代码。

web端实现录音上传功能

前言
总结

前言

最近项目中遇到一个需求：web端实现录音生成文件并上传至服务器。js-audio-recorder 是一款比较好用的web端录制音频的js插件。接下来笔者将自己基于此插件实现该需求的具体过程分享出来，欢迎评论交流。

提示：

1.安装

npm i js-audio-recorder

2.调用

import Recorder from 'js-audio-recorder'

let recorder = new Recorder()

2.具体实现

代码如下（示例）：

......
<el-button type="primary" @click="startRecord">开始</el-button>
<el-button type="primary" @click="pauseRecord">暂停</el-button>
<el-button type="primary" @click="resumeRecord">恢复</el-button>
<el-button type="primary" @click="destroyRecord">取消</el-button>
<el-button type="primary" @click="endRecord">结束</el-button>
<el-button type="primary" @click="playRecord">播放</el-button>
<el-button type="primary" @click="downloadPCM">下载pcm</el-button>
<el-button type="primary" @click="downloadWAV">下载wav</</

最低0.47元/天解锁文章