Аудио HTML5 и API веб-аудио — лучшие друзья

В рамках интеграции MediaStream с WebRTC в API веб-аудио недавно появился секретный драгоценный камень, известный как createMediaElementSource() . По сути, он позволяет подключить элемент HTML5 <audio> в качестве источника входных данных для API. С точки зрения непрофессионала... вы можете визуализировать аудио HTML5, выполнять мутации звука в реальном времени, фильтровать и т. д.!

Обычно API веб-аудио работает путем загрузки песни через XHR2 , ввода файла и т. д. и все готово. Вместо этого этот хук позволяет объединить HTML5 <audio> с визуализацией, фильтрацией и вычислительной мощностью API веб-аудио.

Интеграция с <audio> идеально подходит для потоковой передачи довольно длинных аудиоматериалов. Допустим, ваш файл длится 2 часа. Вы не хотите расшифровывать все это! Это также интересно, если вы хотите создать высокоуровневый API-интерфейс медиаплеера (и пользовательский интерфейс) для воспроизведения/паузы/поиска, но хотите применить некоторую дополнительную обработку/анализ.

Вот как это выглядит:

// 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 (в частности, API navigator.getUserMedia() ) для передачи аудиовхода (например, микрофона, микшера, гитары) в тег <audio> , а затем визуализировать его с помощью тега <audio>. API веб-аудио. Мега бум!