새싹 해커톤 : 생성 AI 활용

안녕하세요, 멘토님.

현재 프로젝트에서 음성 품질 문제로 인해 어려움을 겪고 있습니다. 기능에 대한 배경과 요약된 코드를 아래와 같이 정리하여 문제점에 대해 말씀드리겠습니다.

• 프론트엔드 음성 녹음 및 처리
• 녹음: 사용자의 음성을 MediaRecorder API를 통해 녹음합니다. 이와 함께 AudioContext와 AudioWorklet을 사용하여 오디오 품질을 개선하려고 합니다.
• 음성 변환: 녹음된 음성을 WAV 형식으로 변환하여 백엔드로 전송합니다. 이 과정에서 AudioContext를 사용하여 WAV 파일 헤더를 작성하고, DataView를 통해 PCM 샘플을 기록합니다.
• 백엔드 처리
• 음성 인식: 백엔드에서는 음성 데이터를 텍스트로 변환하는 Speech-to-Text 서비스를 사용하고 있습니다.

프론트엔드에서 녹음된 음성의 품질이 낮아 백엔드에서 텍스트 변환의 정확도가 떨어지고 있습니다.

MediaRecorder API를 사용하여 음성을 녹음하고 있으며, AudioContext와 AudioWorklet을 통해 오디오 품질을 개선하도록 구현했습니다.

노이즈 감소 및 오디오 필터링을 최적화할 수 있는 방법에 대해 조언을 부탁드립니다. AudioContext 및 AudioWorklet에서 음성 품질을 개선하기 위한 설정이나 기법이 있는지 알려주시면 좋겠습니다.

녹음된 음성을 WAV 파일로 변환할 때, AudioContext를 사용하여 오디오 데이터를 PCM 형식으로 변환하고, WAV 헤더를 직접 작성합니다. 이 과정에서 DataView를 사용하여 WAV 파일의 헤더를 작성하고 PCM 데이터를 기록합니다.

WAV 파일을 백엔드로 전송할 때 품질을 최대한 유지할 수 있는 방법에 대해 조언을 부탁드립니다. 파일 변환 과정에서 품질 손실이 발생할 수 있는지, 이를 최소화할 수 있는 방법이 있는지 확인하고 싶습니다.

• 음성 녹음:

const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();

MediaRecorder API를 사용하여 사용자의 음성을 녹음합니다.

• WAV 파일 변환:

const convertBlobToWav = async (blob) => {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)({
    sampleRate: 16000,
  });
  const arrayBuffer = await blob.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  const numberOfChannels = audioBuffer.numberOfChannels;
  const length = audioBuffer.length * numberOfChannels * 2 + 44;
  const buffer = new ArrayBuffer(length);
  const view = new DataView(buffer);
  
  // WAV 파일 헤더 작성
  writeString(view, 0, 'RIFF');
  view.setUint32(4, 36 + audioBuffer.length * numberOfChannels * 2, true);
  writeString(view, 8, 'WAVE');
  writeString(view, 12, 'fmt ');
  view.setUint32(16, 16, true);
  view.setUint16(20, 1, true);
  view.setUint16(22, numberOfChannels, true);
  view.setUint32(24, 16000, true);
  view.setUint32(28, 16000 * 2 * numberOfChannels, true);
  view.setUint16(32, numberOfChannels * 2, true);
  view.setUint16(34, 16, true);
  writeString(view, 36, 'data');
  view.setUint32(40, audioBuffer.length * numberOfChannels * 2, true);
  
  // PCM 샘플 작성
  const offset = 44;
  for (let i = 0; i < audioBuffer.length; i++) {
    for (let channel = 0; channel < numberOfChannels; channel++) {
      const sample = audioBuffer.getChannelData(channel)[i];
      const intSample = sample < 0 ? sample * 32768 : sample * 32767;
      view.setInt16(offset + (i * numberOfChannels + channel) * 2, intSample, true);
    }
  }
  return new Blob([buffer], { type: 'audio/wav' });
};

AudioContext와 DataView를 사용하여 WAV 파일 헤더를 작성하고 PCM 데이터를 기록합니다.

• 음성 전송:

const formData = new FormData();
formData.append('audio', sound);
const audioResponse = await getAudioFeedback(formData);

FormData를 사용하여 WAV 파일을 백엔드로 전송합니다