Аудиовизуализация с помощью API веб-аудио

Я сделал презентацию для Flatiron School Presents по использованию Javascript для создания аудио визуализаций. Вот видео:

fsp-small.m4v
Dropbox — это бесплатный сервис, который позволяет вам переносить свои фотографии, документы и видео куда угодно и легко делиться ими. Никогда не пишите…www.dropbox.com

Первая половина презентации посвящена D3, над которым я напрямую не работал. Тем не менее, вы можете найти ресурсы для этого в видео и слайдах для моей части ниже:

Web Audio API — это высокоуровневый способ создания и управления звуком прямо в браузере с помощью JavaScript.

Первым способом воспроизведения звуков в Интернете был тег «bgsound», который позволял авторам веб-сайтов автоматически воспроизводить фоновую музыку, когда посетитель открывал их страницы. Эта функция была доступна только в Internet Explorer и никогда не стандартизировалась и не поддерживалась другими браузерами. Netscape реализовал аналогичную функцию с тегом embed, обеспечивая в основном эквивалентную функциональность.

Flash был первым кросс-браузерным способом воспроизведения аудио в Интернете, но у него был существенный недостаток, заключающийся в том, что для запуска требовался подключаемый модуль. Совсем недавно производители браузеров сплотились вокруг элемента HTML5 ‹audio›, который обеспечивает встроенную поддержку воспроизведения звука во всех современных браузерах.

Хотя аудио в Интернете больше не требует подключаемого модуля, тег ‹audio› имеет существенные ограничения для реализации сложных игр и интерактивных приложений.

Вы начинаете с создания контекста, который является объектом, который вы используете для создания других объектов, чтобы создавать звуки и управлять ими.

Аудиоконтекст позволяет вам генерировать звук с нуля или загружать и манипулировать любым существующим аудиофайлом, который у вас может быть. Когда звук проходит через каждый узел, его свойства могут быть изменены или проверены (например, реверберация, громкость, фильтр).