Sound with p5.js

CREATING VISUALS WITH SOUND USING p5.Sound.js

STEP 1 | What is p5.Sound.js?

p5.Sound.js is a sound library of p5.js. If you had downloaded the "p5.js complete" zip file, this library should have been included in your download. If so, we need to include this file in the folder with the rest of our javascript libraries and include it as our script tag in our <head>.

        <script language="javascript" src="libraries/p5.dom.js"></script>

If you don't have the p5.js library files downloaded, you can also go with the CDN option.

        <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.js"></script>

Please remember that the reference page is also a great resource to look at when you are trying to figure things out with the p5.sound.js library.

STEP 2 | Loading a Sound File

      var soundTrack;

      var soundPlaying = false;

      function preload() {
          soundTrack = loadSound('https://js6450.github.io/p5-sketch/assets/bg.mp3');
      }

      function setup() {
        createCanvas(windowWidth, 240);
      }

      function draw() {
        background(0, 30);

        if (soundPlaying) {
          fill(255);
          ellipse(frameCount % width, height / 2, 100, 100);
        }
      }

      function mousePressed() {
        if (soundTrack.isPlaying()) {
          soundTrack.pause();
          soundPlaying = false;
        } else {
          soundTrack.play();
          soundPlaying = true;
        }
      }

STEP 3 | Matching Type with Sound

      var numC = 13;
      var numD = 6;
      var numG = 7;

      var A = 65;

      var numSound = 0;
      var pressedKey = "";

      var sounds = [];

      function preload() {
        for (var i = 0; i < numC; i++) {
          sounds.push(loadSound('https://js6450.github.io/p5-sketch/assets/c' + i + ".mp3"));
        }

        for (var i = 0; i < numD; i++) {
          sounds.push(loadSound('https://js6450.github.io/p5-sketch/assets/d' + i + ".mp3"));
        }

        for (var i = 0; i < numG; i++) {
          sounds.push(loadSound('https://js6450.github.io/p5-sketch/assets/g' + i + ".wav"));
        }
      }

      function setup() {
        createCanvas(windowWidth, 240);
        colorMode(HSB);
        noStroke();
      }

      function draw() {
        background(255, 30);

        textSize(32);
        text(pressedKey, 50, 50, width - 100, height - 100);
        
      }

      function keyPressed() {
        pressedKey += key;
        numSound = key.charCodeAt(0) - A;
        console.log(numSound);

        //catch other keys being pressed;
        if (numSound >= 0 && numSound <= 26) {
          sounds[numSound].play();
        }
      }

STEP 4 | Matching Visual with Sound

      var numC = 13;
      var numD = 6;
      var numG = 7;

      var A = 65;

      var numSound = -1;
      var pressedKey = "";

      var sounds = [];

      var shapes = [];

      function preload() {
        for (var i = 0; i < numC; i++) {
          sounds.push(loadSound('https://js6450.github.io/p5-sketch/assets/c' + i + ".mp3"));
        }

        for (var i = 0; i < numD; i++) {
          sounds.push(loadSound('https://js6450.github.io/p5-sketch/assets/d' + i + ".mp3"));
        }

        for (var i = 0; i < numG; i++) {
          sounds.push(loadSound('https://js6450.github.io/p5-sketch/assets/g' + i + ".wav"));
        }

        for (var i = 0; i < 26; i++) {
          shapes.push(new Shape(i));
        }
      }

      function setup() {
        createCanvas(windowWidth, 240);
        colorMode(HSB);
        rectMode(CENTER);
        noStroke();
      }

      function draw() {
        background(255);

        if (numSound >= 0 && numSound <= shapes.length) {
          shapes[numSound].display();
        }
      }

      function keyPressed() {
        pressedKey += key;
        numSound = key.charCodeAt(0) - A;
        console.log(numSound);

        if (numSound >= 0 && numSound <= shapes.length) {
          shapes[numSound].playSound();
        }
      }

      function Shape(i) {
        this.size = random(100, 250);
        this.h = random(360);
        this.id = i;
        this.x = 0;

        this.display = function() {
          this.x = map(sounds[this.id].currentTime(), 0, sounds[this.id].duration(), 0, width);
          fill(this.h, 360, 360);

          if (this.id % 2 == 0) {
            this.displayCircle();
          } else {
            this.displaySquare();
          }
        }

        this.displayCircle = function() {
          ellipse(this.x, height / 2, this.size, this.size);
        }

        this.displaySquare = function() {
          rect(width - this.x, height / 2, this.size, this.size);
        }

        this.playSound = function() {
          sounds[this.id].play();
        }

      }