Load sound of live playing audio onto p5js

Question

I was getting into p5js and I was using the loadSound function to load an audio and play the audio on mouse click and it works fine. What I wanted to do was take it up a notch and load sound of every audio output playing in the tab that p5js is running and print out the amp values. To explain it a bit more for example let's say I have embedded a youtube video in the same site I have loaded my p5js, is there a way to get the audio playing in the youtube video and insert it in the loadSound function of the p5js and print out the amp variables. Not this is not only for a youtube embed but also every audio its playing in the same window. Comment if you have any questions. Any help is appreciated. Thanks in advance.

var song;
var fft;

function preload() {
  song = loadSound('') // load the sound here inorder to be processed with p5js
}

var elem = document.getElementById("audioVisCanvas");
var width = window.getComputedStyle(elem, null).getPropertyValue("width");
var height = window.getComputedStyle(elem, null).getPropertyValue("height");
newWidth = width.replace('px', '');
newHeight = height.replace('px', '');

console.log(newWidth, newHeight)

function setup() {
  var cnv = createCanvas(newWidth, newHeight);
  cnv.parent("audioVisCanvas");
  fft = new p5.FFT()

  noLoop()
}

function draw() {
  background(0);
  stroke(255)
  strokeWeight(3)
  noFill()

  fft.analyze()
  amp = fft.getEnergy(20, 200)

  console.log(amp) //console.log the amp variables of the audio that is       playing ("in this case the youtube embeded video")
}

//start the youtube embed here
function mouseClicked() {
  if (song.isPlaying()) {
    song.pause()
    noLoop()
  } else {
    song.play()
    loop()
  }
}

#audioVisCanvas {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

user_229247 · Answer

In the case of actual YouTube video embeds you are going to have difficulty because those generally use an iframe. However if you are able to use and elements to embed your media then this is possible:

let canvas;
let fft;

function setup() {
  canvas = createCanvas(windowWidth, windowHeight);
  // Make our canvas an overlay
  canvas.position(0, 0);
  // Pass mouse input throught to the elements below
  canvas.style('pointer-events', 'none');

  fft = new p5.FFT();

  let context = getAudioContext();
  // wire all media elements up to the p5.sound AudioContext
  for (let elem of selectAll('audio').concat(selectAll('video'))) {
    let mediaSource = context.createMediaElementSource(elem.elt);
    mediaSource.connect(p5.soundOut);
  }
}

function draw() {
  clear();
  background(100, 50);
  if (fft) {
    drawSpectrumGraph(0, 0, width, height);
  }
}

// Graphing code adapted from https://jankozeluh.g6.cz/index.html by Jan Koželuh
function drawSpectrumGraph(left, top, w, h) {
  let spectrum = fft.analyze();

  stroke('limegreen');
  fill('darkgreen');
  strokeWeight(1);

  beginShape();
  vertex(left, top + h);

  for (let i = 0; i < spectrum.length; i++) {
    vertex(
      left + map(log(i), 0, log(spectrum.length), 0, w),
      top + map(spectrum[i], 0, 255, h, 0)
    );
  }

  vertex(left + w, top + h);
  endShape(CLOSE);
}

html,
body {
    margin: 0;
    padding: 0;
}

Load sound of live playing audio onto p5js

1 Answers