使用插件
使用js-audio-recorder 插件進行錄音，使用pcm-player插件播放pcm 格式的音頻
錄音
1、安裝js-audio-recorder
npm i js-audio-recorder
2、使用
import Recorder from 'js-audio-recorder';
onMounted(()=>{
Recorder.getPermission().then(() => {
recorder.value= new Recorder({
sampleBits: 16, // 采樣位數，支持 8 或 16，默認是16
sampleRate: 16000, // 采樣率，支持 11025、16000、22050、24000、44100、48000，根據瀏覽器默認值，我的chrome是48000
numChannels: 2, // 聲道，支持 1 或 2， 默認是1
});
console.log('recorder.value',recorder.value)
}, (error) => {
console.log(`${error.name} : ${error.message}`);
});
})
3、開始錄音
if(!recorder.value){
recorder.value= new Recorder({
sampleBits: 16, // 采樣位數，支持 8 或 16，默認是16
sampleRate: 16000, // 采樣率，支持 11025、16000、22050、24000、44100、48000，根據瀏覽器默認值，我的chrome是48000
numChannels: 2, // 聲道，支持 1 或 2， 默認是1
});
}
recorder.value.start().then((res) => {
}, (error) => {
// 出錯了
console.log(`${error?.name} : ${error?.message}`);
});
}
4、結束錄音并獲取pcm 數據
recorder.value.stop()
pcmData.value=recorder.value.getPCM()
播放
1、安裝 pcm-player
npm i pcm-player
2、使用
import PCMPlayer from 'pcm-player'
3、 播放
player.value = new PCMPlayer({
inputCodec: 'Int16',
channels: 2,
sampleRate: 16000,
flushTime: 2000,
onended:()=>{ // 監聽播放結束
}
});
player.value.feed(pcmData.value);
5 獲取到的pcmDataView 轉換成base64 使用websocket發送給服務端
const pcmDataView = recorder.value.getPCM();
const base64String = window.btoa(String.fromCharCode(...new Uint8Array(pcmDataView.buffer)))
6 前端獲取服務端返回的base64,轉成
const base64 = atob(base64String); // 將 Base64 字符串解碼為二進制數據
const bytes = new Uint8Array(base64.length);
for (let i = 0; i < base64.length; i++) {
bytes[i] = base64.charCodeAt(i);
}
const arrayBuffer = bytes.buffer; // 將 Uint8Array 轉換為 ArrayBuffer
