web audio record를 위한 다양한 js 라이브러리들이 제공되고 있음. 이 중 가장 간단한 Recorder.js 를 이용하여 테스트 진행
https://github.com/mattdiamond/Recorderjs
mattdiamond/Recorderjs
A plugin for recording/exporting the output of Web Audio API nodes - mattdiamond/Recorderjs
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 목록에 오디오 파일이 출력된다.
'일하는 > Audio' 카테고리의 다른 글
| Web Audio API (0) | 2021.06.03 |
|---|---|
| Speech detection using pyaudio (0) | 2021.03.16 |
| pyaudio 기본 사용 방법 (0) | 2021.03.16 |