Faire quelque chose réactive audio est assez simple. Here's an open source site with lots audio reactive examples. Pour ce faire, vous utilisez essentiellement l'API Web Audio pour diffuser la musique et utiliser AnalyserNode pour extraire les données 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>
Ensuite, il est juste à vous de tirer quelque chose de créatif.
notez quelques problèmes que vous risquez de rencontrer.
À ce stade (2017/1/3), ni Android Chrome ni iOS Safari ne prennent en charge l'analyse des données audio en continu. Au lieu de cela, vous devez charger la chanson entière. Here'a a library that tries to abstract that a little
Sur Mobile, vous ne pouvez pas lire automatiquement l'audio. Vous devez démarrer l'audio à l'intérieur d'un événement d'entrée en fonction de l'entrée de l'utilisateur, par exemple 'click' ou 'touchstart'. Comme indiqué dans l'exemple, vous ne pouvez analyser l'audio que si la source provient du même domaine OU si vous demandez l'autorisation CORS et que le serveur donne son autorisation. AFAIK seulement Soundcloud donne la permission et c'est par chanson. Il appartient aux paramètres de la chanson de l'artiste individuel si l'analyse audio est autorisée ou non pour une chanson particulière.
pour tenter d'expliquer cette partie
La valeur par défaut est que vous avez la permission d'accéder à toutes les données du même domaine, mais pas l'autorisation d'autres domaines.
Lorsque vous ajoutez
audio.crossOrigin = "anonymous";
Cela dit essentiellement « demander au serveur d'autorisation pour l'utilisateur« anonyme ». Le serveur peut donner la permission ou non. C'est au serveur. Cela inclut de demander même au serveur sur le même domaine, ce qui signifie que si vous devez demander une chanson sur le même domaine, vous devez (a) supprimer la ligne ci-dessus ou (b) configurer votre serveur pour autoriser CORS. La plupart des serveurs par défaut n'accordent pas la permission CORS donc si vous ajoutez cette ligne, même si le serveur est le même domaine, si elle ne donne pas l'autorisation CORS alors essayer d'analyser l'audio échouera.
musique: DOCTOR VOX - Level Up
Merci - c'est incroyablement utile. :) – nico