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