MozillaWiki

User:Corban/AudioAPI: Difference between revisions

User page Discussion

User:Corban/AudioAPI (view source)

Revision as of 17:31, 26 February 2010

162 bytes added ,  26 February 2010
→‎Complete Example: Calculating FFT Spectrum in JavaScript
Line 63: Line 63:


<pre>
<pre>
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<html>
   <head>       
   <head>       
Line 69: Line 69:
   </head>
   </head>
   <body>
   <body>
    <audio src="corban1.ogg" controls="true" onaudiowritten="audioWritten(event);" style="width: 512px;"></audio>
   
    <div><canvas id="fft" width="512" height="200"></canvas></div>
   
     <script>
     <script>
    var spectrum;
      var spectrum;
    var signal;
      var signal;
    var peak = [];
        
       var canvas = document.getElementById('fft');
    function audioWritten(event) {
       var ctx = canvas.getContext('2d');
       signal  = event.mozFrameBuffer;
       spectrum = event.mozSpectrum;
       var speclen = spectrum.length;


       // calculate spectrum from complex values
       function audioWritten(event) {
      for ( var i = 0; i < speclen; i++ ) {
        signal = event.mozFrameBuffer;
var j = i + 0.02 * speclen;
        spectrum = event.mozSpectrum;
var log = Math.log(j/speclen * (speclen - j)) * Math.sqrt(j/speclen);
       
         var magnitude = spectrum.item(i) * 2048 * log * 2;
         var specSize = spectrum.length, magnitude;
         if ( typeof(peak[i]) == 'undefined' || peak[i] < magnitude ) {
       
           peak[i] = magnitude;
        // Clear the canvas before drawing spectrum
        } else {
        ctx.clearRect(0,0, canvas.width, canvas.height);
           peak[i] *= 0.99; // peak slowly falls until a new peak is found
          
        for ( var i = 0; i < specSize; i++ ) {
           magnitude = spectrum.item(i) * 4000; // multiply spectrum by a zoom value
         
          // Draw rectangle bars for each frequency bin
           ctx.fillRect(i * 4, canvas.height, 3, -magnitude);
         }
         }
       }
       }
    }
     </script>
     </script>
    <audio src="song.ogg" onaudiowritten="audioWritten(event);"></audio>
   </body>
   </body>
</html>
</html>
Corban
35

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/204898"