将现场播放音频的声音加载到p5js

Question

我正在使用 p5js，我正在使用 loadSound 函数加载音频并在单击鼠标时播放音频，它工作正常。我想要做的是将它提高一个档次并加载在 p5js 是运行的选项卡中播放的每个音频输出的声音并打印出放大器值。为了更详细地解释一下，例如，假设我在加载我的 p5js 的同一个站点中嵌入了一个 youtube 视频，有没有办法让音频在 youtube 视频中播放并将其插入 p5js 的 loadSound 函数和打印出放大器变量。这不仅适用于 youtube 嵌入，还适用于在同一 window 中播放的每个音频。如果您有任何问题，请发表评论。任何帮助表示赞赏。提前致谢。

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

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>
<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.sound.min.js></script>



<!--get the audio data and load it on p5js-->
<iframe width="1014" height="570" src="https://www.youtube.com/embed/JZjAg6fK-BQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<div id="audioVisCanvas"></div>

Answer 1

对于实际的 YouTube 视频嵌入，您会遇到困难，因为它们通常使用 iframe。但是，如果您能够使用 <video> 和 <audio> 元素来嵌入您的媒体，那么这是可能的：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
</head>

<body>
  <!-- NOTE: crossorigin="anonymous" is important. Otherwse p5.sound won't be abe to access the audio from these elements -->
  <audio src="https://www.paulwheeler.us/files/TADA.WAV" type="audio/mpeg" crossorigin="anonymous" controls>
    </audio>
  <video width="320" height="240" src="https://www.paulwheeler.us/files/School%20of%20Rockets%20Intro.mp4" crossorigin="anonymous" controls>
    </video>
</body>

</html>

将现场播放音频的声音加载到p5js

Load sound of live playing audio onto p5js

javascript

p5.js