Render-Bild von Audio

Question

Gibt es eine Möglichkeit, eine Visualisierung einer Audiodatei zu machen?

Vielleicht mit SoundManager2 / Canvas / HTML5 Audio? Kennen Sie einige Techniken?

Ich mag so etwas erstellen:

Answer 1

Dies ist nicht möglich, noch außer durch das Audio als binäre Daten zu holen und Entpacken des MP3 (nicht JavaScript forte) oder vielleicht von Java oder Flash mit den Bits von Informationen zu extrahieren, müssen Sie ( es scheint möglich, aber es scheint auch, wie mehr Kopfschmerzen als ich persönlich) zu übernehmen möchte.

Aber Sie könnten daran interessiert sein Dave Humphreys Audio-Experimente , die einige coole Visualisierung umfassen Zeug. Er tut dies durch Modifikationen an die Browser-Quellcode zu machen und es neu zu kompilieren, so dass dies für Sie offensichtlich keine realistische Lösung ist. Aber diese Versuche zu neuen Funktionen führen könnte in der Zukunft das <audio> Element hinzugefügt werden.

Answer 2

Sie haben einen Ton von Beispielen und Anleitungen hier: http://www.html5rocks.com / en / tutorials / # WebAudio

Für den Moment ist es in den letzten Chrome und der letzten letzten Firefox (Opera?) Arbeitet.

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

Um es zu tun, jetzt, für alle Besucher einer Website, können Sie SoundManagerV2.js überprüfen, die durch einen Blitz „Proxy“, um Audio-Datenzugriff übergeben http://www.schillmania.com/projects/soundmanager2/demo/api/ (sie bereits mit der Arbeit auf dem HTML5-Audio-Engine, um sich zu lösen als sobald Majors Browser implementieren)

Bis zu Ihnen in einer Leinwand Zeichnung 3 verschiedene Audiodaten. Waveform, Equalizer und 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
        }
    });
};

Mit HTML5 können Sie erhalten:

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

Time to work! ;)

Answer 3

Run-Proben durch eine FFT, und dann innerhalb eines vorgegebenen Bereiches von Frequenzen als die Höhe der Kurve an einem bestimmten Punkt die Energie anzuzeigen. Sie wollen normalerweise die Frequenzbereiche von etwa 20 Hz bei der auf die Abtastrate etwa links gehen / 2 auf der rechten Seite (oder 20 kHz, wenn die Abtastrate 40 kHz überschreitet).

Ich bin mir nicht so sicher über das, obwohl in JavaScript zu tun. Verstehen Sie mich nicht falsch: JavaScript ist durchaus in der Lage ein FFT-Implementierung - aber ich bin nicht sicher, ob darüber in Echtzeit zu tun. OTOH, für Benutzer anzeigen, können Sie durch mit etwa 5-10 Updates pro Sekunde erhalten, die wahrscheinlich ein wesentlich leichteres Ziel zu erreichen sein soll. Zum Beispiel 20 ms von Proben aktualisierten alle 200 ms könnten auf halbem Weg zumutbar seien zu hoffen, obwohl ich sicherlich kann nicht garantiert werden, dass Sie in der Lage sein werden damit Schritt zu halten.

Answer 4

http://ajaxian.com/archives/amazing -Audio-Sampling-in-Javascript-mit-firefox

den Quellcode prüfen Sie, um zu sehen, wie sie die Audio sind Visualisierung

Answer 5

Dazu würden Sie tun müssen, um ein Fourier-Transformation (FFT sucht), die in Javascript langsam sein, und nicht möglich, in Echtzeit zu präsentieren.

Wenn Sie wirklich diese im Browser tun mögen, würde ich in es zu tun vorschlägt java / Silverlight, da sie die schnellste Zahlknirschens Geschwindigkeit im Browser liefern.