В предыдущей части была сделана визуализация полиритмов в виде шариков, движущихся по орбитам:
Оставалось озвучить это движение.
Каждый раз, когда шарик пересекает горизонтальную ось (т.е. совершает полный оборот), нужно проигрывать соответствующую ему ноту.
Всего 7 шариков, так что я взял ноты аккорда До-минор 13:
C, D#, G, A#, D, F, A
Я подобрал инструмент в FL Studio и сохранил каждую ноту как отдельный звуковой файл в формате WAV.
Чтобы загрузить их в HTML-страницу, воспользуемся встроенным в HTML5 объектом Audio:
Чтобы играть звук, достаточно вызвать метод play() у любого из объектов:
audio[0].play();
Но есть нюанс
Браузер в целях безопасности не позволяет играть никакие звуки, пока пользователь не начал взаимодействие со страницей. Например, он должен нажать какую-то кнопку.
Обычно делают сначала заставку "нажмите кнопку", а потом уже запускают приложение со звуками. Я тут так делать не буду, потому что не хочу морочиться, просто помните, что для проигрывания звуков надо кликнуть по странице.
Остальное донельзя просто. Так как мы уже подсчитываем количество сделанных шариком шагов, то будем проигрывать звук всякий раз, когда оно обнуляется (именно тогда шарик пересекает горизонтальную ось). Я подбирал скорости движения шариков и коэффициенты полиритмов, и в конце концов активировал второе пересечение с горизонтальной осью. Оно происходит, когда шарик проходит половину пути.
Я также добавил глобальную переменную axis_energy, которая увеличивается, когда шарик пересекает горизонтальную линию. Чем больше шариков одновременно пересекает, там сильнее она увеличивается. Далее значение axis_energy передаётся в метод рисования и там на его основе высчитывается цвет горизонтальной оси.
По сути это серый цвет, который будет тем ярче, чем больше энергия. Если энергия не пополняется, из неё вычитается единица в каждом кадре и она постепенно приходит к нулю.
Новый расчёт коэффициентов полиритмов:
Работу скрипта со звуком можно проверить здесь:
Посмотреть исходный код можно, нажав Ctrl-U.
И не забудьте, что для разрешения воспроизведения звука нужно кликнуть по экрану!