리액트에서 녹음 기능 사용하기

리액트에서 녹음 기능 사용하기

import React, { useState, useCallback } from "react"; const AudioRecord = () => { const [stream, setStream] = useState(); const [media, setMedia] = useState(); const [onRec, setOnRec] = useState(true); const [source, setSource] = useState(); const [analyser, setAnalyser] = useState(); const [audioUrl, setAudioUrl] = useState(); const onRecAudio = () => { // 음원정보를 담은 노드를 생성하거나 음원을 실행또는 디코딩 시키는 일을 한다 const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // 자바스크립트를 통해 음원의 진행상태에 직접접근에 사용된다. const analyser = audioCtx.createScriptProcessor(0, 1, 1); setAnalyser(analyser); function makeSound(stream) { // 내 컴퓨터의 마이크나 다른 소스를 통해 발생한 오디오 스트림의 정보를 보여준다. const source = audioCtx.createMediaStreamSource(stream); setSource(source); source.connect(analyser); analyser.connect(audioCtx.destination); } // 마이크 사용 권한 획득 navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => { const mediaRecorder = new MediaRecorder(stream); mediaRecorder.start(); setStream(stream); setMedia(mediaRecorder); makeSound(stream); analyser.onaudioprocess = function (e) { // 3분(180초) 지나면 자동으로 음성 저장 및 녹음 중지 if (e.playbackTime > 180) { stream.getAudioTracks().forEach(function (track) { track.stop(); }); mediaRecorder.stop(); // 메서드가 호출 된 노드 연결 해제 analyser.disconnect(); audioCtx.createMediaStreamSource(stream).disconnect(); mediaRecorder.ondataavailable = function (e) { setAudioUrl(e.data); setOnRec(true); }; } else { setOnRec(false); } }; }); }; // 사용자가 음성 녹음을 중지했을 때 const offRecAudio = () => { // dataavailable 이벤트로 Blob 데이터에 대한 응답을 받을 수 있음 media.ondataavailable = function (e) { setAudioUrl(e.data); setOnRec(true); }; // 모든 트랙에서 stop()을 호출해 오디오 스트림을 정지 stream.getAudioTracks().forEach(function (track) { track.stop(); }); // 미디어 캡처 중지 media.stop(); // 메서드가 호출 된 노드 연결 해제 analyser.disconnect(); source.disconnect(); }; const onSubmitAudioFile = useCallback(() => { if (audioUrl) { console.log(URL.createObjectURL(audioUrl)); // 출력된 링크에서 녹음된 오디오 확인 가능 } // File 생성자를 사용해 파일로 변환 const sound = new File([audioUrl], "soundBlob", { lastModified: new Date().getTime(), type: "audio" }); console.log(sound); // File 정보 출력 }, [audioUrl]); return ( <> 녹음 결과 확인 ); }; export default AudioRecord;

https://velog.io/@seorim0801/react%EB%A1%9C-%EC%9D%8C%EC%84%B1-%EB%85%B9%EC%9D%8C-%EA%B8%B0%EB%8A%A5%EC%9D%84-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EC%9E%90

from http://eundol1113.tistory.com/318 by ccl(A) rewrite - 2021-12-27 10:27:09