[TypeScript] 내 목소리 재생

소개

이번에는 Web Audio API로 나만의 목소리를 재생합니다.

환경

Node.js 버전 16.7.0

TypeScript 버전 4.3.5

웹팩 버전 5.42.0

ts-loader ver.9.2.3",

webpack-cli 버전 4.7.2

기본 사용법

오디오 데이터를 제어하려면 먼저 "AudioContext"를 만듭니다.
오디오 설정 및 볼륨 업/다운 등의 각 작업을 "AudioNode"로 표현합니다.

입력에서 출력까지 모든 "AudioNode"를 연결합니다.

마이크 사용

이번에는 마이크를 사용합니다.
이를 위해 "getUserMedia"로 장치를 가져옵니다.

main.page.ts

export async function init(): Promise<void> {
    // Get audio(microphone)
    const medias = await navigator.mediaDevices.getUserMedia({
        video: false,
        audio: true,
    });
    const audioContext = new AudioContext();
    const audioSourceNode = audioContext.createMediaStreamSource(medias);
    // By default, use speaker of the computer as output
    audioSourceNode
        .connect(audioContext.destination);
}

효과 추가

효과를 연결할 수 있습니다.

main.page.ts

export async function init(): Promise<void> {
...
    audioContext = new AudioContext();
    const audioSourceNode = audioContext.createMediaStreamSource(medias);

    // volume up    
    const gain = audioContext.createGain();
    gain.gain.value = 2.0;
    // delay the sound
    const delay = new DelayNode(audioContext);
    delay.delayTime.value = 1;
    // output only right channel
    const panner = new StereoPannerNode(audioContext, { pan: 1 });

    audioSourceNode
        .connect(gain)
        .connect(delay)
        .connect(panner)
        .connect(audioContext.destination);
}

얻다

지연

패너

효과 값 업데이트

연결 후 효과 값을 업데이트할 수 있습니다.

다음에는 더 많은 효과를 보도록 하겠습니다.

채널 분할 및 병합

분할 채널

"createChannelSplitter"로 채널을 좌우로 분할할 수 있습니다.

main.page.ts

export async function init(): Promise<void> {
...
    // volume up    
    const gain = audioContext.createGain();
    gain.gain.value = 2.0;
    // delay the sound
    const delay = new DelayNode(audioContext);
    delay.delayTime.value = 1;
    // output only right channel
    const panner = new StereoPannerNode(audioContext, { pan: 1});

    const splitter = audioContext.createChannelSplitter(2);
    audioSourceNode.connect(splitter);
    splitter.connect(gain, 1);
    splitter.connect(delay, 1);
    // No any effects...
    splitter.connect(panner, 1);
    splitter.connect(audioContext.destination);
}

오디오 소스가 "ChannelSplitterNode"에 의해 모노가 되었기 때문에 다시 패닝할 수 없습니다.
따라서 샘플 코드의 "StereoPannerNode"가 작동하지 않습니다.

소스 병합

분할 후 "ChannelMergerNode"로 병합할 수 있습니다.

main.page.ts

export async function init(): Promise<void> {
...
    // volume up    
    const gain = audioContext.createGain();
    gain.gain.value = 2.0;
    // delay the sound
    const delay = new DelayNode(audioContext);
    delay.delayTime.value = 0.1;

    const splitter = audioContext.createChannelSplitter(2);
    audioSourceNode.connect(splitter);
    splitter.connect(gain, 1);
    splitter.connect(delay, 1);

    const merger = audioContext.createChannelMerger(2);
    gain.connect(merger, 0, 1);
    delay.connect(merger, 0, 1);
    splitter.connect(merger, 1, 0);
    merger.connect(audioContext.destination);
}

자원

Web Audio API - Web API | MDN

MediaStream - Web API | MDN

ChannelMergerNode - Web API | MDN

ChannelSplitterNode - Web API | MDN

DOM - BaseAudioContext.createChannelSplitter - 解決方法

ChromeでWebRTCステレオ配信 | さくらのナレッジ