场景

浏览器web端实现语音消息录制并在录制结束之后将其上传到后台接口。

若依前后端分离版手把手教你本地搭建环境并运行项目：

若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_前后端分离项目本地运行

在上面的基础上，搭建前后端的架构。

js-audio-plugin

纯js实现浏览器端录音。

支持录音，暂停，恢复，和录音播放。
支持音频数据的压缩，支持单双通道录音。
支持录音时长、录音大小的显示。
支持边录边转（播放）后续支持。
支持导出录音文件，格式为pcm或wav。
支持录音波形显示，可自己定制。

项目地址

GitHub - 2fps/recorder: html5 js 浏览器 web端录音

演示地址

录音

文档地址

Introduction · recorder

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、Vue安装插件

npm i js-audio-recorder

2、调用

import Recorder from 'js-audio-recorder';let recorder = new Recorder();

这里是在Vue页面中，所以直接在data()中声明并初始化参数

  data() {return {recorder: new Recorder({sampleBits: 16, // 采样位数，支持 8 或 16，默认是16sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000numChannels: 1, // 声道，支持 1 或 2， 默认是1// compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false}),};},

3、api调用

开始录音

    //开始录音startRecordAudio() {Recorder.getPermission().then(() => {console.log("开始录音");this.recorder.start(); // 开始录音},(error) => {this.$message({message: "请先允许该网页使用麦克风",type: "info",});console.log(`${error.name} : ${error.message}`);});},

停止录音

    //停止录音stopRecordAudio() {console.log("停止录音");this.recorder.stop();},

播放录音

    //播放录音playRecordAudio() {console.log("播放录音");this.recorder.play();}

获取PCB录音数据

    //获取PCB录音数据getPCBRecordAudioData() {var pcmBlob = this.recorder.getPCMBlob();console.log(pcmBlob);},

获取WAV录音数据

    //获取WAV录音数据getWAVRecordAudioData() {var wavBlob = this.recorder.getWAVBlob();console.log(wavBlob);},

下载PCB录音文件

    //下载PCB录音文件downloadPCBRecordAudioData() {this.recorder.downloadPCM("badao");},

下载WAV录音文件

    //下载WAV录音文件downloadWAVRecordAudioData() {this.recorder.downloadWAV("badao");},

4、录音文件blob数据上传

    //上传wav录音数据uploadWAVData() {var wavBlob = this.recorder.getWAVBlob();// 创建一个formData对象var formData = new FormData()// 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formDataconst newbolb = new Blob([wavBlob], { type: 'audio/wav' })//获取当时时间戳作为文件名const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')formData.append('file', fileOfBlob)uploadWavData(formData).then((response) => {console.log(response);});},

调用的post请求方法

import request from '@/utils/request'// 上传wav录音数据
export function uploadWavData(data) {debuggerreturn request({url: '/common/uploadWavFile',method: 'post',data: data})}

后台Controller实现

    /*** 上传wav文件*/@PostMapping("/common/uploadWavFile")public AjaxResult uploadWavFile(MultipartFile file) throws Exception{try{// 上传文件路径String filePath = RuoYiConfig.getUploadPath();// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file, MimeTypeUtils.MEDIA_EXTENSION);String url = serverConfig.getUrl() + fileName;AjaxResult ajax = AjaxResult.success();ajax.put("fileName", fileName);ajax.put("url", url);return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}

5、Vue页面完整代码

<template><div><el-button type="button" @click="startRecordAudio">开始录音</el-button><h3>录音时长：{{ recorder.duration.toFixed(4) }}</h3><br /><el-button type="button" @click="stopRecordAudio">停止录音</el-button><el-button type="button" @click="playRecordAudio">播放录音</el-button><el-button type="button" @click="getPCBRecordAudioData">获取PCB录音数据</el-button><el-button type="button" @click="downloadPCBRecordAudioData">下载PCB录音文件</el-button><el-button type="button" @click="getWAVRecordAudioData">获取WAV录音数据</el-button><el-button type="button" @click="downloadWAVRecordAudioData">下载WAV录音文件</el-button><el-button type="button" @click="uploadWAVData">上传WAV录音数据</el-button><br /></div>
</template><script>
import Recorder from "js-audio-recorder";
import { uploadWavData } from "@/api/system/audioRecorder";
export default {name: "audioRecorder",data() {return {recorder: new Recorder({sampleBits: 16, // 采样位数，支持 8 或 16，默认是16sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000numChannels: 1, // 声道，支持 1 或 2， 默认是1// compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false}),};},mounted() {},methods: {//开始录音startRecordAudio() {Recorder.getPermission().then(() => {console.log("开始录音");this.recorder.start(); // 开始录音},(error) => {this.$message({message: "请先允许该网页使用麦克风",type: "info",});console.log(`${error.name} : ${error.message}`);});},//停止录音stopRecordAudio() {console.log("停止录音");this.recorder.stop();},//播放录音playRecordAudio() {console.log("播放录音");this.recorder.play();},//获取PCB录音数据getPCBRecordAudioData() {var pcmBlob = this.recorder.getPCMBlob();console.log(pcmBlob);},//获取WAV录音数据getWAVRecordAudioData() {var wavBlob = this.recorder.getWAVBlob();console.log(wavBlob);},//下载PCB录音文件downloadPCBRecordAudioData() {this.recorder.downloadPCM("badao");},//下载WAV录音文件downloadWAVRecordAudioData() {this.recorder.downloadWAV("badao");},//上传wav录音数据uploadWAVData() {var wavBlob = this.recorder.getWAVBlob();// 创建一个formData对象var formData = new FormData()// 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formDataconst newbolb = new Blob([wavBlob], { type: 'audio/wav' })//获取当时时间戳作为文件名const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')formData.append('file', fileOfBlob)uploadWavData(formData).then((response) => {console.log(response);});},},watch: {},
};
</script><style scoped lang="scss">
</style>

6、录音实现效果

上传到后台接口效果

后台接口存储到服务器本地

7、注意事项

这里后台接口的upload调用的是若依封装的工具类，需要在第三个参数中

指定文件格式为音频文件的后缀名格式集，不然校验不通过

FileUploadUtils.upload(filePath, file, MimeTypeUtils.MEDIA_EXTENSION);public static final String[] MEDIA_EXTENSION = { "swf", "flv", "mp3", "wav", "wma", "wmv", "mid", "avi", "mpg","asf", "rm", "rmvb" };

另外需要允许浏览器使用麦克风

允许之后可以在浏览器中选择性关闭

注意使用127.0.0.1或者localhost与线上地址用Ip或者域名访问时不一样，因为getUserMedia在高版本的chrome下需要使用https。

Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口相关推荐

浅析vue中wavesurfer.js的Minimap插件的使用
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/104635357 1.Minimap插件的使 ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
Vue项目实战之人力资源平台系统（十）图片上传和打印员工信息
前言目录前言一.配置腾讯云空间存储图片 1.1 配置步骤二.图片上传流程解析三.实现文件上传组件 3.1 安装依赖 3.2 上传图片组件的基本布局 3.3 全局注册组件 3.4 点击图片进行 ...
Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能
最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
Jsp中Uploadify插件的使用（jQuery上传插件）
原文地址:Jsp中Uploadify插件的使用(jQuery上传插件)作者:项海军该插件使用的是jQuery,Flash和后端(您选择哪种语言实现的上传)脚本的组合. 如何来使用它? --执行此插件 ...
php 上传图片预览多张,uploadify插件实现多个图片上传并预览
使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...

Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口

场景

js-audio-plugin

项目地址

演示地址

文档地址

实现

Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口相关推荐

最新文章

热门文章