모바일 웹 브라우저에서 녹음 기능

Question

const record &#61; document.getElementById(&#34;record&#34;)const stop &#61; document.getElementById(&#34;stop&#34;)const soundClips &#61; document.getElementById(&#34;sound-clips&#34;)const chkHearMic &#61; document.getElementById(&#34;chk-hear-mic&#34;)const audioCtx &#61; new(window.AudioContext || window.webkitAudioContext)() // 오디오 컨텍스트 정의const analyser &#61; audioCtx.createAnalyser()// const distortion &#61; audioCtx.createWaveShaper()// const gainNode &#61; audioCtx.createGain()// const biquadFilter &#61; audioCtx.createBiquadFilter()function makeSound(stream) { const source &#61; audioCtx.createMediaStreamSource(stream) //source.connect(analyser) // analyser.connect(distortion) // distortion.connect(biquadFilter) // biquadFilter.connect(gainNode) // gainNode.connect(audioCtx.destination) // connecting the different audio graph nodes together //analyser.connect(audioCtx.destination) const gainNode &#61; audioCtx.createGain(); // Gain 노드 생성 gainNode.gain.setValueAtTime(1, audioCtx.currentTime); // 초기 게인값을 1로 설정 source.connect(gainNode); gainNode.connect(audioCtx.destination); // 마지막으로 스피커와 연결}if (navigator.mediaDevices) { console.log('getUserMedia supported.') const constraints &#61; { audio: true } let chunks &#61; [] navigator.mediaDevices.getUserMedia(constraints) .then(stream &#61;> { const mediaRecorder &#61; new MediaRecorder(stream) chkHearMic.onchange &#61; e &#61;> { if(e.target.checked &#61;&#61; true) { audioCtx.resume() makeSound(stream) } else { audioCtx.suspend() } } record.onclick &#61; () &#61;> { mediaRecorder.start() console.log(mediaRecorder.state) console.log(&#34;recorder started&#34;) record.style.background &#61; &#34;red&#34; record.style.color &#61; &#34;black&#34; } stop.onclick &#61; () &#61;> { mediaRecorder.stop() console.log(mediaRecorder.state) console.log(&#34;recorder stopped&#34;) record.style.background &#61; &#34;&#34; record.style.color &#61; &#34;&#34; } mediaRecorder.onstop &#61; e &#61;> { console.log(&#34;data available after MediaRecorder.stop() called.&#34;) const clipName &#61; prompt(&#34;오디오 파일 제목을 입력하세요.&#34;, new Date()) const clipContainer &#61; document.createElement('article') const clipLabel &#61; document.createElement('p') const audio &#61; document.createElement('audio') const deleteButton &#61; document.createElement('button') clipContainer.classList.add('clip') audio.setAttribute('controls', '') deleteButton.innerHTML &#61; &#34;삭제&#34; clipLabel.innerHTML &#61; clipName clipContainer.appendChild(audio) clipContainer.appendChild(clipLabel) clipContainer.appendChild(deleteButton) soundClips.appendChild(clipContainer) audio.controls &#61; true const blob &#61; new Blob(chunks, { 'type': 'audio/ogg codecs&#61;opus' }) chunks &#61; [] const audioURL &#61; URL.createObjectURL(blob) audio.src &#61; audioURL console.log(&#34;recorder stopped&#34;) deleteButton.onclick &#61; e &#61;> { evtTgt &#61; e.target evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode) } } mediaRecorder.ondataavailable &#61; e &#61;> { chunks.push(e.data) console.log(chunks); } }) .catch(err &#61;> { console.log('The following error occurred: ' &#43; err) }) }이런식으로 코드를 짜서 모바일로도 음성녹음이 가능한 상태입니다.문제는 음성녹음을한후 녹음한 파일의 사운드를 들어보면 통화하는 부분쪽에서 사운드가 들리는 문제가 생깁니다제가 원하는건 스피커쪽에서 사운드가 들렸으면 하는데.....그런데 또 녹음이 끝난후 마이크 권한을 끊어버리면 스피커 쪽으로 사운드가 돌아오는데 왜그러는걸까요.....도와주세요 ㅠㅠㅠㅠ

shintwl · Answer

이게 답이 될 수 있을 것 같습니다https://stackoverflow.com/questions/26263132/programatically-record-audio-output-from-web-page-using-js-or-html5

모바일 웹 브라우저에서 녹음 기능

1개의 답변

기술 목록