Come scrivere un visualizzatore musicale basato sul web?

Sto cercando di trovare l’approccio migliore per creare un visualizzatore musicale da eseguire in un browser sul Web. Unity è un’opzione, ma dovrò creare un plug-in di importazione / analisi audio personalizzato per ottenere l’output audio dell’utente finale. Quartz fa quello che mi serve ma gira solo su Mac / Safari. WebGL sembra non pronto. Raphael è principalmente in 2D, e c’è ancora il problema di ottenere il suono dell’utente … qualche idea? Qualcuno l’ha già fatto prima?

Dato che WebGL è “non pronto”, presumo che ti riferisci alla penetrazione (è supportata solo in WebKit e Firefox al momento).

Oltre a questo, gli equalizzatori sono sicuramente possibili utilizzando l’audio HTML5 e WebGL. Un tizio di nome David Humphrey ha scritto sul blog di creare visualizzatori musicali diversi usando WebGL ed è stato in grado di crearne alcuni davvero impressionanti. Ecco alcuni video delle visualizzazioni (clicca per vedere):

Rendere qualcosa di audio reattivo è piuttosto semplice. Ecco un sito open source con molti esempi di audio reattivo .

Per quanto riguarda come farlo, in pratica usi l’API Web Audio per trasmettere la musica e usare il suo AnalyserNode per estrarre i dati audio.

"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; } 
  

Ho usato SoundManager2 per estrarre i dati della forma d’onda dal file mp3. Quella funzione richiede Flash 9, quindi potrebbe non essere l’approccio migliore.

La mia demo waveform con HMTL5 Canvas: http://www.momentumracer.com/electriccanvas/

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

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

A seconda della complessità che potresti essere interessato a provare Processing (http://www.processing.org), ha strumenti davvero semplici per creare app basate sul web e ha strumenti per ottenere la FFT e la forma d’onda di un file audio.