js-audio-recorder 从0到1实现路录音

956 阅读1分钟

1、下载插件 npm i js-audio-recorder

2

、html部分

<template>  
  <div class="Home" style="margin: 1vw">
    <Button type="success" @click="getPermission()" style="margin: 1rem">获取麦克风权限</Button>
    <Button type="info" @click="startRecorder()" style="margin: 1rem">开始录音</Button>
    <Button type="info" @click="stopRecorder()" style="margin: 1rem">停止录音</Button>
    <Button type="success" @click="playRecorder()" style="margin: 1rem">录音播放</Button>
  </div>
</template>

3、script部分

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



 methods: {
    //PC端录制语音
    getPermission() {
      Recorder.getPermission().then(
        () => {
          alert("获取权限成功");
        },
        (error) => {
          console.log(`${error.name} : ${error.message}`);
        }
      );
    },
    //开始录音
    startRecorder() {
      recorder.start().then(
        () => {},
        (error) => {
          console.log(`${error.name} : ${error.message}`);
        }
      );
    },
    // 继续录音
    resumeRecorder() {
      recorder.resume();
    },
    // 暂停录音
    pauseRecorder() {
      recorder.pause();
    },
    // 结束录音
    stopRecorder() {
      recorder.stop();
    },
    // 录音播放
    playRecorder() {
      recorder.stop();
      recorder.play();
    }
}

注意:现有版本以及所有低版本(四个版本)都存在 报错  "MPEGMode is not defined" 。

  解决方法:在发布新版本之前,您需要编辑文件node_modules/lamejs夹中的相应文件。

1、Lame.js:29 Encoder.js:112 PsyModel.js:162

都需要

var MPEGMode = require('./MPEGMode.js');

2、BitStream.js:33 Presets.js:18

都需要

var Lame = require('./Lame.js');

3、QuantizePVT.js:54

需要

var BitStream = require('./BitStream.js');