간단한 React 마이크 구성요소 만들기

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

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

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

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

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

그럼요.

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

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

이 모든 것들은 각각을 추적하기 위한 일부 React 상태 변수, 브라우저 측 작업을 수행하기 위한 useEffect, 그리고 네이티브

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

구성요소를 사용하세요. 당신의 꿈을 기록해보세요.

위 내용은 간단한 React 마이크 구성요소 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!