2013-03-17 4 views
4

Мне действительно интересно создать какой-то эквалайзер/визуализатор для представления звука из моего тега <audio>. До сих пор мне удалось найти несколько очень интересных экспериментов, которые визуализируют звук. Большинство из них основано на webgl и работает только в хроме. То, чего я не достиг, намного проще, это просто базовый, один цвет, 2-й визуализатор, ничего необычного.Визуализация html5 audio

Это что-то очень похоже на то, что я wan't достичь (какой-то изображение в середине и визуализации по бокам, очень простые, но мне это нравится;))
http://www.youtube.com/watch?v=yLRyAz0WFnw

Путь Я хочу работать, чтобы оказать/создать визуализацию на основе ГКЗА аудио тега, так, например

<audio id="test" 
src="http://api.soundcloud.com/tracks/78404260/stream?client_id=7a17129ba9cd5fff34f847e3539829b7"> 
</audio> 
<!-- Some example from sound cloud --> 

и был бы холст тег на странице, которая берет исходный текстов из аудио тега с определенным идентификатором, в этом case "test". Я не думаю, что что-то такое простое должно требовать использования WebGl и хотело бы вместо этого использовать простой холст, поэтому он работает в большинстве браузеров с поддержкой html5. Я новичок в javascript, поэтому не знаю, с чего начать. Я упомянул несколько примеров, которые я нашел раньше, но смотреть на их источник совсем не помог. Я ищу элегантное решение, в котором ничего сложного не происходит. Я понимаю, что stackoverflow не запрашивает полный код, поэтому, если вы можете просто начать меня, например. объясните, как взаимодействовать со звуком, изменить размер этих «эквалайзерных палочек» в зависимости от того, что играет и т. д. было бы здорово;)) (предложения jQuery также приветствуются)

ответ

4

Вы не должны использовать аудио, а использовать WebAudio Api.
Chrome, Safari, Firefox, Edge обрабатывает его, но IE нет.
(см. Здесь: http://caniuse.com/audio-api)
Beware webaudio имеет префикс на Safari (webkit).

Если вы хотите более глобальный охват, SoundManager2 может быть (один возможный) ответ на потребности, так как он работает на всех браузерах с флэш-запасной вариант:
http://www.schillmania.com/projects/soundmanager2/

С WebAudio, Эта статья объясняет, как получить частотный анализ в довольно простой выход из любого трека: http://joshondesign.com/p/books/canvasdeepdive/chapter12.html

+0

Вы упомянули о поддержке Chrome и Safari, что относительно ff и т. д.? те две опоры

+0

обновленный ответ. – GameAlchemist

1

Появилась библиотека, которая нижняя часть рычага называется dancer.js (и у нее есть некоторые демо-версии убийцы).

Мой подход не анимирован, как вы просили, но так, как я это делаю (demo, нажмите «воспроизвести все песни»), чтобы предварительно генерировать сигнал при загрузке песни и использовать CSS (путем установки background-image формы волны div). Этот подход работает на удивление хорошо.

+0

Да, но это не то, о чем я прошу, я ищу что-то подобное, но с помощью js: http://www.youtube.com/watch? v = uG7x80uxp_c – Ilja

0

Я создал кроссплатформенный музыкальный эквалайзер, вы можете играть звуковой файл в то время как уравнивание на: вы можете увидеть учебник а также demo и скачать исходный код от http://www.bestofjqueryplugins.com/plugins.php?name=jquery-music-equalizer

+0

Это не полный эквалайзер.Это только имитирует функциональность – BrassApparatus

+0

@BrassApparatus да, аудио API не был доступен во время разработки –