使用插件

使用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