Chrome 49의 웹 오디오 업데이트

크리스 윌슨

트위터

Chrome은 웹 오디오 API에 대한 지원을 꾸준히 조용히 개선해 왔습니다. Chrome 49 (2016년 2월부터 베타가 출시되었으며 2016년 3월에 안정화 버전으로 출시될 예정)에서는 사양을 추적하기 위한 몇 가지 기능을 업데이트하고 새로운 노드도 하나 추가했습니다.

debugAudioData()에서 이제 프로미스를 반환합니다.

이제 AudioContext의 decodeAudioData() 메서드가 Promise를 반환하여 프로미스 기반 비동기 패턴 처리를 사용 설정합니다. decodeAudioData() 메서드는 항상 성공 및 오류 콜백 함수를 매개변수로 사용합니다.

context.decodeAudioData( arraybufferData, onSuccess, onError);

하지만 이제는 표준 프로미스 메서드를 사용하여 오디오 데이터 디코딩의 비동기적 특성을 대신 처리할 수 있습니다.

context.decodeAudioData( arraybufferData ).then(
        (buffer) => { /* store the buffer */ },
        (reason) => { console.log("decode failed! " + reason) });

단일 예에서는 더 상세해 보이지만 프로미스를 사용하면 비동기 프로그래밍이 더 쉽고 일관성이 됩니다. 호환성을 위해 사양에 따라 Success 및 Error 콜백 함수는 계속 지원됩니다.

오프라인 오디오 컨텍스트에서 이제 suspend() 및 restart()가 지원됩니다.

언뜻 보기에는 OfflineAudioContext에 suspend()를 사용하는 것이 이상하게 보일 수 있습니다. 결국 오디오 하드웨어를 대기 모드로 전환할 수 있도록 AudioContext에 suspend()를 추가했습니다. 이는 버퍼에 렌더링하는 시나리오에서는 무의미해 보입니다 (OfflineAudioContext의 용도). 그러나 이 기능의 핵심은 한 번에 '점수'의 일부만 구성하여 메모리 사용량을 최소화하는 것입니다. 렌더링 도중에 정지된 상태에서 더 많은 노드를 만들 수 있습니다.

예를 들어 베토벤의 달빛 소나타에는 약 6,500개의 음이 포함되어 있습니다. 각 '음'은 아마도 두 개 이상의 오디오 그래프 노드(예: AudioBuffer 및 게인 노드)로 분해될 수 있습니다. OfflineAudioContext를 사용하여 7분 30분 전체를 버퍼로 렌더링하려는 경우 이러한 모든 노드를 한 번에 만들고 싶지는 않을 것입니다. 대신 시간 단위로 객체를 만들 수 있습니다.

var context = new OfflineAudioContext(2, length, sampleRate);
scheduleNextBlock();
context.startRendering().then( (buffer) => { /* store the buffer */ } );

function scheduleNextBlock() {
    // create any notes for the next blockSize number of seconds here
    // ...

    // make sure to tell the context to suspend again after this block;
    context.suspend(context.currentTime + blockSize).then( scheduleNextBlock );

    context.resume();
}

이렇게 하면 렌더링을 시작할 때 미리 만들어야 하는 노드 수를 최소화하고 메모리 요구를 줄일 수 있습니다.

IIRFilterNode

이 사양은 정확하게 지정된 자체 infinite-impulse-response를 생성하려는 오디오 애호가를 위한 노드인 IIRFilterNode를 추가했습니다. 이 필터는 BiquadFilterNode를 보완하지만, 유형, 주파수, Q 등을 위해 BiquadFilterNode의 사용하기 쉬운 AudioParams 대신 필터 응답 매개변수의 완전한 지정을 허용합니다. IIRFilterNode를 사용하면 단일 순서 필터와 같이 이전에는 만들 수 없었던 필터를 정밀하게 지정할 수 있습니다. 그러나 IIRFilterNode를 사용하려면 IIR 필터의 작동 방식에 관한 심층적인 지식이 필요하며 BiquadFilterNode처럼 예약할 수도 없습니다.

이전 변경사항

이전에 적용된 몇 가지 개선사항을 언급하고 싶습니다. Chrome 48에서 BiquadFilter 노드 자동화가 오디오 속도로 실행되기 시작했습니다. 이를 위해 API가 전혀 변경되지는 않았지만 이렇게 하면 필터 스윕이 훨씬 더 부드러워집니다. 또한 Chrome 48에서는 연결 중인 노드를 반환하여 AudioNode.connect() 메서드에 체이닝을 추가했습니다. 이렇게 하면 이 예시와 같이 더 간단하게 노드 체인을 만들 수 있습니다.

sourceNode.connect(gainNode).connect(filterNode).connect(context.destination);

이제 여기까지입니다. 계속 즐겨요!