Skip to content
Record some sounds, jam out.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
middleware
models
public
routes
views
README.md
app.js
package.json
scratchpad.txt

README.md

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.

sample-jam screenshot

###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 incorporates 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.

You can’t perform that action at this time.