使用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">獲取麥克風(fēng)權(quán)限</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, // 采樣位數(shù)，支持 8 或 16，默認(rèn)是16
sampleRate: 48000, // 采樣率乍钻，支持 11025弓候、16000撩满、22050虫蝶、24000担神、44100怕磨、48000穆刻，根據(jù)瀏覽器默認(rèn)值置尔，我的chrome是48000
numChannels: 1, // 聲道，支持 1 或 2氢伟， 默認(rèn)是1
// compiling: false,(0.x版本中生效,1.x增加中) // 是否邊錄邊轉(zhuǎn)換榜轿，默認(rèn)是false
});
Method:
//PC端錄制語音
getPermission() {
Recorder.getPermission().then(
() => {
alert("獲取權(quán)限成功");
},
(error) => {
console.log(`${error.name} : ${error.message}`);
}
);
},
//開始錄音
startRecorder() {
recorder.start().then(
() => {},
(error) => {
console.log(`${error.name} : ${error.message}`);
}
);
},
// 繼續(xù)錄音
resumeRecorder() {
recorder.resume();
},
// 暫停錄音
pauseRecorder() {
recorder.pause();
},
// 結(jié)束錄音
stopRecorder() {
recorder.stop();
},
// 錄音播放
playRecorder() {
recorder.stop();
recorder.play();
},
