Визуализация HTML5 <audio>

Статья сосредоточена на одном интересном сценарий, который не охватывает стандарт HTML5, но пользуется большим спросом. Это визуализация звука с помощью HTML5 <audio>:

Что можно сделать с <audio>

Тег <audio> как вы уже догадались элемент HTML5. Он действительно позволяет вам управлять воспроизведением аудио потоком на высоком уровне: воспроизведение и пауза, устанавливать и получать текущую позицию на шкале времени, знать общею продолжительность трека, работа с текстом треков, и уровень громкости.

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

Возможности, которые вы можете выполнять на своём сайте:

Будущие стандарты аудио (возможно)

W3C

Существует инициатива обеспечить низкоуровневый API для аудио потока.

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

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

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

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

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

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

Если вы хотите извлечь важные данные (например, текст песни), предварительная обработка является единственно возможным решением (если у вас нет достаточно квалифицированных AI, чтобы понять слова и фразы в песне). Как правило, это утомительно. Вы садитесь, включите аудио-плеер, слушаем песню, запомнить, пауза, записать, посмотреть на таймер, записать текущее время … и делать это снова и снова. Можно просто скачать его, где-то из интернета.

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

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

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

Проще всего использовать инструменты для разработчиков в вашем любимом браузере. В Internet Explorer 9+ есть инструменты для этого (просто нажмите клавишу F12!). Вы можете использовать скрипты, посмотреть код JavaScript, сделать отладку, устанавливать точки останова, или запустить свой ​​собственный код в консоли.

Internet Explorer инструменты F12

Пример № 1: Девушка под дождем

html5 audio Девушка под дождем
Визуализация audio HTML5

Девушка под дождем — это потрясающий аудио и текстовая визуализация песни. Вы увидите, что текст песни появляются в идеальной синхронизации с аудио потоком.

Что внутри

  • jQuery + Sizzle.js
  • 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:



functionfireTrigger(trigger) {

  switch (trigger) {

  case0:

  $('#lyrics1 p').addClass('vilify').html(lyrics[0]).fadeIn(1500);

  break;

  case1:

  $('#lyrics2 p').html(lyrics[1]).fadeIn(1000).delay(5000).fadeOut(1000);

  $('#lyrics1 p').delay(6000).fadeOut(1000);

  break;

  case2:

  $('#lyrics1 p').fadeIn(1000);

  break;

  case3:

  $('#lyrics2 p').fadeIn(1000).delay(4000).fadeOut(1000);

  $('#lyrics1 p').delay(5000).fadeOut(1000);

  break;

  case4:

  $('#lyrics1 p').removeClass('vilify').html(lyrics[2]).fadeIn(1000);

  break;

  case5:

  $('#lyrics2 p').html(lyrics[3]).fadeIn(1000).delay(3000).fadeOut(1000);

  $('#lyrics1 p').delay(4000).fadeOut(1000);

  break;

  ...


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

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

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

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

Уровень громкости выглядит следующим образом:

Уровни громкости HTML5

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

Сначала нужно загрузить данные:



loadMusic("music.jpg");


Функция loadMusic просто подключает к картинке:



functionloadMusic(dataImageURL) {

   image = newImage();

image.src = dataImageURL;

   playing = false;

Ticker.addListener(window);

}


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



volumeData = newVolumeData(image);


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



var t = audio.currentTime;

  varvol = volumeData.getVolume(t);

  varavgVol = volumeData.getAverageVolume(t-0.1,t);

  varvolDelta = volumeData.getVolume(t-0.05);

  volDelta.left = vol.left-volDelta.left;

  volDelta.right = vol.right-volDelta.right;


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

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

HTML5 <audio>  работа с аудио в формате HTML5.

Примеры к этой статье:

Скачать:

Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>