The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

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

TODO: Pull subtitle into page object

Notes

Code
var song;

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

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

function draw() {
  background(0);
}
Code
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());
    }
Code
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

Code
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

Code
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

Code
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

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

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

-- youtube
-- Pn1g1wjxl_0


-- 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

-- code 
-- javascript

var song;

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

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

function draw() {
  background(0);
}


-- list

- set the volume with `.setVolume(0.5)`` 

- the volume number is between 0 and 1

- this creates a volume slider

-- code
-- js

    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());
    }


-- list

- 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:

-- code
-- js


    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>


-- p


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


-- p 

part 4 - amplitutude analysis

This is what I'm after for the stream

This is a parsed down example

-- code
-- js

    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)
    }


-- note

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. 

-- p

Part 8

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

-- code
-- js


    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)

    }


-- p

Part 9 

Graphing amplititude

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


-- code


    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);
      }

    }




-- p

part 10

making a radial graph of amplitutde


Not pulling the code, but it's kinda fun

-- p 

part 11

frequency analysis. 

still need to watch this one



-- categories
-- Videos 
-- Reviews 
-- p5

-- metadata
-- date: 2023-07-25 02:01:40
-- id: 2t3hzcme
-- site: aws
-- type: review
-- status: scratch