我进入了p5js，我使用loadSound函数加载音频并在鼠标点击时播放音频，它运行良好。我想做的是更上一层楼，加载p5js正在运行的选项卡中播放的每个音频输出的声音，并打印出amp值。为了进一步解释它，例如，假设我在加载p5js的同一个网站中嵌入了一个youtube视频，有没有办法在youtube中播放音频，并将其插入p5js中的loadSound函数中，并打印出amp变量。这不仅适用于youtube嵌入，而且适用于在同一窗口中播放的每个音频。如果您有任何问题，请发表评论。感谢您的帮助。提前谢谢。
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>在实际的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>