title: Loading Audio In Web Audio API From Node API
body: <p>I'm trying to load audio from the server using Web Audio API. So far, all of my attempts to return data using a Node/Express API have failed to return anything that would play in my browser. </p>
  
  <p>My current attempt is to store the contents of the file into a buffer within Mongo. When requested, the audio gets converted to an ArrayBuffer, and then encoded into Base64. The client then decodes the string and passes it into the Web Audio API Buffer Source. </p>
  
  <p>I'm sure I'm doing this the hard way, but this the only thing I've come up with. I've posted my code below. If you know of a better way, I would appreciate the guidance.</p>
  
  <p>Thanks</p>
  
  <p><strong>Load Data Into MongoDB</strong> </p>
  
  <pre><code>var buffer = fs.readFileSync('C4.mp3');
  Sound.create({
    instrument: 'Piano',
    audio: buffer,
    note: 'C4'
  });
  </code></pre>
  
  <p><strong>Controller Converts Audio</strong></p>
  
  <pre><code>var Sound = require('./sound.model');
  var base64 = require('base64-arraybuffer');
  
  // Get list of sounds
  exports.index = function(req, res) {
    Sound.find(function (err, sounds) {
      if(err) { return handleError(res, err); }
  
      var soundsToReturn = [];
      for (var i = 0; i &lt; sounds.length; i++) {
        soundsToReturn.push( {instrument: sounds[i].instrument,
                              audio: base64.encode(toArrayBuffer(sounds[i].audio)),
                              note: sounds[i].note});
      };
  
      return res.status(200).json(soundsToReturn);
    });
  };
  
  function toArrayBuffer(buffer) {
    var ab = new ArrayBuffer(buffer.length);
    var view = new Uint8Array(ab);
    for (var i = 0; i &lt; buffer.length; ++i) {
        view[i] = buffer[i];
    }
    return ab;
   }
  </code></pre>
  
  <p><strong>Client Decodes Audio</strong></p>
  
  <pre><code>  $.ajax({
        url: url,
        dataType: 'json',
        success: function(data) {
          audioCtx.decodeAudioData(_base64ToArrayBuffer(data[0].audio), function(b){
              buffer = b;
          })
        }
      });
  
  
  function _base64ToArrayBuffer(base64) {
    var binary_string =  window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array( len );
    for (var i = 0; i &lt; len; i++)        {
      var ascii = binary_string.charCodeAt(i);
      bytes[i] = ascii;
    }
    return bytes.buffer;
  }
  </code></pre>