wake-up-neo.com

So erstellen Sie einen Visualizer für den Audioplayer

Es gibt viele Musik-Player, wie zum Beispiel HTML5-Audio-Player, aber wie kann ich ihnen einen Equalizer hinzufügen? Mit Equalizer meine ich das: image (OP-Link zu einem Bild der Audiovisualisierung)

Irgendeine Idee, wie man sie zu einem Musik-Player hinzufügt?

Danke im Voraus

13
Alex

Das Web Audio API ist ein sehr nützliches Javascript-Tool. Die folgende Website zeigt ein Beispiel für die Visualisierung von Audio mit diesem API:

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

8
Dylan Kay

Nun, vielleicht ist es zu spät, kann aber trotzdem jedem helfen.

Wenn Sie nur das Spektrum visualisieren möchten, ist das keine große Sache.

Erstellen Sie zunächst Ihren AudioContext und dann das Analysegerät daraus.

Fügen Sie, wenn Sie möchten, einen Füllungs- oder Verstärkungsknoten hinzu, und verbinden Sie sie anschließend (d. H. Eines mit einem anderen und dann mit einem anderen bis zum Schluss). Verbinden Sie schließlich Ihr Audio-Ziel.

beispiel für Code:

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);

So etwas wie dieses. Sie sollten sich jedoch der schnellen Änderungen dieser API bewusst sein (aus diesem Grund funktionieren viele Beispiele für Web-Audio-API nicht ordnungsgemäß).

Ich habe einen einfachen Musikplayer mit Equalizer erstellt. Sie können ihn hier . Überprüfen. Sie müssen zuerst etwas suchen (sogar eine Leerzeile ist in Ordnung) und dann die Musik starten - die Leinwand ist unten.

17
Bloomca

Jetzt wird es teilweise von Browsern unterstützt. Sie können Web Audio API für Google Chrome und neue Safari und Audio Data API für Firefox verwenden.

1

Hier ist übrigens ein Beispielcode, der einen visuellen Equalizer ausführt: http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs .

0
cwilso