Review: Loading And Playing Sounds - The Coding Train - p5.js Sound Tutorail - Part 1 (17min)

TODO

☐

There's a few vidoes covered here. split them out to individual posts

☐

clean up the examples

Notes

Use preload() for things like file loads that need to happen before the rest of the processes run.
This will load and play a sound

var song;

function preload() {
  song = loadSound("example.mp3")
}

function setup() {
  createCanvas(200,200);
  song.play();
}

function draw() {
  background(0);
}

set the volume with .setVolume(0.5)
the volume number is between 0 and 1
this creates a volume slider

var song;
    var slider;

    function preload() {
      song = loadSound("example.mp3")
    }

    function setup() {
      createCanvas(200, 200);
      slider = createSlider(0, 1, 0.5, 0.01);
      song.play();
    }

    function draw() {
      background(0);
      song.setVolume(slider.value());
    }

Instead of preload() you can also use a callback. (see the video for the sample at ~11min)
Can also do .rate() and .pan() for changing the speed and the panning

Part 2 video

https://www.youtube.com/watch?v=YcezEwOXun4&list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW&index=2

This is how to do play/pause with a button:

var song;
    var button;

    function setup() {
      createCanvas(200, 200);
      song = loadSound("example.mp3", loaded);
      background(0);
    }

    function togglePlaying() {
      if (!song.isPlaying()) {
        song.play();
        button.html("pause")
      } else {
        song.pause();
        button.html("play")
      }
    }

    function loaded() {
      button = createButton("play");
      button.mousePressed(togglePlaying)
    }
  </script>

I'm skipping part 3 on timing, jumps, and cues right now

part 4 - amplitutude analysis

This is what I'm after for the stream

This is a parsed down example

var amp;
    var button;
    var song;

    function setup() {
      createCanvas(200, 200);
      song = loadSound("example.mp3", loaded);
      amp = new p5.Amplitude();
    }

    function togglePlaying() {
      if (!song.isPlaying()) {
        song.play();
        button.html("pause")
      } else {
        song.pause();
        button.html("play")
      }
    }

    function loaded() {
      button = createButton("play");
      button.mousePressed(togglePlaying)
    }

    function draw() {
      background(30);
      fill(200, 100, 50);
      var vol = amp.getLevel();
      var diam = map(vol, 0, 1, 50, 200)
      ellipse(width / 2, height / 2, diam, diam)
    }

I skipped over videos 5, 6, and 7 to get to 8 which has mic input which is what I'm after for the stream.

Part 8

This is how to get the mic input and graph the audio

var mic;

    function setup() {
      createCanvas(200, 200);
      mic = new p5.AudioIn();
      mic.start();
    }

    function draw() {
      background(0);
      var vol = mic.getLevel();
      ellipse(100, 100, vol * 200, vol * 200);
      console.log(vol)

    }

Part 9

Graphing amplititude

This was the sample. Should be able to use the mic instead

var song;
    var amp;
    var button;

    var vol_history = [];

    function toggle() {
      if (song.isPlaying()) {
        song.pause();
      } else {
        song.play();
      }
    }


    function preload() {
      song = loadSound("example.mp3");
    }

    function setup() {
      createCanvas(200, 200);
      button = createButton('toggle');
      button.mousePressed(toggle);
      // song.play();
      amp = new p5.Amplitude();

      // mic = new p5.AudioIn();
      // mic.start();

    }

    function draw() {
      background(0);
      // var vol = mic.getLevel();
      var vol = amp.getLevel();
      vol_history.push(vol);
      stroke(255);
      noFill();
      beginShape();
      for (var i = 0; i < vol_history.length; i++) {
        var y = map(vol_history[i], 0, 1, height / 2, 0);
        vertex(i, y);
      }
      endShape();

      if (vol_history.length > width) {
        vol_history.splice(0, 1);
      }

    }

part 10

making a radial graph of amplitutde

Not pulling the code, but it's kinda fun

part 11

frequency analysis.

still need to watch this one

-- end of line --