오봉이와 함께하는 개발 블로그

jQuery - 응용 예제(음성 녹음, 녹음 파일 저장) 본문

FE/jQuery

jQuery - 응용 예제(음성 녹음, 녹음 파일 저장)

오봉봉이 2021. 12. 15. 17:01
728x90

응용 예제

  • 음성 녹음
    • 음성 녹음 ([녹음] / [정지])
    • 파일로 저장
  • WebRTC
    • 별도의 플러그인 없이 웹에서 RTC(Real-Time Communications)를 구현하기 위해 HTML5에 새로 추가된 기능
    • https://webrtc.org
음성 녹음 예제 - voiceRecord.html, voiceRecord.js
 <script src="jquery-3.6.0.min.js"></script>
        <script src= "voiceRecord.js"></script>
        <script type="text/javascript">

        </script>
</head>
<body>
    <button id="record">녹음</button>
    <button id="stop">정지</button>
    <div id="sound-clips"></div>
</body>
$(document).ready(function(){
    const record = document.getElementById('record');
    const stop = document.getElementById('stop');
    const soundClips = document.getElementById('sound-clips');

    if(navigator.mediaDevices){
        var constraints = {
                audio:true
        }

        let chunks = []; // 녹음 데이터 저장하기 위한 변수

        navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
            const mediaRecorder = new MediaRecorder(stream);

            // 녹음 버튼 클릭했을 때
            record.onclick = () => {
                mediaRecorder.start(); //녹음 시작
                record.style.background = "red";
                record.style.color = "black";
            };


            // 정지 버튼 눌렀을 때
            stop.onclick = () => {
                mediaRecorder.stop(); // 녹음 정지
                record.style.background = "";
                record.style.color = "";
            };

            mediaRecorder.onstop = e => {
                // (1) <audio> 태그 담을 컨테이너 객체 생성
                const clipcontainer = document.createElement('article');                    

                // (2) audio 객체 생성 및 속성 설정
                const audio = document.createElement('audio');    
                audio.setAttribute('controls', '');

                // (3) 컨테이너에 audio 연결
                clipcontainer.appendChild(audio);

                // <div>에  <audio> 태그 출력
                // 이전에 녹음할 때 추가한 childNode가 존재한다면 제거하고
                if(soundClips.hasChildNodes())
                    soundClips.removeChild(soundClips.childNodes[0]);
                //추가
                soundClips.appendChild(clipcontainer);

                // chunks에 저장된 녹음 데이터를  audio 양식으로 설정
                const blob = new Blob(chunks, {
                    'type': 'audio/mp3 codecs=opus'
                });

                // chunks 초기화 (초기화 하지 않으면 녹음 내용이 누적 저장됨)
                chunks = [];

                // audio 소스 지정
                const audioURL = URL.createObjectURL(blob);
                audio.src = audioURL;


                // (4) 녹음 내용을 파일로 저장
                // 파일명
                const clipName = "voiceRecord"
                const a = document.createElement('a');
                clipcontainer.appendChild(a);
                a.href = audio.src;

                a.download = clipName;
                a.click();
                };


                // 녹음 시작 상태가 되면 chunks에   녹음 데이터 저장
                mediaRecorder.ondataavailable = e => {
                    chunks.push(e.data);
                };

        })
        .catch(err => {
            console.log("오류 발생 : " + err)
        })
    }
});
728x90
저작자표시

'FE > jQuery' 카테고리의 다른 글

jQuery - canvas 태그  (0) 2021.12.15
jQuery - 효과  (0) 2021.12.15
jQuery - DOM 요소 클래스 속성(CSS 동적 적용)  (0) 2021.12.15
jQuery - DOM 요소의 추가 및 삭제  (0) 2021.12.15
jQuery - DOM 요소 조작  (0) 2021.12.15
'FE/jQuery' Related Articles more
Comments