Как создать визуализатор для аудиоплеера [дубликат]

Ну, может быть, уже слишком поздно, но все еще может помочь кому-нибудь.

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

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

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

Пример кода:

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 web audio не работают должным образом).

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

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

Кстати, вот пример кода, который делает визуальный эквалайзер: http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs .