HTML5 오디오와 웹 오디오 API는 절충안

미디어 소스 요소 데모
DEMO

WebRTC와의 MediaStream 통합의 일환으로 Web Audio API는 최근 createMediaElementSource()라는 숨겨진 보석을 출시했습니다. 기본적으로 HTML5 <audio> 요소를 API의 입력 소스로 연결할 수 있습니다. 쉽게 설명하자면 HTML5 오디오를 시각화하고 실시간 사운드 변형, 필터링 등을 할 수 있습니다.

일반적으로 Web Audio API는 XHR2, 파일 입력 등을 통해 노래를 로드하여 작동합니다. 대신 이 후크를 사용하면 HTML5 <audio>를 Web Audio API의 시각화, 필터, 처리 능력과 결합할 수 있습니다.

<audio>와 통합하면 상당히 긴 오디오 애셋을 스트리밍하는 데 적합합니다. 파일 길이가 2시간이라고 가정해 보겠습니다. 전체를 디코딩하고 싶지는 않을 것입니다. 재생/일시중지/탐색을 위한 상위 수준의 미디어 플레이어 API (및 UI)를 빌드하고 싶지만 추가 처리/분석을 적용하려는 경우에도 유용합니다.

결제 탭의 모양은 다음과 같습니다.

// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);

var context = new webkitAudioContext();
var analyser = context.createAnalyser();

// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
    // Our <audio> element will be the audio source.
    var source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);

    // ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);

코드에 언급된 대로 window.onload 후에 소스 설정이 이루어져야 하는 버그가 있습니다.

다음 단계는 crbub.com/112367을 수정하는 것입니다. 준비가 완료되면 WebRTC (특히 navigator.getUserMedia() API)를 연결하여 오디오 입력 (예: 마이크, 믹서, 기타)을 <audio> 태그로 전달한 다음 Web Audio API를 사용하여 시각화할 수 있습니다. 메가 붐!