Blip.

Download / Install

• Download blip.js or blip.min.js
• Using bower: $ bower install blip

Blip helps you load samples asynchronously, and gives you a simple callback mechanism to ensure that your samples are ready to use.

        
          blip.sampleLoader()
            .samples({
              'kick', 'path/to/your/kick_sound.wav',
              'snare', 'path/to/your/snare_sound.wav',
              'kazoo', 'path/to/your/kazoo_sound.wav'
            })
            .done(callback)
            .load();

          function callback() {
            // now your samples are available
            blip.sample('snare') // is an AudioBuffer
          }
        
      

A clip is a wrapper for a sample, which handles creating and wiring up a BufferSource each time the sound is played.

        
          var kick = blip.clip()

          // assign an audio sample
          kick.sample('kick');

          // play the clip immediately
          kick.play(0);

          // play the clip again in 5 seconds
          kick.play(5);
        
      

Blip enables you to create precise loops for playing samples, controlling audio parameters, or just about anything else you can think of by letting you deal directly with time, and providing a simple and elegant scheduling mechanism.

A loop simply provides markers for points in time, to which you can assign arbitrary data, and fire playback events.

These examples assume the variable clip is a blip clip.

A loop generates "ticks" at a specific tempo, and allows you to schedule events based on the time of each tick.

        
          var monotonous = blip.loop()
            .tempo(110)
            .tick(function(t) {
              clip.play(t)
            });

          monotonous.start();
        
      

Loops can take an array of arbitrary data to loop over, and the current datum is passed as the second argument to the tick callback.

        
          var rhythmic = blip.loop()
            .tempo(130)
            .data([1,0,1,1,0])
            .tick(function(t,d) {
              if (d) {
                clip.play(t)
              }
            });

          rhythmic.start();
        
      

The data passed in can represent anything you want it to. In this case it is being used to set the playback rate of the clip.

        
          var melodic = blip.loop()
            .tempo(120)
            .data([0.3,0.4,0.5,0.6])
            .tick(function(t,d) {
              clip.play(t, { 'rate': d });
            })

          melodic.start();
        
      

Blip provides helper functions to add elements of randomness and chance to your compositions.

This loop has a 1/3 chance to play a clip on each tick, and assigns it a random rate between 0.2 and 1.4

        
          var entropic = blip.loop()
            .tempo(110)
            .tick(function(t,d) {
              if (blip.chance(1/3)) clip.play(t, { 'rate': blip.random(0.2, 1.4) });
            })

          entropic.start();