728x90
web audio record를 위한 다양한 js 라이브러리들이 제공되고 있음. 이 중 가장 간단한 Recorder.js 를 이용하여 테스트 진행
https://github.com/mattdiamond/Recorderjs
GitHub - mattdiamond/Recorderjs: A plugin for recording/exporting the output of Web Audio API nodes
A plugin for recording/exporting the output of Web Audio API nodes - GitHub - mattdiamond/Recorderjs: A plugin for recording/exporting the output of Web Audio API nodes
github.com
원본소스
우선, index.html 파일을 생성하고, 다음과 같이 작성한다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Web audio recorder test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="controls">
<button id="recordButton">Record</button>
<button id="stopButton" disabled>Stop</button>
</div>
<h3>Recordings</h3>
<ol id="recordingsList"></ol>
<!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script src="js/app.js"></script>
</body>
</html>Recorder.js 라이브러리는 "https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js" 를 사용.
js/app.js 파일을 생성하고, 다음과 같이 작성한다.
//webkitURL is deprecated but nevertheless
URL = window.URL || window.webkitURL;
var gumStream; //stream from getUserMedia()
var rec; //Recorder.js object
var input; //MediaStreamAudioSourceNode we'll be recording
// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //new audio context to help us record
var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");
//add events to those 2 buttons
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);startRecording 함수는 다음과 같이 정의한다.
function startRecording() {
console.log("recordButton clicked");
// Disable the record button until we get a success or fail from getUserMedia()
recordButton.disabled = true;
stopButton.disabled = false;
navigator.mediaDevices.getUserMedia({audio: true, video: false}).then(function(stream) {
console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
audioContext = new AudioContext({sampleRate: 16000});
// assign to gumStream for later use
gumStream = stream;
// use the stream
input = audioContext.createMediaStreamSource(stream);
// Create the Recorder object and configure to record mono sound (1 channel) Recording 2 channels will double the file size
rec = new Recorder(input, {numChannels: 1})
//start the recording process
rec.record()
console.log("Recording started");
}).catch(function(err) {
//enable the record button if getUserMedia() fails
recordButton.disabled = false;
stopButton.disabled = true;
});
}getUserMedia() 메서드는 사용자에게 미디어 입력 장치 사용 권한을 요청하며, 사용자가 수락하면 요청한 미디어 종류의 트랙을 포함한 MediaStream을 반환한다.
stopRecording 함수는 다음과 같이 정의한다.
function stopRecording() {
console.log("stopButton clicked");
//disable the stop button, enable the record too allow for new recordings
stopButton.disabled = true;
recordButton.disabled = false;
//tell the recorder to stop the recording
rec.stop(); //stop microphone access
gumStream.getAudioTracks()[0].stop();
//create the wav blob and pass it on to createDownloadLink
rec.exportWAV(createDownloadLink);
}가장 마지막 줄의 exportWAV 함수에 사용되는 callback인 createDownloadLink 함수는 다음과 같이 정의한다.
function createDownloadLink(blob) {
var url = URL.createObjectURL(blob);
var au = document.createElement('audio');
var li = document.createElement('li');
var link = document.createElement('a');
//name of .wav file to use during upload and download (without extension)
var filename = new Date().toISOString();
//add controls to the <audio> element
au.controls = true;
au.src = url;
//save to disk link
link.href = url;
link.download = filename+".wav"; //download forces the browser to download the file using the filename
link.innerHTML = "Save to disk";
//add the new audio element to li
li.appendChild(au);
//add the filename to the li
li.appendChild(document.createTextNode(filename+".wav "))
//add the save to disk link to li
li.appendChild(link);
//add the li element to the ol
recordingsList.appendChild(li);
}index.html 파일을 브라우저에서 로드하면, 아래와 같이 Record 버튼이 활성화되어 있는 것을 확인할 수 있다. 녹음이 완료되면, Recordings 목록에 오디오 파일이 출력된다.
'개발언어 > 자바스크립트' 카테고리의 다른 글
| Access-Control-Allow-Origin, CORS 에러, 크롬 크로스 도메인 (cross domain) 처리 (0) | 2022.03.03 |
|---|---|
| [js] 자바스크립트 쿠키 설정,쿠키 값 얻기,쿠기 삭제 방법 (0) | 2022.03.03 |
| [javascript] MediaRecorder 웹에서 마이크녹음 예제3 (0) | 2022.02.14 |
| [javascript] MediaRecorder 웹에서 마이크녹음 예제2 (0) | 2022.02.14 |
| [javascript] MediaRecorder 웹에서 마이크녹음 예제1 (0) | 2022.02.14 |
