Haciendo reactiva de audio algo es bastante simple. Here's an open source site with lots audio reactive examples.
En cuanto a cómo hacerlo, básicamente utiliza Web Audio API para transmitir la música y usar su AnalyserNode para obtener datos de audio.
"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>
Entonces es sólo depende de usted para dibujar algo creativo.
tenga en cuenta algunos problemas que probablemente encuentre.
En este momento (2017/1/3) ni Android Chrome ni iOS Safari admiten el análisis de la transmisión de datos de audio. En su lugar, tienes que cargar la canción completa. Here'a a library that tries to abstract that a little
En el móvil no puede reproducir audio automáticamente. Debe iniciar el audio dentro de un evento de entrada basado en la entrada del usuario como 'click' o 'touchstart'.
Como se indica en la muestra, solo se puede analizar el audio si la fuente es del mismo dominio O se solicita el permiso CORS y el servidor da permiso. AFAIK solo Soundcloud da permiso y es por canción. Depende de la configuración de la canción del artista individual si el análisis de audio está permitido o no 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";
Eso dice, básicamente, "pedir al servidor de autorización para el usuario" anónimo". El servidor puede dar permiso o no. Depende del servidor. Esto incluye solicitar incluso al servidor en el mismo dominio, lo que significa que si va a solicitar una canción en el mismo dominio necesita (a) eliminar la línea anterior o (b) configurar su servidor para dar permiso a CORS. La mayoría de los servidores de forma predeterminada no otorgan permiso a CORS, por lo que si agrega esa línea, incluso si el servidor es del mismo dominio, si no da permiso a CORS, entonces se intentará analizar el audio.
música: DOCTOR VOX - Level Up
Gracias - que es increíblemente útil. :) – nico