Rendre l'image à partir de l'audio

Question

Y a-t-il une possibilité de rendre la visualisation d'un fichier audio? Peut-être avec SoundManager2/Canvas/HTML5 Audio? Connaissez-vous des techniques?

Je veux créer quelque chose comme ceci:

Answer 1

Ce n'est pas possible encore que par la récupération de l'audio sous forme de données binaires et déballer le MP3 (pas de forte de JavaScript) , ou peut-être en utilisant Java ou Flash pour extraire les bits d'information dont vous avez besoin (cela semble possible mais il semble aussi que plus de maux de tête que je voudrais personnellement prendre).

Mais vous pourriez être intéressé par Dave Humphrey's audio experiments, qui inclut des trucs de visualisation cool. Il le fait en apportant des modifications au code source du navigateur et en le recompilant, donc ce n'est évidemment pas une solution réaliste pour vous. Mais ces expériences pourraient conduire à de nouvelles fonctionnalités ajoutées à l'élément <audio> à l'avenir.

Answer 2

Pour cela, vous devez faire une transformée de Fourier (chercher FFT) qui sera lent en javascript, et pas possible en temps réel à l'heure actuelle .

Si vous voulez vraiment faire cela dans le navigateur, je suggère de le faire en Java/Silverlight, car ils offrent la vitesse de calcul du nombre le plus rapide dans le navigateur.

Answer 3

Exécuter des échantillons à travers une FFT, puis afficher l'énergie dans une plage de fréquences donnée comme la hauteur du graphique à un point donné. Normalement, vous voulez que les gammes de fréquences vont d'environ 20 Hz à gauche à environ la fréquence d'échantillonnage/2 à droite (ou 20 KHz si la fréquence d'échantillonnage dépasse 40 KHz). Je ne suis pas si sûr de le faire en JavaScript cependant. Ne vous méprenez pas: JavaScript est parfaitement capable de mettre en œuvre une FFT - mais je ne suis pas du tout sûr de le faire en temps réel. OTOH, pour le visionnement des utilisateurs, vous pouvez vous en sortir avec environ 5 à 10 mises à jour par seconde, ce qui est susceptible d'être une cible beaucoup plus facile à atteindre. Par exemple, 20 ms d'échantillons mis à jour toutes les 200 ms pourraient être à moitié espérés, bien que je ne puisse certainement pas garantir que vous serez capable de suivre ce rythme.

Answer 4

http://ajaxian.com/archives/amazing-audio-sampling-in-javascript-with-firefox

Vérifiez le code source pour voir comment ils visualiser l'audio

Answer 5

Vous avez un ton d'échantillons et des tutoriels ici: (Opéra) http://www.html5rocks.com/en/tutorials/#webaudio

Pour le moment, il travaille dans la dernière Chrome et le dernier Firefox dernier.

Demos: http://www.chromeexperiments.com/tag/audio/

Pour le faire maintenant, pour tous les visiteurs d'un site web, vous pouvez vérifier SoundManagerV2.js qui passent à travers un flash « proxy » pour accéder aux données audio http://www.schillmania.com/projects/soundmanager2/demo/api/ (Ils travaillent déjà sur le HTML5 moteur audio, pour le libérer dès que les principaux navigateurs l'implémentent)

A vous de dessiner dans une toile 3 données audio différentes: WaveForm, Equalizer et Peak.

soundManager.defaultOptions.whileplaying = function() { // AUDIO analyzer !!! 
    $document.trigger({ // DISPATCH ALL DATA RELATIVE TO AUDIO STREAM // AUDIO ANALYZER 
     type    : 'musicLoader:whileplaying', 
     sound   : { 
      position   : this.position,   // In milliseconds 
      duration   : this.duration, 
      waveformDataLeft : this.waveformData.left, // Array of 256 floating-point (three decimal place) values from -1 to 1 
      waveformDataRight: this.waveformData.right, 
      eqDataLeft  : this.eqData.left,  // Containing two arrays of 256 floating-point (three decimal place) values from 0 to 1 
      eqDataRight  : this.eqData.right,  // ... , the result of an FFT on the waveform data. Can be used to draw a spectrum (frequency range) 
      peakDataLeft  : this.peakData.left,  // Floating-point values ranging from 0 to 1, indicating "peak" (volume) level 
      peakDataRight : this.peakData.right 
     } 
    }); 
}; 

Avec HTML5, vous pouvez obtenir:

var freqByteData = new Uint8Array(analyser.frequencyBinCount); 
var timeByteData = new Uint8Array(analyser.frequencyBinCount); 
function onaudioprocess() { 
    analyser.getByteFrequencyData(freqByteData); 
    analyser.getByteTimeDomainData(timeByteData); 
    /* draw your canvas */ 
} 

temps de travailler! ;)