使用Vue加上js-audio-recorder.js组件进行PC端浏览器录音

npm i js-audio-recorder -S

HTML

<!-- Home -->
<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>

Script:

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

Method:

   //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();
    },