sample-jam

Build and play your own instrument and record your performances.

sample-jam makes use of the Web Audio API and RecorderJS to capture short audio samples from the user, which can then be played with the keyboard. Once logged in, users can also save a set of samples, load them later on, and make and download recordings of the sampler.

###Technologies Used

• Node/Express back end with MongoDB
• Standard Node packages including express, mongoose and body-parser
• Bcryptjs and crypto packages for user password encryption and authentication
• RecorderJS, developed by Matt Diamond
• Web Audio API audio nodes including MediaStreamSource, Gain and Merger
• FileReader object used for generating Base64 string versions of audio for database storage
• HTML/CSS and JQuery front-end

###Process

This is the first app I've made to incorporate the Web Audio API. After getting the idea to make an interactive sampler, I started by researching how audio works in the browser. I was amazed to find how much is possible with Javascript alone by tapping into the Web Audio API and Audio Context. Two indispensible resources were RecorderJS and Chris Wilson's excellent AudioRecorder demo, which helped me to better understand how to set up and use Audio Context.

Once I got past the hurdle of recording audio, it was relatively straightforward to use JQuery to send recorded samples to 'modules' that each have keypress listeners. The other major challenge was working out how to save and retrieve audio from the database. The key seemed to be in using FileReader to generate (exceedingly long) base64 strings from the audio blobs generated by recorderJS.

var WavReader = {
  read: function(file, callback){
    var reader = new FileReader();

    var fileInfo = {
      name: file.name,
      file: null
    };

    reader.onload = function(){
      fileInfo.file = reader.result;
      callback(null, fileInfo);
    };

    reader.onerror = function(){
      callback(reader.error);
    };

    reader.readAsDataURL(file);
  }
};

The final line generates the base64 string, which could then be sent to and from Mongo through AJAX.

Future Versions

I would next like to explore adding effects like reverb and delay to each module. If storage space were not an issue, it would be great to let users store and share their creations.