无法在 React 上自动播放音频

Question

我想使用 mediaDevice 自动播放录制的音频文件。但是，记录完成后 useEffect 并未运行。

它应该能够自动循环播放音频。

// add recording audio
const handleRecordingActive = ({ data }: BlobEvent) => {
  audioRef.current.push(data)
  const blob = new Blob(audioRef.current, { type: 'audio/mp3' })
  const audioURL = window.URL.createObjectURL(blob)
  setAudioSrc(audioURL)
}

// stop recording
const stopRecording = useCallback(() => {
  if (!mediaRecorder || !stream) return
  mediaRecorder.stop()
  stream.getTracks().forEach((track) => track.stop())
  setRecording(false)
  setPlaying(true)
}, [mediaRecorder, setRecording, stream])

// automatically play
useEffect(() => {
  if (!playing || !audioSrc) return

  const audio = new Audio(audioSrc)
  audio.play()
}, [audioSrc, playing])