Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口_js-audio-recorder文档_霸道流氓气质的博客

js-audio-plugin

纯js实现浏览器端录音。

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

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

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

1、Vue安装插件

npm i js-audio-recorder

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

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

  data() {
    return {
      recorder: new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 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塞入formData
      const 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) {
    debugger
    return request({
      url: '/common/uploadWavFile',
      method: 'post',
      data: data
后台Controller实现 
     * 上传wav文件
    @PostMapping("/common/uploadWavFile")
    public AjaxResult uploadWavFile(MultipartFile file) throws Exception
            // 上传文件路径
            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>
    <el-button type="button" @click="startRecordAudio">开始录音</el-button>
    <h3>录音时长：{{ recorder.duration.toFixed(4) }}</h3>
    <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>
</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，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 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塞入formData
      const 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实现一句话识别功能：以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！实现一句话查询效果！以vue前端框架+腾讯云语音识别为基础，实现客
                                    最近在做的Vue项目里有关于录音和录音文件上传的功能，用到的是一个开源框架js-audio-recorder，官方文档上关于录音、暂停录音等也封装了很多方法，在这里我主要说下录音文件上传部分，网上找了很多但是关于转换成mp3格式的文件上传的不是太多，在此记录一下也方便后期自己的学习。
Vue项目js-audio-recorder导入和引用
录音文件转mp3格式并上传
Vue项目js-audio-recorder导入和引用
1.使用命令行安装库
npm i js-audio-rec.
 这是一个仅使用 HTML 和 Javascript 实现录音功能的演示程序。您可以使用录音、回放录音、保存语音等功能。
它是比 Google Chrome 23 更新的版本，可在启用了网络音频输入的环境中使用。 要启用 Web 音频输入，您需要执行以下操作：首先，启动谷歌浏览器后，在地址栏中指定chrome://flags 。接下来，在 Web Audio Input 项中单击“启用”后，重新启动 Google Chrome。
如何使用
首先，当您打开页面时，会要求您授予访问麦克风的权限，因此请单击权限按钮。然后点击录制按钮开始录制。此时录音按钮变为停止按钮，点击该停止按钮停止录音。如果录音过程成功，按钮顶部显示的播放器可以播放录制的语音。您还可以通过单击下载按钮播放录制的语音。
                                    vue使用js-audio-recorder实现录音功能前言1.安装2.引用3.页面4.方法5.播放总结
最近项目中需要实现一个录音上传功能，用于考试、作业中，学生可以上传朗读课文的录音，安排。
npm i js-audio-recorder
import Recorder from 'js-audio-recorder'
this.recorder = new Recorder()
    <!-- 录音上传 -->
import Recorder from 'js-audio-recorder'
const parameter = {
  sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
  sampleRate: 8000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 1 // 声道，支持 1 或 2， 默认是1
const recorderEx 
                                    vue3中实现录音发送等功能
在vue项目中做聊天功能中涉及到语音发送功能,搭配js-audio-recorder插件的使用,能很好的帮助我们开发，下面是具体使用步骤。
npm安装js-audio-recorder插件包
npm i js-audio-recorder
在需要使用的组件中导入插件
import Recorder from 'js-audio-recorder'
在setup中定义响应的方法
const data = reactive({
	  //用于存储创建的语
import Recorder from 'js-audio-recorder'
该插件可以控制录得的语音的质量，以下是插件内配置对象的定义**【这是插件里面的东西，我贴在这里给大家看一眼而已，不用抄】**
interface recorderConfig {
    sampleBits?: number,        // 采样位数
    sampleRate