Using the Web Audio API let's you add sound to your existing apps, making them more fun and interactive, and also opens a whole new world of ideas for building music apps. And while it's important to know how to work with the vanilla Web Audio API, I would like to show you this cool library that makes it much easier to work with the audio, and of course it let's you build your stuff much faster. I teach how to get it started with the Web Audio API on CSS-Tricks in my article, create all of the Sound classes, work with the butter etc. Now I want to show you how to do it with Pizzicato.js and how easy is that.

Making things easy

Let's try to create an oscillator, set the waveform type to sine and frequency to 440 Hz.

  var sineWave = new Pizzicato.Sound({ 
    source: 'wave', 
    options: {
        frequency: 440
    }
});

OK, that's it. Now sineWave.play(); will play the sound and you can call stop and play how many times you want. It's an example taken from the documentation, which you can find here.

If you're interested in how different waveforms sound, take a look at my Pen:

As you see from the docs, it let's us create sounds from waveform, a file, your microphone or from a function (like creating a white noise) very easily.

  var acousticGuitar = new Pizzicato.Sound('./audio/acoustic.wav', function() {
    // Sound loaded!
    acousticGuitar.play();
});

See how easy it is to add a sound from file. All of the XMLHttpRequest and buffer stuff has already been done for us, so we don't need to deal with that.

One other great feature is the ability to group several sounds and control them all together:

  var bass = new Pizzicato.Sound('./audio/bass.mp3');
var guitar = new Pizzicato.Sound('./audio/guitar.mp3');
var delay = new Pizzicato.Effects.Delay();
var group = new Pizzicato.Group([guitar, drums]);

group.addEffect(delay);

group.removeEffect(delay);

Grouped and added effect to the group. Awesome!

Working with effects

Attack / Release

It doesn't feel right when the sound you listen to ends harshly. And that is what happens by default. So we use something like this to end the sound smoothly in Web Audio API: this.gainNode.gain.exponentialRampToValueAtTime(0.001, this.context.currentTime + 0.5); this.source.stop(this.context.currentTime + 0.5);

exponentialRampToValueAtTime schedules a gradual exponential change of the value. So these lines of code make it smoothly lower the volume for 0.5 seconds until it stops completely.

In Pizzicato.js there's a very elegant way to smoothly start or stop the sounds. In music the rate the sound begins and increases volume is called attack and the time it takes to stop the sound is called the release. Here's more about ADSR. Those effects in Pizzicato.js are also called Attack and Release. So if we take a look at the stop method of the library, we can see how it calls the stopWithRelease method, checking if release shall be applied. And if it is, linearRampToValueAtTime is used to smoothly stop the sound. To be honest I don't know why linear ramp was chosen instead of the exponential ramp, which sounds smoother to my ear. But I assume this may be because exponential ramp does not work very well in Safari. ApplyAttack uses the same function to start the sound smoothly. The default values for Attack and Release are 0.04 (which is 4 milliseconds). Let's see the example from the documentation:

  var sineWave = new Pizzicato.Sound({ 
    source: 'wave'
});

sineWave.attack = 0.5;
sineWave.release = 1;
sound.play();

Actually, if you don't use at least a tiny attack on the oscillator, you will hear a clicking noise when it starts playing. Even a 0.01 seconds attack fixes the clicking noise problem.

Distortion

Distortion is the effect that makes an electric guitar sound "electric". Web Audio API uses the WaveShaperNode interface to apply a wave shaping distortion to the signal. The hardest of all is to know how you shall shape the form. You can read more about distortion and how it modifies the signal here. The fun thing is the library uses the very same resource for making the distortion curve I showed in my article. So we use the same curves. gain controls the amount of distortion.

  var distortion = new Pizzicato.Effects.Distortion({
    gain: 0.4
});

sound.addEffect(distortion);
sound.play();

Delay

The delay effect works great. Web Audio API uses DelayNode interface for working with the delay. However, it requires a lot of work to create a delay effect. And Pizzicato.js is absolutely great at it. To be honest, I'm really impressed how well delay effects are implemented. And I absolutely enjoy it. You can check the examples in the documentation and listen to the Delay, Ping-Pong Delay and Dub Dealy effects.

  var delay = new Pizzicato.Effects.Delay({
    feedback: 0.6,
    time: 0.4,
    mix: 0.5
});

sound.addEffect(delay);
sound.play();

You can play with this and other effects on the Pizzicato.js documentation page.

Other effects

Here are the effects supported at the moment:

  • Attack-release
  • Delay
  • Ping-pong delay
  • Dub delay
  • Distortion
  • Quadrafuzz
  • Flanger
  • Reverb
  • Convolver
  • Tremolo
  • Stereo Panner
  • Compressor
  • Low-pass filter
  • High-pass filter
  • Ring modulator

Reverb makes the sound produced more persistent, Stereo Panner lets you position the sound to the left or right. Low-pass and High-pass filters let you create a parametric equalizer, Tremolo effect is absolutely awesome and works great with Jimi Hendrix style guitar riffs. Just listen to the great examples provided.

Start using it

It is really exciting and let's you easily do very professional manipulations to the sound, which will be a huge help when creating any music apps. The documentation is very straightforward, so I encourage you to consider using it in your next (and current) projects. Just install it using Bower, Npm or get it from CDN or Github and you're ready to make some noise.

For any questions contact me @greghvns


3,175 0 71