3 прорывных способа визуализации HTML5

«Аудио API предоставит методы для чтения аудиосэмплов, записи аудиоданных, создания звуков и выполнения обработки и синтеза аудио на стороне клиента с минимальной задержкой. Это также добавит программный доступ к аудиопотоку PCM для низкоуровневых манипуляций непосредственно в сценарии ».

Так что, возможно, когда-нибудь в будущем мы увидим общее стандартизированное решение для управления аудиопотоком.

В то же время, давайте вернемся к реальному миру и погрузиться в то , что мы можем сделать с HTML5 сегодня!

Практический подход: что я могу сделать сегодня?

Прежде всего, что именно вам нужно для построения визуализации? Вам нужны данные, которые своевременно выровнены с воспроизведением аудио. Это может быть текстовая информация, например текст песни, данные об уровне громкости или любые другие данные, которые вы хотите воспроизвести.

Где вы можете получить данные? Практическим способом является предварительная обработка . Да уж! Так просто и тривиально …

По сути, вам нужно сделать домашнее задание, если вы хотите визуализировать аудио. Сначала проанализируйте ваш аудиопоток, а затем вы сможете сгенерировать визуализацию, синхронизированную с фоновым звуком.

Например, если вы хотите извлечь семантически важные данные (например, текст песни), предварительная обработка — единственно возможное решение (если у вас нет достаточно искусного ИИ, чтобы понимать слова и предложения в песне).

Обычно это утомительное ручное задание. Вы садитесь, включаете свой аудиоплеер, начинаете воспроизводить песню, запоминаете строку, пауза, записываете ее, смотрите на таймер, записываете текущее время … и делаете это снова и снова. Иногда вы можете просто вытащить его из Интернета куда-нибудь. J

И предварительная обработка просто эффективна. Использование этого подхода экономит вычислительные ресурсы и, следовательно, снижает нагрузку на клиентскую сторону. Это означает, что вы должны вычислить (или записать) свои данные для аудиовизуализации только один раз, а затем просто использовать эти данные, чтобы ваша магия произошла в любое время, когда вы захотите.

Теперь посмотрим, как это работает в реальной жизни …

Работа с реальными примерами

Чтобы познакомиться со всеми замечательными решениями, о которых я сейчас расскажу, вы можете использовать инструменты разработчика в своем любимом браузере. Internet Explorer предоставляет отличные devtools для этой цели (просто нажмите F12!). Вы можете использовать панель «Сценарии» для просмотра кода JavaScript, его отладки, установки точек останова или запуска собственного кода в консоли.

Иногда вам придется иметь дело с уплотненным (или уменьшенным) кодом. В этом случае просто нажмите «Формат JavaScript», чтобы сделать его более читабельным.

Пример № 1: Челл под дождем

Chell in the Rain — потрясающая аудио-текстовая визуализация песни Exile Vilify, созданной Мэтью Меркле . Вы увидите, что текст песни будет идеально синхронизирован с аудиопотоком.

Что внутри

• jQuery + Sizzle.js ( сборка jQuery)
• jPlayer (библиотека для воспроизведения аудио и видео)
• И какой-то код, который нас интересует;)

Как это работает

Песня своевременно разбивается на несколько фрагментов или временных интервалов (или временных интервалов), указывающих на начало фразы или анимацию. Все тайминги хранятся в массиве:

var timings = newArray();
timings[0] = 11.5;
timings[1] = 17;
timings[2] = 24;
timings[3] = 29;
timings[4] = 35.5;

Параллельно существует множество текстов песен:

var lyrics = newArray();
lyrics[0] = 'Exile';
lyrics[1] = 'It takes your mind... again';
lyrics[2] = "You've got sucker's luck";
lyrics[3] ='Have you given up?';

Теперь текущее время воспроизведения можно связать с массивом таймингов и запустить соответствующий триггер события, чтобы перейти к следующей фразе:

if(event.jPlayer.status.currentTime >= timings[currentTrigger] && nolyrics != true) {
    fireTrigger(currentTrigger);
    currentTrigger++;
}

Затем сработавший триггер создает анимацию с использованием jQuery:

function fireTrigger(trigger) {
   switch (trigger) {
      case 0:
         $('#lyrics1 p').addClass('vilify').html(lyrics[0]).fadeIn(1500);
         break;
      case 1:
         $('#lyrics2 p').html(lyrics[1]).fadeIn(1000).delay(5000).fadeOut(1000);
         $('#lyrics1 p').delay(6000).fadeOut(1000);
         break;
      case 2:
         $('#lyrics1 p').fadeIn(1000);
         break;
      case 3:
         $('#lyrics2 p').fadeIn(1000).delay(4000).fadeOut(1000);
         $('#lyrics1 p').delay(5000).fadeOut(1000);
         break;
      case 4:
         $('#lyrics1 p').removeClass('vilify').html(lyrics[2]).fadeIn(1000);
         break;
      case 5:
         $('#lyrics2 p').html(lyrics[3]).fadeIn(1000).delay(3000).fadeOut(1000);
         $('#lyrics1 p').delay(4000).fadeOut(1000);
         break;
...

Это довольно просто и очень эффективно.

Обратите внимание, как легко вы можете смешивать воспроизведение аудиопотока и функции HTML, CSS и JavaScript !

Пример №2: извлечение аудиоданных

В своем блоге Музыка Visualizer в HTML5 / JS с исходным кодом , Грант делится своим опытом с аудио визуализации с помощью HTML5.

Поскольку HTML5 <audio> не предоставляет API для извлечения низкоуровневых данных из аудиофайлов, Grand написал небольшое приложение AIR (с примерами), чтобы помочь нам извлечь данные об уровнях громкости из mp3-файла, а затем сохранить их в текстовый файл или изображение.

При увеличении данные об уровнях громкости выглядят так:

Теперь с этим изображением мы можем легко извлечь все данные, которые нам нужны, используя HTML5 canvas. (И для текстовых файлов это намного проще — я не показываю его, так как нет смысла читать его самостоятельно, так как все данные сжаты.)

Для работы с этим типом предварительно обработанных данных Грант также написал небольшую JS-библиотеку (VolumeData.js, часть ZIP-файла, который я скачал выше).

Чтобы что-то визуализировать, сначала нужно загрузить данные:

loadMusic("music.jpg");

 Функция loadMusic просто загружает изображение:

function loadMusic(dataImageURL) {
   image = new Image();
   image.src = dataImageURL;
   playing = false;
   Ticker.addListener(window);
}

 Теперь вы должны создать новый объект VolumeData:

volumeData = new VolumeData(image);

 И затем при каждом обновлении времени вы можете делать все, что хотите, используя данные среднего объема для текущего времени или отдельные данные для каждого из каналов (левый и правый):

var t = audio.currentTime;
var vol = volumeData.getVolume(t);
var avgVol = volumeData.getAverageVolume(t-0.1,t);
var volDelta = volumeData.getVolume(t-0.05);
volDelta.left = vol.left-volDelta.left;
volDelta.right = vol.right-volDelta.right;

Все визуальные эффекты сделаны на основе этих данных. Для визуализации Грант использует библиотеку EaselJS . Вот несколько примеров: звездное поле и атомное .

Теперь у вас есть все инструменты , необходимые для создания классных аудио визуализаций! J