Cómo escribir un visualizador de música basado en la web?

Question

Estoy tratando de encontrar el mejor enfoque para construir un visualizador de música para funcionar en un navegador a través de Internet. La unidad es una opción, pero voy a tener que construir un plugin de audio de importación / análisis personalizado para obtener una salida de sonido del usuario final. Cuarzo hace lo que necesito, pero sólo se ejecuta en Mac / Safari. WebGL no parece estar listo. Raphael es principalmente 2D, y todavía hay el problema de conseguir el sonido del usuario ... alguna idea? Alguien ha hecho esto antes?

Answer 1

Por WebGL ser "no está listo", estoy asumiendo que usted se refiere a la penetración (sólo está soportado en WebKit y Firefox en el momento).

Aparte de eso, ecualizadores son definitivamente posible el uso de audio HTML5 y WebGL. Un tipo llamado David Humphrey tiene blogeado sobre la fabricación de diferentes visualizadores de música usando WebGL y fue capaz de crear algunos realmente impresionantes. Aquí hay algunos videos de las visualizaciones (haga clic para ver):

Answer 2

Hacer reactiva de audio algo es bastante simple. He aquí un sitio de código abierto con una gran cantidad reactivos ejemplos de audio .

En cuanto a la forma de hacerlo que básicamente utiliza la API de Web Audio para transmitir la música y usar su AnalyserNode para obtener los datos de salida de 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; }

<canvas></canvas>

Entonces es sólo hasta que dibuje algo creativo.

Tenga en cuenta algunas dificultades, lo más probable encontrarse.

1. En este punto en el tiempo (01/03/2017) ni Android ni iOS Safari Chrome analizar admite la transmisión de datos de audio. En su lugar tiene que cargar toda la canción. Here'a una biblioteca que intenta abstracto que un poco de

2. En Móvil no se puede reproducir automáticamente el audio. Debe iniciar el audio dentro de un evento de entrada basado en la entrada del usuario como 'click' o 'touchstart'.

3. Como se señaló en la muestra sólo se puede analizar de audio si la fuente es ya sea desde el mismo dominio o que pedir permiso CORS y el servidor le da permiso. Que yo sepa sólo se da el permiso Soundcloud y es en función de cada canción. Todo depende de la configuración de la canción del artista individual si se permite o no el análisis de audio para una canción en particular.

   Para tratar de explicar esta parte

   El valor por defecto es que tiene permiso para acceder a todos los datos del mismo dominio, pero sin el permiso de otros dominios.

   Cuando se agrega

   audio.crossOrigin = "anonymous";
   

   Esto básicamente dice "pedir al servidor de autorización para el usuario" anónimo". El servidor puede dar permiso o no. Es hasta el servidor. Esto incluye pedir incluso el servidor en el mismo dominio que significa que si usted va a solicitar una canción en el mismo dominio que necesita para (a) eliminar la línea anterior o (b) configurar el servidor para dar permiso CORS. La mayoría de los servidores de forma predeterminada No le dé permiso CORS por lo que si se agrega esa línea, incluso si el servidor es el mismo dominio, si no da CORS permiso entonces se trata de analizar el audio se producirá un error.

---

música: DOCTOR VOX - Level Up

Answer 3

He utilizado SoundManager2 para extraer los datos de forma de onda del archivo mp3. Esa característica requiere Flash 9 por lo que podría no ser el mejor enfoque.

Mi demostración forma de onda con HMTL5 lona: http://www.momentumracer.com/electriccanvas/

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

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

Answer 4

En función de la complejidad que podría estar interesado en probar Procesamiento (http://www.processing.org), que tiene en realidad herramientas fáciles de hacer que las aplicaciones basadas en la Web, y tiene herramientas para conseguir la FFT y la forma de onda de una archivo de audio.