title: Web Audio API append/concatenate different AudioBuffers and play them as one song
body: <p>I've been playing with the Web Audio API and I'm trying to load multiple parts of a song and append them to a new ArrayBuffer and then use that ArrayBuffer for playing all the parts as one song. In the following example I am using the same song data (which is a small loop) instead of different parts of a song.</p>
  
  <p>The problem is that it still plays just once instead of two times and I don't know why.</p>
  
  <p><a href="http://cl.ly/3g2U0z331e0K/loop.mp3">Download song</a> </p>
  
  <pre><code>function init() {
  
    /**
     * Appends two ArrayBuffers into a new one.
     * 
     * @param {ArrayBuffer} buffer1 The first buffer.
     * @param {ArrayBuffer} buffer2 The second buffer.
     */
    function appendBuffer(buffer1, buffer2) {
      var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
      tmp.set( new Uint8Array(buffer1), 0);
      tmp.set( new Uint8Array(buffer2), buffer1.byteLength);
      return tmp;
    }
  
    /**
     * Loads a song
     * 
     * @param {String} url The url of the song.
     */
    function loadSongWebAudioAPI(url) {
      var request = new XMLHttpRequest();
      var context = new webkitAudioContext();
  
      request.open('GET', url, true);
      request.responseType = 'arraybuffer';
  
      /**
       * Appends two ArrayBuffers into a new one.
       * 
       * @param {ArrayBuffer} data The ArrayBuffer that was loaded.
       */
      function play(data) {
        // Concatenate the two buffers into one.
        var a = appendBuffer(data, data);
        var buffer = a.buffer;
        var audioSource = context.createBufferSource();
        audioSource.connect(context.destination);
  
        //decode the loaded data
        context.decodeAudioData(buffer, function(buf) {
          console.log('The buffer', buf);
          audioSource.buffer = buf;
          audioSource.noteOn(0);
          audioSource.playbackRate.value = 1;
        });
  
      };
  
      // When the song is loaded asynchronously try to play it.
      request.onload = function() {
        play(request.response);
      }
  
      request.send();
    }
  
  
    loadSongWebAudioAPI('http://localhost:8282/loop.mp3');
  }
  
  window.addEventListener('load',init,false);
  </code></pre>