Blob 데이터 유형으로 웹 앱 데이터베이스에 오디오 녹음 게시

목표는 사용자 마이크에서 오디오를 수신하고 해당 오디오를 데이터베이스에 저장하는 것입니다. 이렇게 하려면 먼저 브라우저에서 사용자에게 마이크를 사용할 수 있는지 물어봐야 합니다.

const [trackOne, setTrackOne] = useState(
    {
      isRecording: false,
      blobURL: '',
      isBlocked: false,
    })

  // one time check for mic permissions
  useEffect(() => {
    navigator.getUserMedia({ audio: true },
      () => {
        console.log('Permission Granted');
        setTrackOne({ isBlocked: false });
      },
      () => {
        console.log('Permission Denied');
        setTrackOne({ isBlocked: true })
      },
    );

  }, [])

권한이 부여되면 녹음을 시작하는 함수를 호출할 수 있습니다.

  const startOne = (e) => {
    if (trackOne.isBlocked) {
      console.log('Permission Denied');
    } else {
      Mp3Recorder
        .start()
        .then(() => {
          setTrackOne({ isRecording: true });
        }).catch((e) => console.error(e));
    }
  };

녹음을 중지하려면 녹음을 중지하는 함수를 호출해야 합니다.

const stopOne = () => {
    Mp3Recorder
      .stop()
      .getMp3()
      .then(([buffer, blob]) => {
        const file = new File(buffer, 'track-one.mp3', {
          type: audioType
        })
        setAudioData(file)
        const blobURL = URL.createObjectURL(blob)
        setTrackOne({ blobURL, isRecording: false })
      })
  }

그런 다음 useEffect를 사용하여 중지 버튼을 클릭할 때마다 데이터를 게시할 수 있습니다.

const formData = new FormData()
  formData.append('audio_data', audioData)

  useEffect(()=>{
    fetch('/tracks', {
      method: 'POST',
      body: formData,
    })
    .then((r) => {
      if (r.ok) {
        fetch('/tracks')
        .then(r => r.json())
        .then(data => setAllTracks(data))
      }
    })
  }, [audioData])

마지막에 포함된 가져오기 GET 요청은 새 트랙을 즉시 렌더링하는 것입니다.

관련된 라이브러리:
'mic-recorder-to-mp3'에서 MicRecorder 가져오기;

중요한
오디오 녹음 구성요소에서 비트 전송률을 설정해야 합니다.
const Mp3Recorder = new MicRecorder({ bitRate: 128 });