浏览器h5录制音频demo

参考链接-MediaRecorder

const recording = ref(false)
const mediaRecorder = ref<MediaRecorder | null>(null);
const audioChunks = ref<Blob[]>([]);
const audioBlob = ref<Blob>(new Blob());
const audioUrl = ref('');


const startRecording = async () => {
  console.log('开始录音');
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder.value = new MediaRecorder(stream);
  mediaRecorder.value.ondataavailable = (event: BlobEvent) => {
    if (event.data && event.data.size > 0) {
      audioChunks.value.push(event.data);
    }
  };
  mediaRecorder.value.addEventListener("stop", () => {
    const temp = new Blob(audioChunks.value, { type: 'audio/webm' });
    audioBlob.value = temp;
    audioUrl.value = URL.createObjectURL(temp);
    audioChunks.value = []; // 清空音频片段以备重新录制
    handleRecorderSuccess(temp)
  });
  mediaRecorder.value.start();
};


const stopRecording = () => {
  console.log('停止录音');
  if (mediaRecorder.value) {
    mediaRecorder.value.stop();
    mediaRecorder.value = null;
  }
};

const toggleRecording = () => {
  if (recording.value) {
    stopRecording();
  } else {
    startRecording().catch(console.error);
  }
  recording.value = !recording.value;
};



// 自动上传音频转成文本
const handleRecorderSuccess = async (obj) => {
  // console.log(obj)
  const formData = new FormData();
  formData.append('file', obj);
  const response = await fetch(BASE_API + '/upload-audio', {
    method: 'POST',
    body: formData,
  });
  if (!response.ok) {
    throw new Error(`HTTP error ${response.status}`);
  }
  const data = await response.json();
  inputStr.value = data["text"]
}