将实时播放音频的声音加载到p5js

xghobddn 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(457)

我进入了p5js，我使用loadsound函数来加载音频并在鼠标点击时播放音频，效果很好。我想做的是把它提高一个档次，加载p5js正在运行的选项卡中播放的每个音频输出的声音，并打印出安培值。举例来说，我在加载我的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>

JavaScript p5.js

来源：https://stackoverflow.com/questions/68310022/load-sound-of-live-playing-audio-onto-p5js

1条答案

按热度按时间

i2byvkas1#

在实际嵌入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>

赞(0）回复(0）举报 2021-09-23

我来回答

将实时播放音频的声音加载到p5js

1条答案

相关问题

热门标签

最新问答