Wie schreibe ich einen Web-basierten Musik-Visualizer?

Question

Ich versuche den besten Ansatz zu finden, um einen Musikvisualisierer zu erstellen, der in einem Browser über das Internet ausgeführt wird. Unity ist eine Option, aber ich muss ein benutzerdefiniertes Audio-Import-/Analyse-Plugin erstellen, um die Soundausgabe des Endbenutzers zu erhalten. Quartz macht das, was ich brauche, läuft aber nur auf Mac/Safari. WebGL scheint nicht bereit zu sein. Raphael ist hauptsächlich 2D, und es gibt immer noch das Problem, den Sound des Benutzers zu bekommen ... irgendwelche Ideen? Hat jemand das schon mal gemacht?

Answer 1

Da WebGL "nicht bereit" ist, gehe ich davon aus, dass Sie sich auf die Penetration beziehen (wird derzeit nur von WebKit und Firefox unterstützt).

Abgesehen davon sind Equalizer definitiv mit HTML5 Audio und WebGL möglich. Ein Mann namens David Humphrey hat blogged about making different music visualisers mit WebGL und konnte einige wirklich beeindruckende erstellen. Hier einige Videos von den Visualisierung (klicken zu sehen):

Answer 2

auf Komplexität Je Sie könnten bei dem Versuch, eine Verarbeitung interessiert sein (http://www.processing.org) es, hat wirklich einfache Tools, um Web-basierte Anwendungen zu machen, und es hat Tools, um die FFT und die Wellenform einer Audiodatei zu erhalten.

Answer 3

Ich benutzte SoundManager2, um die Wellenformdaten aus der MP3-Datei zu ziehen. Für diese Funktion ist Flash 9 erforderlich, daher ist dies möglicherweise nicht der beste Ansatz.

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

etwas Audio-reaktive zu machen ist ziemlich einfach. Here's an open source site with lots audio reactive examples.

Wie Sie es tun, verwenden Sie im Grunde die Web Audio API, um die Musik zu streamen und seinen AnalyserNode zu verwenden, um Audiodaten zu erhalten.

"use strict"; 
 

 
// make a Web Audio Context 
 
var context = new AudioContext(); 
 
var analyser = context.createAnalyser(); 
 

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

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

 
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 
 
var 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 kreativ zu zeichnen.

beachten Sie einige Probleme, denen Sie wahrscheinlich begegnen werden.

1. Zu diesem Zeitpunkt (2017/1/3) unterstützt weder Android Chrome noch iOS Safari die Analyse von Streaming-Audiodaten. Stattdessen musst du den gesamten Song laden. Here'a a library that tries to abstract that a little

2. Auf Mobilgeräten kann nicht automatisch Audio wiedergegeben werden. Sie müssen das Audio innerhalb eines Eingabeereignisses basierend auf Benutzereingaben wie 'click' oder 'touchstart' starten.

3. Wie im Beispiel gezeigt, können Sie nur Audio analysieren, wenn die Quelle entweder aus der gleichen Domäne stammt ODER Sie nach der CORS-Berechtigung fragen und der Server die Erlaubnis erteilt. AFAIK nur Soundcloud gibt Erlaubnis und es ist auf einer Pro-Song-Basis. Es hängt von den Einstellungen des einzelnen Künstlers ab, ob eine Audioanalyse für einen bestimmten Song erlaubt ist oder nicht.

   Um zu versuchen, diesen Teil

   Die Standardeinstellung ist Sie die Erlaubnis, alle Daten aus der gleichen Domäne, aber keine Erlaubnis von anderen Domänen zugreifen müssen zu erklären.

   Wenn Sie

   audio.crossOrigin = "anonymous"; 
   

   hinzufügen, die im Grunde sagt: "fragen Sie den Server für die Erlaubnis für den Benutzer 'anonymous'". Der Server kann eine Erlaubnis erteilen oder nicht. Es liegt an dem Server. Dazu gehört, dass Sie sogar den Server auf derselben Domain fragen. Wenn Sie also einen Titel auf derselben Domain anfordern, müssen Sie (a) die obige Zeile entfernen oder (b) Ihren Server so konfigurieren, dass CORS die Erlaubnis erhält. Die meisten Server geben standardmäßig keine CORS-Berechtigung. Wenn Sie also diese Zeile hinzufügen, selbst wenn der Server dieselbe Domäne ist, wird die Audioanalyse fehlschlagen, wenn keine CORS-Berechtigung erteilt wird.

---

Musik: DOCTOR VOX - Level Up