MediaStream API를 사용하여 오디오를 녹음하는 방법

이 자습서는 미디어 캡처 및 스트림 API (MediaStream API)를 사용하여 오디오 녹음 및 서버 측 스토리지를위한 웹 응용 프로그램을 구축하는 것을 보여줍니다. 사용자는 오디오를 녹음하고, 서버에 저장하고, 저장된 녹음을보기/재생합니다. 서버 측은 Node.js 및 Express와 함께 구현되며 클라이언트 측은 HTML, CSS (Bootstrap) 및 JavaScript를 사용합니다.

주요 기능 :

클라이언트 측 녹화 :

MediaStream API는 마이크 액세스 및 오디오 녹음을 처리합니다. 레코드 버튼이있는 간단한 인터페이스는 프로세스를 제어합니다.

서버 측 스토리지 : Multer Middleware가있는 Node.js/Express 서버는 지정된 디렉토리의 오디오 파일 업로드 및 스토리지를 관리합니다. 재생 및 관리 : 사용자는 웹 페이지에서 저장된 녹음을 직접 재생할 수 있습니다. 폐기 옵션은 녹음을 삭제할 수 있습니다

서버 설정 (node.js & express) :

• 프로젝트 초기화 : 프로젝트 디렉토리 생성, npm () 초기화 및 종속성을 설치합니다 (). 서버 생성 (index.js) : 기본 익스프레스 서버는 라우팅 및 파일 업로드를 처리하도록 만들어졌습니다. Multer Integration : Multer Middleware는 파일 업로드를 처리하도록 구성되어 고유 한 파일 이름에 대한 타임 스탬프가있는 디렉토리에 저장합니다. API 엔드 포인트 :
> 두 개의 API 엔드 포인트가 정의되어 있습니다. (Post) 레코딩 업로드 및 저장된 녹음 목록을 검색하려면 (get).
• 서버 시작 : 서버는 . 를 사용하여 시작됩니다 녹화 페이지 (클라이언트 측) :
HTML 구조 :
• html 페이지 ()는 레코드 버튼, 오디오 플레이어 컨테이너 및 저장된 레코딩을 표시 할 컨테이너와 함께 생성됩니다. 부트 스트랩은 스타일링에 사용됩니다 CSS 스타일링 () : CSS 스타일 인터페이스 요소 javaScript logic () : JavaScript는 사용자 상호 작용을 처리하고 를 사용하여 녹화하고 Fetch API를 사용하여 업로드합니다. 이벤트 리스너는 녹음 시작/정지, 저장, 버려지는 및 재생을 관리합니다
워크 플로 :

사용자는 레코드 버튼을 클릭합니다 브라우저는 마이크 액세스를위한 프롬프트입니다 허가되면 오디오 녹음이 시작됩니다 정지시 녹음은 얼룩으로 저장됩니다 사용자는 녹음을 저장하거나 버릴 수 있습니다 저장된 레코드는
1. 엔드 포인트를 통해 서버에 업로드됩니다.
엔드 포인트는 페이지에 표시 할 저장된 파일 목록을 검색합니다.
결론 :
4. 이 자습서는 기능적 오디오 녹음 응용 프로그램 구축에 대한 포괄적 인 안내서를 제공합니다. MediaStream API와 잘 구조화 된 서버 측 구성 요소를 사용하면 강력하고 사용자 친화적 인 경험을 보장합니다. 추가 향상에는 파일 검증, 사용자 인증 및 개선 된 UI 요소와 같은 고급 기능이 포함될 수 있습니다. 미디어 스트림 API에 대한 FAQS :
미디어 스트림 API는 무엇입니까?
6. 캡처, 조작 및 스트리밍 오디오 및 비디오를위한 웹 API. /record 어떻게 작동합니까?
JavaScript를 통해 장치 (마이크, 카메라)의 멀티미디어 스트림에 대한 액세스를 제공합니다. 오디오 및 비디오 지원?
7. 는 모두 비디오 캡처? /recordings
를 사용하여 카메라에 액세스하십시오 화면 공유?

가능하지만 추가 브라우저 권한이 필요할 수 있습니다

위 내용은 MediaStream API를 사용하여 오디오를 녹음하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!