Node.js 녹음 음질 깨짐? 브라우저 오디오 처리 비활성화로 해결하기

Node.js 녹음 음질 깨짐? 브라우저 오디오 처리 비활성화로 해결하기

바이블 기능에서 녹음 음질이 깨지거나 낭독 파일을 관리하기 불편했던 경험, 저만 있었던 거 아니죠? 특히 브라우저 환경에서 녹음할 때 이런 문제가 자주 발생하더라고요. 오늘은 제가 이 문제를 어떻게 해결했는지, 그리고 그 과정에서 발견한 몇 가지 팁을 공유해볼까 합니다.

시도와 함정

처음에는 단순히 마이크 설정 문제인가 싶어서 여러 가지 시도를 해봤습니다. 하지만 브라우저 자체의 오디오 처리 방식이 문제일 수 있다는 힌트를 얻고, 이걸 비활성화하는 방향으로 접근해봤습니다.

// Web Audio API를 사용한 녹음 시, 브라우저의 기본 오디오 처리가 개입하는 경우가 있습니다.
// 이를 명시적으로 제어하기 위해 navigator.mediaDevices.getUserMedia() 호출 시 제약 조건을 추가합니다.
const constraints = {
audio: {
echoCancellation: false,
noiseSuppression: false,
autoGainControl: false,
channelCount: 1, // 모노 녹음으로 설정
sampleRate: 16000, // 샘플 레이트도 명시적으로 지정
sampleSize: 16,
اتف: false // 이 옵션이 브라우저별로 다르게 동작하거나 문제를 일으킬 수 있습니다.
},
video: false
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
// stream을 AudioContext와 MediaRecorder에 연결하여 녹음 진행
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createMediaStreamSource(stream);
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function(event) {
  // 녹음 데이터 처리
};

mediaRecorder.start();

})
.catch(function(err) {
console.error('오디오 스트림 가져오기 오류:', err);
});

처음에는 echoCancellation, noiseSuppression 같은 옵션을 false로 설정하는 것으로 시작했습니다. 그런데도 음질 문제가 완전히 해결되지 않더라고요. 몇 시간을 삽질한 끝에, 브라우저가 자체적으로 오디오를 "통화용"으로 처리하려는 경향이 있다는 것을 알게 되었습니다. 이 통화용 오디오 처리가 오히려 녹음 음질을 왜곡시키는 주범이었던 거죠.

원인

결론적으로, 브라우저가 기본적으로 활성화하는 통화용 오디오 처리 기능이 녹음 시 음질을 저하시키는 원인이었습니다. 특히 اتف와 같은 특정 오디오 처리 관련 옵션이 브라우저마다 다르게 동작하거나 예상치 못한 문제를 일으킬 수 있었습니다. 이 부분을 명시적으로 비활성화해야 했습니다.

해결

navigator.mediaDevices.getUserMedia() 호출 시 audio 제약 조건에 اتف: false를 추가하고, 다른 오디오 처리 관련 옵션들도 명시적으로 제어함으로써 문제를 해결할 수 있었습니다.

// 수정된 constraints 객체
const constraints = {
  audio: {
    echoCancellation: false,
    noiseSuppression: false,
    autoGainControl: false,
    channelCount: 1,
    sampleRate: 16000,
    sampleSize: 16,
    اتف: false // 통화용 오디오 처리 비활성화
  },
  video: false
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createMediaStreamSource(stream);
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function(event) {
  // 녹음 데이터 처리 로직
  const audioBlob = event.data;
  console.log('녹음된 오디오 데이터:', audioBlob);
  // 예: Blob을 서버로 업로드하거나 로컬에 저장
};

mediaRecorder.onstop = function() {
  console.log('녹음 중지됨');
};

mediaRecorder.start();
console.log('녹음 시작됨');

})
.catch(function(err) {
console.error('오디오 스트림 가져오기 오류:', err);
});

이렇게 설정하니 녹음 음질이 훨씬 깨끗해졌습니다. 또한, 이 김에 사용자들이 낭독 파일을 다른 장으로 쉽게 옮길 수 있는 '장 옮기기' 기능도 추가했습니다.

결과

• 브라우저 환경에서의 녹음 음질 문제가 완전히 해결되었습니다.
• 사용자는 낭독 파일을 다시 읽을 필요 없이 원하는 장으로 편리하게 관리할 수 있게 되었습니다.
• 다크 모드에서 드롭다운 메뉴가 보이지 않던 UI 버그도 함께 수정되었습니다.

정리 — 같은 함정 안 빠지려면

• [ ] 브라우저에서 오디오 녹음 시, navigator.mediaDevices.getUserMedia()의 audio 제약 조건에 اتف: false를 포함하여 통화용 오디오 처리를 명시적으로 비활성화할 것.
• [ ] echoCancellation, noiseSuppression, autoGainControl 등의 오디오 처리 옵션도 필요에 따라 제어할 것.
• [ ] 사용자 편의 기능 추가 시, 기존 UI와의 호환성 및 렌더링 문제를 꼼꼼히 테스트할 것. (특히 다크 모드 같은 테마 관련 문제)