javascript - 将现场播放音频的声音加载到 p5js
问题描述
我正在进入 p5js,我正在使用 loadSound 函数加载音频并在鼠标单击时播放音频,它工作正常。我想要做的是提高一个档次并加载在 p5js 正在运行的选项卡中播放的每个音频输出的声音并打印出放大器值。为了更详细地解释它,例如假设我在加载 p5js 的同一个站点中嵌入了一个 youtube 视频,有没有办法让音频在 youtube 视频中播放并将其插入 p5js 的 loadSound 函数和打印出放大器变量。这不仅适用于 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>
推荐阅读
- java - 如何使用 Google Maps API 在 android studio 中基于大型数据集生成多边形
- javascript - 从 Chrome 扩展程序中的特定域访问 Chrome 本地存储
- c# - 上传去混淆和符号文件
- google-apps-script - 尝试使用 withFailureHandler 针对电子表格上的字段验证侧边栏上的输入
- python - Keras 模型的 YellowbrickTypeError:此估计器不是分类器;尝试使用回归或聚类分数可视化工具
- javascript - 每次触发上述元素动画时,如何保持 HTML/CSS 元素固定而不是抖动/调整?
- selenium-chromedriver - WebDriverException:消息:未知错误:Chrome 无法启动:崩溃。- RobotFramework- Pycharm
- kubernetes - 无法在 Openshift 中按名称解析服务
- r - 如何在r中的新列中对具有字符值的列进行分组
- java - 我无法在 requestparams 中设置一个条件来比较和获取实体类的输出