title: OfflineAudioContext FFT analysis with chrome
body: <p>i'm trying to build a waveform generator that get audiofile amplitudes values and display them to a canvas as quick as possible (faster than realtime) in javascript. so i use the OfflineAudioContext / webkitOfflineAudioContext , load the file and start the analyse. 
  the waveform is to fill a wide canvas.</p>
  
  <p>i analyse buffer in a processor.onaudioprocess function. (i guess it's the way it works ?)</p>
  
  <p>it works fine in firefox but i've got an issue in chrome : it seems it "jumps" over much analyse to finish it works as soon as possible and only returns a few coordinates (something like 16).</p>
  
  <p>here is the jsfiddle :
  <a href="http://jsfiddle.net/bestiole/95EBf/">http://jsfiddle.net/bestiole/95EBf/</a></p>
  
  <pre><code>// create the audio context
  if (! window.OfflineAudioContext) {
      if (! window.webkitOfflineAudioContext) {
          $('#output').append('failed : no audiocontext found, change browser');
      }
      window.OfflineAudioContext = window.webkitOfflineAudioContext;
  }
  //var context = new AudioContext();
  var length = 15241583;
  var samplerate = 44100;
  var fftSamples = 2048;
  var waveformWidth = 1920;
  
  var context = new OfflineAudioContext(1,length,samplerate);
  var source;
  var splitter;
  var analyser;
  var processor;
  var i=0;
  var average;
  var max;
  var coord;
  
  processor = context.createScriptProcessor(fftSamples, 1, 1);
  processor.connect(context.destination);
  
  analyser = context.createAnalyser();
  analyser.smoothingTimeConstant = 0;
  analyser.fftSize = fftSamples;
  
  source = context.createBufferSource();
  splitter = context.createChannelSplitter();
  source.connect(splitter);
  splitter.connect(analyser,0,0);
  
  analyser.connect(processor);
  
  context.oncomplete = function(){
      $('#output').append('&lt;br /&gt;complete');
  }
  
  var request = new XMLHttpRequest();
  request.open('GET', "http://www.mindthepressure.org/bounce.ogg", true);
  request.responseType = 'arraybuffer';
  request.onload = function(){
      $('#output').append('loaded ! ');
      context.decodeAudioData(request.response, function(buffer) {
          $('#output').append('starting analysis&lt;br /&gt;');
          processor.onaudioprocess = function(e){
              var data =  new Uint8Array(analyser.frequencyBinCount);
              analyser.getByteFrequencyData(data);
              average = getAverageVolume(data);
              max = Math.max.apply(Math, data);
              coord = Math.min(average*2,255);
              coord = Math.round((max+coord)/2);
              ctx.fillStyle=gradient;
              ctx.fillRect(i,255-coord,1,255);
              console.log(i+' -&gt; '+coord);
              i++;
          }
          source.buffer = buffer;
          source.start(0);
          context.startRendering();
      }, onError);
  }
  request.send();
  
  function onError(e) {
      $('#output').append('error, check the console');
      console.log(e);
  }
  
  function getAverageVolume(array) {
      var values = 0;
      var average;
      var length = array.length;
      for (var k = 0; k &lt; length; k++) {
          values += array[k];
      }
      average = values / length;
      return average;
  }
  </code></pre>
  
  <p>(here is another version that forces waveform to fit in 1920px wide and generate a waveform data for who is interested : <a href="http://jsfiddle.net/bestiole/E3rSx/">http://jsfiddle.net/bestiole/E3rSx/</a> )</p>
  
  <p>i really dont get the point, how doesn't chrome treat every part of the audio file ?</p>
  
  <p>thanks for any help !</p>