kichik 7 авг 2011 в 18:33

Визуализация аудио в HTML5

7 мин

20K

Блог компании MicrosoftВеб-разработка*HTML*

+107

Комментарии 29

olegafx 7 авг 2011 в 18:38

Ура, интересный материал по HTML5! А то уже надоело читать одно и то же про сокращенную запись doctype

+10

Denai 7 авг 2011 в 18:45

Лично я столкнулся с вот какой проблемой :
Запускаешь трек1, синхронно с ним трек2, переключаешь вкладку в браузере, наблюдаешь хаос. А если их ещё больше, то ещё больший хаос. В добавок ко всему этому переключение громкости происходит в каждом браузере по-своему, но чаще всего от момента включения/выключения звука до того как это произойдёт проходит ощутимый промежуток времени. Да и музыку которая не успела загрузиться по каким-то причинам контролировать сложновато

kichik 7 авг 2011 в 18:58

О чем и речь — сегодня сколь-нибудь сложные сценарии вызывают множество мелких проблем и нюансов :)

Weageoo 7 авг 2011 в 21:17

easeljs.com не открывается… Безжалостный хабраэффект?!

nadenok 7 авг 2011 в 21:33

Интересно, можно ли это все как-то увязать с Google Music?

ykrop 7 авг 2011 в 22:41

сдается мне что достаточно вбить в аудио мета-события, чтобы иметь точные тайминги аудио-событий потока. как насчет того, чтобы читать через html5 мета-события?

kichik 8 авг 2011 в 02:05

А что такое мета-события?

mark_ablov 8 авг 2011 в 08:01

в midi было такое понятие «meta events».
при чём здесь оно — хз.

Indexator 8 окт 2013 в 17:53

тоже хз, но, как вариант — брать тайминг из соответствующих lyrics, а на его основе делать эффектные акценты :)

JC_Piligrim 8 авг 2011 в 01:46

А что у них там с вводом-выводом в реальном режиме времени (или близко к тому — с задержками до 10мс)?

Т.е., чтобы, например, можно было снять с аудиоинтерфейса звук с микрофона (караоке, например, с автотюном), обработать его в online-плагине, и выпустить в колонки, с задержкой 0-8мс? С этим есть какие-то продвижения?

kichik 8 авг 2011 в 02:04

У них — это у кого? :) Если в W3C, то они пока только над новым стандартом думают.

JC_Piligrim 8 авг 2011 в 02:23

Промахнулся, извините. Ответил вам комментарием ниже.

Fesor 8 авг 2011 в 02:10

Врят-ли с обычной звуковой картой удастся добиться таких таймингов.

-1

JC_Piligrim 8 авг 2011 в 02:17

Интересуют обладатели нормальных аудиоинтерфейсов. Например, есть у меня M-Audio Fast Track USB для демок — на винде удается без особых проблем получить 4мс через ASIO-дрова.

А насчет «у них — это у кого? :)» — меня больше интересует не черновик стандарта, а реальная возможность воплотить это в современных браузерах, в течение пары ближайших лет. Хотя бы Gecko (FF) и WebKit (Chrome). Существует ли она сейчас? Например, чтобы из браузера задействовать ASIO в Win и CoreAudio в MacOS, получить интерфейс звуковухи (входы/выходы), читать оттуда поток, обрабатывать, и выбрасывать обратно, роутинг на плечах приложения.

Есть несколько классных идей, но для их реализации как раз не хватает этой возможности.

Подскажите, какие могут быть варианты, кроме написания отдельного плагина под NSAPI, чтобы код загружался из онлайна (будь он JS или еще что-нибудь), исполнялся без лишних установок чего-нибудь и позволял производить обработку сигнала с аудиоинтерфейса с малыми задержками?

У Google присматривался Native Client, я писал туда запрос на фичу, но они его по непонятным причинам отклонили, поэтому ищу еще варианты.

kichik 8 авг 2011 в 10:37

Честно говоря, чтобы что-то такое работало кроссбраузерно не вижу других адекватных вариантов кроме того, что будет соответствующий стандарт или набор стандартов, предоставляющие необходимые API, + нативная реализация в браузерах большинства сложных операций, учитывающая возможности железа для оптимизации обработки данных.

Собственно, в задачи Audio WG входит создать что-то похожее на то, о чем вы говорите:
•Access to audio devices, such as for microphones or other audio inputs, and multi-channel speakers or other audio outputs.
•APIs and advanced functionality regarding audio cache management and audio capability information

equand 8 авг 2011 в 06:45

www.ro.me/
Мне интересно как тут синхронизировали.
Вообще безумно красиво. Хочется сразу сайты в WebGL делать.

artem_dev 8 авг 2011 в 11:49

У меня сразу же возникла ассоциация с субтитрами :) Было бы не плохо если нечто подобное добавили прямо в audio\video элементы, например как-то так <audio src="..." subtitles="lyrics.sub"> вместо того чтобы прописывать подобные данные в JS-коде

kichik 8 авг 2011 в 13:12

На самом деле, в HTML5 есть возможность прикрепить к мультимедиа файл с субтитрами через элемент Track, но это не везде работает и дальше встает вопрос с форматом файла, который пока не решен.

Hellcunt 9 авг 2011 в 00:19

> jQuery + Sizzle.js (для селекторов)

А что есть в Sizzle, чего нельзя сделать с помощью jQuery?

kichik 9 авг 2011 в 09:07

Если выражаться точнее, то:

Sizzle.js is a JavaScript library that implements a «CSS selector engine designed to be easily dropped in to a host library.» jQuery uses it internally for its CSS selection needs. If you wanted a CSS engine and had no need for all the other JavaScript benefits of jQuery, you could use Sizzle.js separately.

Hellcunt 9 авг 2011 в 13:21

На это и намекаю, что «jQuery + Sizzle.js» вместе использовать смысла нет. Либо то, либо другое.

kichik 9 авг 2011 в 14:07

Да, это один файл :) Просто даже внутри написано, что это jQuery + Sizzle.

Hellcunt 9 авг 2011 в 14:51

Ммм, теперь понял, спасибо :)

apayrus 28 сен 2011 в 20:44

а можно всё это в обратном направлении проделать? т.е. не текст переключать в зависимости от положения аудио, а аудио переключать в зависимости от чего-то…

можно ли как-то программно давать указание проигрывать определенный отрезок аудио? во флеше я догадываюсь как это сделать, как-то почти приступил к реализации. а средствами jquery — не представляю даже :(

kichik 28 сен 2011 в 22:58

Не знаю, причем тут jQuery, но в HTML5 Audio (Video) легко можно менять текущую позицию проигрывания.

apayrus 29 сен 2011 в 02:32

а останавливать её тоже можно? допустим, задать, проиграть от секунды 310 до 345.
и как это будет происходить? файл сначала весь загружается, потом перематывается куда нужно, или грузится тот интервал, что нам нужен?

может я упустил где-то, — если не трудно, дайте пожалуйста ссылку на документацию исчерпывающую и доступную по HTML5 Audio (Video)

kichik 29 сен 2011 в 07:52

Спека: www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-audio-element

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

В целом, работа осуществялется также как и с видео, только нет экрана habrahabr.ru/company/microsoft/blog/127295/

apayrus 29 сен 2011 в 19:27

большое спасибо

milar 8 окт 2013 в 16:55

Если все таки использовать Flash как источник низкоуровневых аудиоданных, то нельзя обойти вниманием soundManager2. В нем уже реализовано получение EQ, например.

Собственно, само получение данных не менее красиво:

soundObject = soundManager.createSound({
  ... разные параметры
  useFastPolling: true, // включение обновления 10 мс, вместо обычных 50 мс
  useEQData: true,	// включаем EQ
  whileplaying: function() {
    some_func_for_update_anything(); // вызов функции обновления визуализации (таблицами, дивами, канвасом - как уже нравится.
  }
});

function some_func_for_update_anything() {
  //например, используем библиотеку WaveForm (http://waveformjs.org/) чтобы нарисовать частотный спектр в стиле SoundCloud
  waveform.update({data: soundObject.eqData.right}); // для упрощенного примера взят поток правого динамика. если сделать console.log(soundObject.eqData.right), то отобразится массив из 256 значений от -1 до 1.
}

Если есть желание нарисовать фон проигрывания «в будущее», то без предобработки не обойтись. Но никто не мешает для заранее фиксированного аудиофайла получить картинку с помощью, например php-waveform-png, отобразить фоном, а реалтайм отображать soundManager'ом.

Пример плеера с частотным спектром, увы, располагается в ЛС.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий