Comp Sound

Comp Sound

Overview

Make some noise using the p5 sound library.

Tools

p5.js

Sound

p5.js Sound Library

In addition to the basic drawing API, p5.js includes add-on libraries. The interface chapter introduces the p5.dom library, and the examples in the chapter use the p5.sound library. The p5.sound library builds on the Web Audio API and provides functions for generating tones, playing recorded sounds, and visualizing the waveform and spectrum of sounds. I highly suggest taking a look at all of the sound examples to get an idea of what the sound library can do.

Drawings and Sounds

Compare a basic p5.js drawing with a p5.audio sketch. What do they have in common? How are they different?

Hello, p5.js!

function setup() {
    createCanvas(500, 500);
}

function draw() {
    fill(255, 0, 0);
    noStroke();
    ellipse(250, 250, 100, 100);
}

Hello, p5.sound!

function setup() {
    myOscillator = new p5.Oscillator('sine');
    myOscillator.amp(1);
    myOscillator.freq(440);
    myOscillator.start();
}

Computers, Light, Sound, and People

Light and sound flow through our environment as electromagnetic and air pressure waves. Our eyes and our ears collect data about these waves and our visual and auditory cortexes process that data to create information. Though they work in different ways, both of these sensory systems are powerful. We can take advantage of these systems by choosing the types of forms we create.

Light and Sound Lecture Notes

Generating Sound with p5.js

Hello, Sound!

Changing the Frequency

Modulating the Frequency

Playing Recorded Sounds

Audio clip from Hackers(1995)

Capturing Output

p5.sound provides methods for recording the sound generated by your program and saving it to a file. The following function records length milliseconds of audio and saves it as output.wav.

Your audio may sound fine at run time but clipped when you play back the .wav. If this happens, try reducing the volume of the sounds you generate.

If you can’t get good quality audio capture from p5.SoundRecorder, you might get better results using a screen recording program like Quicktime Player.

// uses the p5 SoundRecorder and SoundFile classes to record the audio output.
// begins recording when called. records for _length_ time in milliseconds.
function record(length){
    var soundRecorder = new p5.SoundRecorder();
    var soundFile = new p5.SoundFile();
    soundRecorder.record(soundFile);
    setTimeout(function() {
        console.log("Recording Complete");
        soundRecorder.stop();
        save(soundFile, "output.wav");
    }, length);
}

In-class Challenge

Play a little melody.

Visualizing Sound with p5.js

Volume

Wave

FFT

In-class Challenge

Display a little melody.

Sketch!

Base

Keep sketching. Make a bunch of noise!

Challenge 1: Synesthesia 1

Choose a 15 second video clip. Use p5.sound to create a new soundtrack for your clip. Combine audio and sound and post.

Challenge 2: Synesthesia 2

Choose a 15 second audio clip. Use p5.sound to generate graphics driven by the sound. Combine audio and sound and post.

Challenge 3: Synesthesia 3

Create a 15 second procedurally generated audio+visual form. Try to “feed” the audio and the video from the same process.

Jamie Wong: Color from Hexcodes to Eyeballs
Jamie Wong describes the each step of how color is expressed and interpreted.
Compform '16 Comp Music Notes
Compform '16 week on computational music.
Compform '16 Comp Music Notes
Examples from Compform '16 week on computational music.
WebMidiAPIShim
A javascript shim for accessing midi devices.
3Blue1Brown: Fourier Transform
A great visual introduction to the Fourier transform.