Wie ein Web-basierte Musik-Visualizer zu schreiben?

Question

Ich versuche, die beste Lösung zu finden, einen Musik-Visualizer zu bauen in einem Browser über das Internet zu laufen. Unity ist eine Option, aber ich werde eine eigene Audio-Import / Analyse-Plugin bauen muß den Endbenutzers Tonausgabe zu bekommen. Quarz tut, was ich brauche, aber nur läuft auf Mac / Safari. WebGL scheint nicht bereit. Raphael ist hauptsächlich 2D, und es gibt immer noch die Frage des Benutzers Sound bekommen ... irgendwelche Ideen? Hat jemand dies getan, vor?

Answer 1

Durch WebGL ist „nicht bereit“, ich gehe davon aus, dass Sie auf das Eindringen sich beziehen (es ist nur in WebKit und Firefox zur Zeit nicht unterstützt).

Other than that, sind Equalizern auf jeden Fall möglich HTML5 Audio und WebGL verwenden. Ein Typ namens David Humphrey hat gebloggt unterschiedliche Musik Visualizer machen mit WebGL und war in der Lage zu schaffen einige wirklich eindruckvollsten. Hier einige Videos von den Visualisierung (klicken zu sehen):

Answer 2

etwas Audio-reaktiven zu machen ist ziemlich einfach. Hier ist eine Open-Source-Seite mit vielen Audio-reaktiven Beispielen .

Was, wie es zu tun im Grunde Sie das Web Audio API verwenden, um die Musik zu streamen und nutzen seine AnalyserNode Audiodaten, um aus.

"use strict";
const ctx = document.querySelector("canvas").getContext("2d");

ctx.fillText("click to start", 100, 75);
ctx.canvas.addEventListener('click', start);  

function start() {
  ctx.canvas.removeEventListener('click', start);
  // make a Web Audio Context
  const context = new AudioContext();
  const analyser = context.createAnalyser();

  // Make a buffer to receive the audio data
  const numPoints = analyser.frequencyBinCount;
  const audioDataArray = new Uint8Array(numPoints);

  function render() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // get the current audio data
    analyser.getByteFrequencyData(audioDataArray);

    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const size = 5;

    // draw a point every size pixels
    for (let x = 0; x < width; x += size) {
      // compute the audio data for this point
      const ndx = x * numPoints / width | 0;
      // get the audio data and make it go from 0 to 1
      const audioValue = audioDataArray[ndx] / 255;
      // draw a rect size by size big
      const y = audioValue * height;
      ctx.fillRect(x, y, size, size);
    }
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  // Make a audio node
  const audio = new Audio();
  audio.loop = true;
  audio.autoplay = true;

  // this line is only needed if the music you are trying to play is on a
  // different server than the page trying to play it.
  // It asks the server for permission to use the music. If the server says "no"
  // then you will not be able to play the music
  // Note if you are using music from the same domain 
  // **YOU MUST REMOVE THIS LINE** or your server must give permission.
  audio.crossOrigin = "anonymous";

  // call `handleCanplay` when it music can be played
  audio.addEventListener('canplay', handleCanplay);
  audio.src = "https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3";
  audio.load();


  function handleCanplay() {
    // connect the audio element to the analyser node and the analyser node
    // to the main Web Audio context
    const source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
  }
}

canvas { border: 1px solid black; display: block; }

<canvas></canvas>

Dann ist es nur an Ihnen, etwas Kreatives zu ziehen.

einige Probleme beachten Sie in wahrscheinlich ausführen werden.

1. Zu diesem Zeitpunkt (2017.01.03) weder Android Chrome noch iOS Safari Unterstützung Analyse Streaming-Audio-Daten. Stattdessen müssen Sie den gesamten Song laden. Here'a eine Bibliothek, die versucht, zu abstrahieren, dass ein wenig

2. On Mobile Sie können nicht automatisch Audiodateien wiedergeben. Sie müssen die Audio innerhalb eines Eingabeereignisses starten, basierend auf Benutzereingaben wie 'click' oder 'touchstart'.

3. Wie bereits in der Probe aus können Sie nur Audio-Analyse, wenn die Quelle entweder aus der gleichen Domäne ist, oder Sie fragen nach CORS Erlaubnis und der Server gibt die Erlaubnis. AFAIK nur Soundcloud gibt die Erlaubnis, und es ist auf einer pro Song Basis. Es ist bis zu der einzelnen Künstlerlied Einstellungen, ob die Audioanalyse für einen bestimmten Song erlaubt ist.

   Um zu versuchen, diesen Teil zu erklären

   Die Standardeinstellung ist Du Berechtigung zum Zugriff auf alle Daten aus der gleichen Domäne, aber keine Erlaubnis von anderen Domänen.

   Wenn Sie fügen

   audio.crossOrigin = "anonymous";
   

   Das sagt im Grunde „fragen Sie den Server für die Erlaubnis für den Benutzer‚anonymous‘“. Der Server kann die Erlaubnis geben oder nicht. Es ist auf dem Server auf. Dies schließt auch den Server auf dem gleichen Gebiet zu fragen, was bedeutet, wenn Sie vorhaben, ein Lied auf der gleichen Domain beantragen Sie entweder (a) müssen entfernen Sie die Zeile oben oder (b) konfigurieren Sie Ihren Server CORS die Erlaubnis zu geben. Die meisten Server standardmäßig nicht geben CORS Erlaubnis, wenn Sie diese Zeile hinzufügen, auch wenn der Server die gleiche Domäne ist, wenn es nicht geben tut CORS Erlaubnis dann das Audio zu analysieren versuchen, scheitern.

---

Musik: DOCTOR VOX - Level Up

Answer 3

I verwendet SoundManager2 die Wellenformdaten aus der MP3-Datei zu ziehen. Dieses Feature benötigt Flash 9, so dass es nicht der beste Ansatz sein könnte.

Meine Wellenform-Demo mit HMTL5 Leinwand: http://www.momentumracer.com/electriccanvas/

und WebGL: http://www.momentumracer.com/electricwebgl/

Quellen: https://github.com/pepez/Electric-Canvas

Answer 4

Je nach Komplexität können Sie eine Verarbeitung interessiert sein bei dem Versuch (http://www.processing.org), hat es wirklich einfach Tools web-basierten Anwendungen zu machen, und es verfügt über Werkzeuge, die FFT und die Wellenform eines bekommen Audiodatei.