title: Loading a wav file using ajax
body: <p>I have a list of audio files. What I want to accomplish is that every time when I click on a file from the list, javascript loads the waveform of that audio file.</p>
  
  <p>This is a function that draws the waveform: </p>
  
  <pre><code>function drawBuffer( width, height, context, data ) {
      var step = Math.ceil( data.length / width );
      var amp = height / 2;
      context.fillStyle = "silver";
      context.clearRect(0,0,width,height);
      for(var i=0; i &lt; width; i++){
          var min = 1.0;
          var max = -1.0;
          for (j=0; j&lt;step; j++) {
              var datum = data[(i*step)+j]; 
              if (datum &lt; min)
                  min = datum;
              if (datum &gt; max)
                  max = datum;
          }
          context.fillRect(i,(1+min)*amp,1,Math.max(1,(max-min)*amp));
      }
  }
  </code></pre>
  
  <p>On click I get the value selected from the list and request the php page that should return the file with that name: </p>
  
  <pre><code>function getAudioClip() {
          var x = document.getElementById("clips").value;
          $.get( "get_audio.php", { filename: x } )
            .done(function( data ) {
              loadAudioClip(data);
            });
      }
  </code></pre>
  
  <p>In the end the function <code>loadAudioClip(data)</code> should change the waveform: </p>
  
  <pre><code>function loadAudioClip(data) {
          var canvas = document.getElementById( "wavedisplay" );
          drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), data );
  }
  </code></pre>
  
  <p>How should my get_audio.php look like. How should I get data. The files are in the folder called audio/.</p>