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를 사용하여 시각화할 수 있습니다. 엄청난 붐!