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

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

Что внутри

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

Как это устроено

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

  var timings = newArray ();
 время [0] = 11,5;
 сроки [1] = 17;
 сроки [2] = 24;
 сроки [3] = 29;
 сроки [4] = 35,5; 

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

  var lyrics = newArray ();
 песни [0] = 'Изгнание';
 lyrics [1] = 'Это займет ваше внимание ... снова';
 lyrics [2] = "Тебе повезло, сосунки";
 lyrics [3] = 'Ты сдался?'; 

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

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

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

  function fireTrigger (trigger) {
     переключатель (триггер) {
         случай 0:
             $ ('# lyrics1 p'). addClass ('vilify'). html (lyrics [0]). fadeIn (1500);
             перемена;
         Дело 1:
             $ ('# lyrics2 p'). html (текст песни [1]). fadeIn (1000) .delay (5000) .fadeOut (1000);
             $ ('# lyrics1 p'). delay (6000) .fadeOut (1000);
             перемена;
         случай 2:
             $ ('# lyrics1 p'). fadeIn (1000);
             перемена;
         случай 3:
             $ ('# lyrics2 p'). fadeIn (1000) .delay (4000) .fadeOut (1000);
             $ ('# lyrics1 p'). delay (5000) .fadeOut (1000);
             перемена;
         дело 4:
            $ ('# lyrics1 p'). removeClass ('vilify'). html (lyrics [2]). fadeIn (1000);
            перемена;
         дело 5:
            $ ('# lyrics2 p'). html (lyrics [3]). fadeIn (1000) .delay (3000) .fadeOut (1000);
            $ ('# lyrics1 p'). delay (4000) .fadeOut (1000);
            перемена;
 ... 

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

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

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

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

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

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

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

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

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

  loadMusic ( "music.jpg"); 

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

  function loadMusic (dataImageURL) {
     изображение = новое изображение ();
     image.src = dataImageURL;
     игра = ложь;
     Ticker.addListener (окно);
 } 

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

  volumeData = новые VolumeData (изображение); 

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

  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 . Вот несколько примеров: звездное поле и атомное .

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

Подводя итог: используйте предварительную обработку, чтобы сделать ваше решение более эффективным. Попробуйте объединить воспроизведение звука с текстовыми данными, анимацией и графическими эффектами на основе данных об уровнях громкости, чтобы создать впечатляющий пользовательский опыт. Сделай так, чтобы это выглядело как волшебство!

Дополнительные ресурсы и дополнительная информация:

Майк Томпкинс Фейерверк

Загрузки:

• Приложение Гранта Скиннера AIR (.zip)
• Sizzle.js
• Библиотека jPlayer
• Easel JS Library