6/24–3 часа спринт
Цель эксперимента 5:
Предварительный просмотр динамического альбома с музыкальным визуализатором
- Визуализация и анимация музыкального визуализатора Bar-Wave, например: https://aframe.io/examples/showcase/audio-visualization/
- Отображение нескольких кнопок альбома
- On-Gaze Изменить выбранную рамку альбома, среду альбома и дорожку альбома
Эксперимент 5 отправлен:
Предварительный просмотр динамического альбома с музыкальным визуализатором
Пример ниже работает, только если автовоспроизведение включено. Если вы используете Chrome, это маловероятно - я предлагаю использовать следующую ссылку в Firefox.
Https://musicworldtest4.neocities.org/
который…
- Визуализирует и анимирует музыкальный визуализатор Bar-Wave, например: https://aframe.io/examples/showcase/audio-visualization/
- Отображает несколько кнопок альбома
- On-Gaze Изменить окно выбранного альбома, среду альбома и дорожку альбома .
Резюме:
Это очень захватывающий спринт, поскольку мы пытаемся интегрировать сцену музыкальной дискографии, которую мы создали в эксперименте 1–3, с простым визуализатором музыки, созданным в спринте Эксперимент 4.
Обычно я бы не рекомендовал это, но если вы не читали предыдущие статьи из этой серии, вероятно, стоит потратить время, поскольку я использую эти практические результаты в качестве отправной точки этой статьи. Давай займемся этим!
API веб-аудио, часть 2
Мой первоначальный подход к этому спринту заключался в том, чтобы переместить логику из визуализатора (находится здесь: https://musicworldtest3.neocities.org/) в нашу дискографию альбома с одной сценой (находится здесь: https: //musicworldtest2.neocities .org / ). Идея заключалась в том, чтобы реорганизовать логику визуализатора музыки, поместив ее в тег скрипта в качестве последнего компонента, зарегистрированного в нашем index.html. Позже мы указали нашу логику визуализатора на собственный звуковой компонент A-Frame (через его идентификатор) для воспроизведения и анализа mp3-файла, прикрепленного в данный момент к этому компоненту - вспомните в наших предыдущих статьях, что щелчок / просмотр обновлял альбом атрибут src для нашего звукового компонента. Достаточно просто. Вместо того, чтобы создавать новый звуковой контекст, место назначения и источник звука, мы просто скопируем уже воспроизводимый.
Скорее всего, моя обнадеживающая наивность вышла из-под иронии в этом заключительном предложении, но на случай, если это не так, я объясню это: на этот раз мне очень не удалось использовать надежную сеть Аудио API эффективно.
В итоге я потратил здесь много драгоценного времени, вероятно, около 90 минут, запутывая себя, пытаясь напрямую сопоставить те небольшие знания, которые я получил в предыдущем спринте, с этим явно более сложным упражнением. Я считаю, что большая часть моей боли была связана с API веб-аудио с неизвестным уровнем функциональности, добавленным из компонента A-Frame ‹a-sound›. Как мне получить доступ к аудиоконтексту этого компонента? Можно ли было вообще управлять аудиоузлами с промежуточным слоем?
Потеряв здесь счет различных подходов, я бросил это полотенце, когда на одной итерации щелкнув разные альбомы, сделал переключение, воспроизведение и анализ соответствующей дорожки; однако предыдущий трек не останавливался, что приводило к тому, что несколько треков воспроизводились, все искажали сами себя, в то время как один бедный узел анализа отчаянно пытался проанализировать все входящие усиления. Как следствие, столбцы визуализатора пытались не отставать от результатов анализа - менее чем за 15 секунд тестирования этой сборки мой браузер завис, затем последовал сбой графического драйвера и принудительный перезапуск моего ноутбука ...
Маршрутизация нашей логики аудиовизуализатора через собственный компонент ‹a-sound› придется подождать. Вернуться к доске для рисования…
Link Traversals
Я застрял. Поэтому я решил обратиться к источнику всего этого, документации A-Frame, чтобы проверить, может ли какой-либо упущенный из виду компонент стимулировать творчество. Мое внимание привлек один любопытный компонент, которым я раньше не пользовался: нативный компонент ‹a-link›.
Моя первая мысль была связана с возможностью протолкнуть этот спринт с помощью, хотя и очень монотонного и повторяющегося решения: мы могли бы развернуть три отдельных, отдельных веб-сайта, которые функционируют одинаково и связаны друг с другом. Пользователи сначала посещают один сайт, а затем полностью перенаправляются на другой сайт, когда нажимают на другой альбом. Моей последующей мыслью было то, что это решение было не только очень посредственным, но и обеспечило совершенно невыносимое взаимодействие с пользователем. Создание ссылок на внешние html файлы было бесполезным ...
Но это привело к первой продуктивной альтернативе: можем ли мы каким-то образом связать несколько внутренних файлов html? Это потребует значительно меньше ручной работы и обеспечит лучший пользовательский интерфейс.
Примерно через 15 минут у нас было три разных набора файлов «index.html» и «visualizer.js», каждый из которых соответствует одному из трех состояний альбома. Просмотр альбома по-прежнему переносил пользователя на новую сцену с соответствующей средой и дорожкой. Потрясающе, воспроизведение трека подтверждает, что логика нашего веб-аудио API и визуализатора осталась безупречной. Все, что осталось сейчас, - это сгенерировать объекты, которые мы собираемся использовать для визуализации данных об усилении, проходящих через наш узел анализа… иначе говоря, построить фактический визуализатор.
Привет, тригонометрия, мой старый друг
Для нашего визуализатора я хотел полностью окружить пользователя тремя концентрическими кругами, каждый из которых содержит столбцы разного размера, расположенные по их периметру. В настоящее время он отображает только пять печальных столбцов, расположенных по прямой линии вдоль оси X.
К счастью, здесь используется внешняя логика для размещения каждого кольца столбцов с довольно простой геометрией. Мы хотим разместить столбцы в идеальном круге вокруг пользователя в точке (0,0,0). Для этого нам нужно убедиться, что все столбцы N находятся на одинаковом расстоянии R от пользователя. Хитрость заключается в том, чтобы помнить, что пара осей на уровне глаз - это не X и Y, а X и Z. Мы можем выбрать произвольное расстояние R, например 20 единиц ,, а затем использовать простые функции Sin () и Cos () для вычисления точных значений X и Z для кругового позиционирования. Пример приведен ниже:
var entityEl = document.createElement('a-entity');
entityEl.setAttribute('position', {
x: 20*Math.cos(degreeCounter*(Math.PI/180)), y: .5,
z: 20*Math.sin(degreeCounter*(Math.PI/180))});
Прохождение функции выше приводит к единственному кольцу столбцов, нам нужно три кольца. Итак, следующий шаг - повторить описанную выше функцию еще два раза, но с другим значением R оба раза.
За менее чем ~ 15 минут до конца мы сопоставили выходные данные узла анализатора с атрибутом высоты наших столбцов круга визуализатора и отправились в Neocities, чтобы развернуть следующее:
Как видно из приведенного выше GIF-изображения, мы успешно реализовали красивый визуализатор с тремя кольцами, который окружает исходную позицию пользователя. Аккуратный! Я думаю, что сейчас пора развернуть что-то вроде рисунка выше в личном домене.
Переходим к практике 6 WebVR!
Этот эксперимент можно найти здесь: https://musicworldtest4.neocities.org/
Используемые новые общедоступные компоненты и технологии:
