Come scrivere un web-based musica Visualizer?

Question

Sto cercando di trovare l'approccio migliore per costruire un visualizzatore di musica per l'esecuzione in un browser attraverso il web. L'unità è un'opzione, ma avrò bisogno di costruire un audio di importazione / analisi plugin personalizzato per ottenere uscita audio dell'utente finale. Quarzo fa quello che mi serve, ma gira solo su Mac / Safari. WebGL non sembra pronto. Raphael è principalmente in 2D, e c'è ancora il problema di ottenere il suono dell'utente ... tutte le idee? Qualcuno ha fatto prima?

Answer 1

Con WebGL essere "non pronto", sto supponendo che ti riferisci alla penetrazione (è supportato solo in WebKit e Firefox al momento).

Oltre a questo, gli equalizzatori sono sicuramente possibili utilizzando audio HTML5 e WebGL. Un ragazzo chiamato David Humphrey ha Blogged di fare diversi visualizzatori musicali con WebGL ed è stato in grado di creare alcuni tra quelli davvero impressionante. Ecco alcuni video delle visualizzazioni (clicca per guardare):

Answer 2

Fare qualcosa reattiva audio è abbastanza semplice. Ecco un sito open source con un sacco audio esempi reattivi .

Per quanto riguarda il come farlo che, fondamentalmente, utilizza l'API Web Audio per lo streaming di musica e usare il suo AnalyserNode per ottenere i dati audio fuori.

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

Poi è solo a voi per disegnare qualcosa di creativo.

notare alcuni problemi è probabile imbattersi in.

1. A questo punto nel tempo (2017/01/03) né Chrome Android né iOS Safari analisi supporto dello streaming di dati audio. Invece si deve caricare l'intera canzone. Here'a una libreria che cerca di astratto che un po 'di

2. On Mobile non è possibile riprodurre automaticamente l'audio. È necessario avviare l'audio all'interno di un evento di input in base all'input dell'utente come 'click' o 'touchstart'.

3. Come sottolineato nel campione si può analizzare l'audio solo se la fonte è sia dallo stesso dominio o che chiede l'autorizzazione CORS e il server dà il permesso. Per quanto ne so solo Soundcloud dà il permesso ed è su una base per ogni canzone. Sta a impostazioni della canzone del singolo artista o meno analisi audio è consentito per una particolare canzone.

   Per cercare di spiegare questa parte

   Il valore di default è di avere il permesso di accedere a tutti i dati dallo stesso dominio, ma senza il permesso da altri domini.

   Quando si aggiunge

   audio.crossOrigin = "anonymous";
   

   che in pratica dice "chiedere al server per l'autorizzazione per l'utente 'anonymous'". Il server può dare il permesso o meno. E 'fino al server. Ciò include chiedere anche il server sullo stesso dominio che significa che se avete intenzione di richiedere un brano sullo stesso dominio è necessario (a) rimuovere la riga sopra o (b) configurare il server per dare il permesso CORS. La maggior parte dei server di default non danno il permesso CORS quindi se si aggiunge che la linea, anche se il server è lo stesso dominio, se non dà il permesso CORS poi cercando di analizzare l'audio fallirà.

---

musica: MEDICO VOX - Level Up

Answer 3

Ho usato SoundManager2 per estrarre i dati della forma d'onda dal file mp3. Questa caratteristica richiede Flash 9 quindi potrebbe non essere l'approccio migliore.

La mia forma d'onda demo con HMTL5 Canvas: http://www.momentumracer.com/electriccanvas/

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

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

Answer 4

A seconda della complessità si potrebbe essere interessati a provare Processing (http://www.processing.org), ha gli strumenti veramente facile da rendere le applicazioni web-based, e ha strumenti per ottenere la FFT e forma d'onda di un file audio.