최근 한 번 이상 브라우저에서 오디오를 녹음하는 일종의 React 마이크 구성 요소를 만들어야 했습니다. 그런 다음 거기에 있는 오디오 덩어리로 원하는 모든 작업을 수행할 수 있습니다( 저장, 변환, 전사 라이브러리와 함께 사용 등).

React 마이크에 사용되는 구성 요소는… 유지 관리되지 않습니다. 나는 일반적으로 그것을 그대로 두겠습니다. 반드시 나쁜 것은 아니지만 일부 저장소는 스팸으로 이어지고, 일부 저장소는 깨진 링크로 가득 차 있으며, 내가 찾은 저장소 중 대부분은 몇 년이 넘도록 업데이트되지 않았습니다.

뭔가를 하고 싶다면 스스로 해야 한다

저는 이 구성 요소 중 하나를 처음부터 만들기로 결정했습니다!

이 블로그 게시물의 나머지 부분을 읽을 필요가 없고 단지 사용하고 싶다면 125줄 요점에 대한 링크가 있습니다. 너무 참을성이 없습니다. 하지만 이해합니다. 인생은 도전적입니다.

그래도.

마이크와 관련하여 일반적으로 고려해야 할 사항이 많이 있습니다. 나는 이것과의 브라우저 호환성에 대해 깊이 다루지는 않았지만(확실히… Opera나 다른 것이 아마도 이것에 문제가 있을 것입니다), 그러나 몇 가지 멋진 내장 최신 브라우저 기능이 있습니다. 꽤 멀리 갈 수 있습니다. 여기:

• navigator.mediaDevices: 이를 통해 사용자의 마이크(또는 원하는 경우 카메라)에 액세스할 수 있습니다.
• getUserMedia: 앞서 언급한 미디어 장치에 대한 사용자 권한을 얻고 미디어 스트림을 생성할 수 있습니다.
• MediaRecorder: 이를 통해 실제로 녹음할 수 있습니다

이 모든 것들은 각각을 추적하기 위한 일부 React 상태 변수, 브라우저 측 작업을 수행하기 위한 useEffect, 그리고 녹음된 오디오의 미리 보기를 보여주는 기본

물론 말처럼 쉽지 않기 때문에 모든 내용을 복사하여 붙여넣을 수 있는 요지로 작성했습니다. 기본 기능 외에도 최대 녹음 시간에 대한 변수도 만들었습니다(필요하지는 않지만 무언가를 복사하거나 업로드하려는 경우 제한이 좋다고 생각합니다). 그리고 일부 작은 Tailwind 스타일을 보여줍니다. 버튼 주변의 애니메이션.

컴포넌트를 사용하세요. 당신의 꿈을 기록해보세요.