Как создать эквалайзер для аудиоплеера

Есть много музыкальных плееров, например, даже аудиоплеер HTML5, но как я могу добавить к ним эквалайзер? Под эквалайзером я имею в виду следующее: изображение

Любая идея добавить его в музыкальный плеер?

Заранее спасибо

ОТВЕТЫ

Ответ 1

API веб-аудио - очень полезный инструмент javascript, и на следующем веб-сайте показан пример того, как визуализировать звук с помощью этого API:

http://css.dzone.com/articles/exploring-html5-web-audio

Ответ 2

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

Если вы хотите просто визуализировать спектр, то это не имеет большого значения.

Прежде всего, создайте свой AudioContext, а затем анализатор.

Добавьте fillter или получите node, если хотите, а затем последовательно соедините их (то есть один с другим, а затем с другим - последним). Наконец, подключите свой аудиоприемник.

пример кода:

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');



// here we create our chain
var audio = document.querySelector('audio'),
    audioContext = new AudioContext(),
    source = audioContext.createMediaElementSource(audio),
    analyser = audioContext.createAnalyser();

source.connect(analyser);
analyser.connect(audioContext.destination);

setInterval(function(){
  var freqData = new Uint8Array(analyser.frequencyBinCount);

      analyser.getByteFrequencyData(freqData);

      ctx.clearRect(0, 0, width, height);

      for (var i = 0; i < freqData.length; i++ ) {
        var magnitude = freqData[i];
        ctx.fillRect(i*1.5, height, 1, -magnitude * 2);
      }
 }, 33);

Что-то вроде этого. Хотя вы должны знать о быстрых изменениях в этом API (вот почему многие примеры API веб-аудио не работают должным образом).

Я создал простой музыкальный плеер с эквалайзером, вы можете проверить его здесь. Вы должны сначала что-то искать (даже пустая строка в порядке), а затем начать музыку - холст внизу.

Ответ 3

Теперь он частично поддерживается браузерами. Вы можете использовать API веб-аудио для google chrome и нового сафари и API аудиоданных для Firefox.