Як візуалізувати звук в інтернеті: добірка тематичних матеріалів і відеолекцій з теорією і практикою
Підбірка посібників по темі для розробників веб-додатків та ігор.
Теорія та історія
Член команди розробників Ableton, програми для студійної роботи зі звуком, розбирає кілька поширених алгоритмів виділення основного тону (повторюваного циклу звукової хвилі) в музичних записах. Прикладами можуть бути: метод нульового перетину і метод, заснований на виявленні основної гармоніки. Автор також наводить кілька матеріалів для додаткового читання, в яких розбираються вдосконалені підходи до виділення основного тону. Стаття може бути цікава тим, хто планує писати музичний додаток, що відображає графіки звукових хвиль.
Це - відеозапис одного з виступів на конференції Scotland JS. Редактор газети Web Audio Weekly Кріс Ловіс (Chris Lowis) розповідає, як розвивалися синтезатори, і розбирає принципи їх роботи. Все це з прикладами на JS.
Розробники з Mozilla говорять про функції Web Audio API - специфікації для управління аудіоконтенту в браузерах. Описано як базові речі на зразок взаємодії з аудіобуферамі, так і більш просунуті (наприклад, візуалізація звуку). Багато графіків, схем і прикладів коду. Матеріал регулярно доповнюється - його можна використовувати як «настільний» довідник при розробці додатків.
Канал на YouTube, присвячений розбору звукового ряду у відеоіграх з точки зору музичної теорії. Наприклад, в цьому відео автор на прикладах показує, як музика допомагає створити атмосферу в грі Hollow Knight, а тут мова йде про одну з фінальних композицій в Dark Souls. Канал може стати в нагоді тим, хто пише власну гру. Тут можна зачерпнути кілька ідей для її музичного супроводу.
Практика
D3.js - це набір інструментів для візуалізації даних. Він включає в себе модулі для побудови геометричних фігур, управління завантаженням, форматуванням і масштабуванням даних, а також математичні функції. Автори матеріалу розповідають, як з його допомогою будувати графіки звукових хвиль. Приклад роботи програми зі статті можна знайти на GitHub Pages, а його код - в офіційному репозиторії.
Глобальне керівництво по роботі з Web Audio. З його допомогою автор відтворює роботи композиторів Стівена Райха і Брайана Іно - "It's Gonna Rain" і "Discreet Music" відповідно. Дотримуватися інструкцій досить просто (є приклади, схеми і скріншоти) навіть якщо ви не знайомі з Web Audio API.
Запис з JSConf, під час якої Стів Кінні (Steve Kinney), засновник школи розробників Turing School, показує, як побудувати синтезатор в браузері на getUserMedia Web API і WebSockets. Він також розповідає, як за допомогою Web Audio API зібрати музичний інструмент на Arduino.
p5.js - це бібліотека для візуалізації, яка дозволяє «малювати за допомогою коду». На відео її розробник - Лорен Маккарті (Lauren McCarthy) - на прикладах демонструє, як за допомогою цього інструменту створювати художні елементи і анімації. Якщо ви хочете самостійно оцінити можливості p5.js, то на офіційному сайті проекту є спеціальний редактор.
Стаття про те, як за допомогою Web Audio API і фреймворка Tone.js відтворити і візуалізувати 8-бітну музику з Pac-Man, Super Mario Bros, Metroid, Kirby's Adventure і The Legend of Zelda. Прослухати отримані композиції, подивитися код і при бажанні модифікувати його можна на CodePen. Щоб було простіше розібратися в исходниках, автор статті рекомендує спершу подивитися це відео на YouTube - там пояснюється, як «працював» звук в старих комп'ютерах.
Запис виступу Пола Адено (Paul Adenot) - інженера з Mozilla, який працює над браузером Firefox і допомагає W3C з оформленням специфікації Web Audio API. Пол розбирає основні складові techno-треку і показує, як відтворити його на JS. Можна сказати, що це жива сесія музичного програмування.
Джерело : https://habr.com/ru/company/audiomania/blog/464217/
Читати більше