Comment écrire une musique basée sur le Web Visualiseur?

Question

Je suis en train de trouver la meilleure approche pour construire un visualisateur de musique pour fonctionner dans un navigateur sur le Web. L'unité est une option, mais je vais besoin de construire un plugin d'import / d'analyse audio sur mesure pour obtenir la sortie de son de l'utilisateur final. Quartz fait ce que je dois, mais ne fonctionne que sur Mac / Safari. WebGL ne semble pas prêt. Raphael est principalement 2D, et il y a encore la question d'obtenir le son de l'utilisateur ... des idées? Quelqu'un at-il fait cela avant?

Answer 1

Par WebGL étant « pas prêt », je suppose que vous faites référence à la pénétration (il est uniquement pris en charge dans WebKit et Firefox pour le moment).

Autre que cela, égaliseurs sont certainement possibles en utilisant l'audio HTML5 et WebGL. Un gars appelé David Humphrey a blogué sur la fabrication de différents visualiseurs de musique utilisant WebGL et a pu créer quelques vraiment impressionnants. Voici quelques vidéos des visualisations (cliquer pour regarder):

Answer 2

Faire quelque chose réactive audio est assez simple. Voici un site open source avec beaucoup d'exemples réactifs audio .

Quant à la façon de le faire, vous utilisez essentiellement l'API Web Audio pour diffuser la musique et utiliser son AnalyserNode pour obtenir des données audio sur.

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

Ensuite, il est juste à vous de dessiner quelque chose de créatif.

noter certains problèmes que vous aurez probablement rencontrer.

1. A ce moment (03/01/2017) ni Android Chrome ni iOS analyse de support Safari en continu des données audio. Au lieu de cela, vous devez charger le morceau. Here'a une bibliothèque qui essaie de abstraite un peu

2. On Mobile vous ne pouvez pas lire automatiquement l'audio. Vous devez commencer l'audio à l'intérieur d'un événement d'entrée en fonction de l'entrée utilisateur comme 'click' ou 'touchstart'.

3. Comme indiqué dans l'échantillon, vous ne pouvez analyser audio si la source est soit du même domaine ou vous demander la permission CORS et le serveur donne la permission. Autant que je sache que Soundcloud donne la permission et il est sur une base de chanson par. Il est à les paramètres de la chanson de l'artiste individuel si l'analyse audio est autorisée ou non pour une chanson.

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

   Ce dit essentiellement « demander au serveur d'autorisation pour l'utilisateur« anonyme ». Le serveur peut donner l'autorisation ou non. Il est au serveur. Cela inclut même demander le serveur sur le même domaine qui signifie que si vous allez demander une chanson sur le même domaine que vous devez soit (a) d'enlever la ligne ci-dessus ou (b) configurer votre serveur pour donner l'autorisation CORS. La plupart des serveurs par défaut ne donnent pas un CORS autorisation si vous ajoutez cette ligne, même si le serveur est le même domaine, si elle ne donner la permission CORS alors essayer d'analyser l'audio échouera.

---

Musique: MÉDECIN VOX - Niveau

Answer 3

je SoundManager2 pour tirer les données de forme d'onde du fichier mp3. Cette fonctionnalité nécessite Flash 9 de sorte qu'il pourrait ne pas être la meilleure approche.

Ma forme d'onde démo avec HMTL5 Canvas: http://www.momentumracer.com/electriccanvas/

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

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

Answer 4

En fonction de la complexité que vous pourriez être intéressé à essayer le traitement (http://www.processing.org), il a vraiment des outils faciles à faire des applications basées sur le Web, et il dispose d'outils pour obtenir la FFT et la forme d'onde d'un fichier audio.