audio - 如何使用处理创建半透明的音频 react 覆盖？

Question

我已经广泛研究了这个问题，但我找不到任何有用的答案。基本上，我想创建一个半透明(或半透明)的音频 react 叠加层，它可以转置到通用视频文件上。这个想法是让视频呈现出与音轨一起跳动的感觉。

我想我可以用 Processing 和 minim 库来实现这个效果，但我不知道如何制定草图。输出应为 1920x1080，脉动叠加应产生充满活力的光度感(例如，亮度为 30-50% 且不透明度可能为 25-50% 的浅色)。

我正在使用@george-profenza 提供的草图更新这个挑战(修改为使用视频而不是凸轮输入):

import processing.video.*;

Movie movie;
PGraphics overlay;

import ddf.minim.*;

Minim minim;
AudioInput in;

void setup(){
  size(320,240);

  movie = new Movie(this, "input.mp4");
  movie.play();

  // setup sound
  minim = new Minim(this);
  in = minim.getLineIn();

  // setup overlay
  overlay = createGraphics(width,height);
  // initial draw attributes
  overlay.beginDraw();
  overlay.strokeWeight(3);
  overlay.rectMode(CENTER);
  overlay.noFill();
  overlay.stroke(255,255,255,32);
  overlay.endDraw();
}

void draw(){

  //update overlay based on audio data
  overlay.beginDraw();
  overlay.background(0,0);
  for(int i = 0; i < in.bufferSize() - 1; i++)
  {
    overlay.line( i, 50 + in.left.get(i)*50, i+1, 50 + in.left.get(i+1)*50 );
    overlay.line( i, 150 + in.right.get(i)*50, i+1, 150 + in.right.get(i+1)*50 );
  }
  overlay.endDraw();
  //render video then overlay composite
  image(movie,0,0);
  image(overlay,0,0);
}
// update movie
void movieEvent(Movie m){
  m.read();
}

大概这个草图有效，但不幸的是，底层 processing.video (GStreamer 1+) 库似乎在 Ubuntu 上出现故障(根据 GitHub 上的 issue #90，似乎没有办法使用社区提供的分支之一来更新库。

如果有人可以提出解决此问题的方法或有其他解决方案，我将不胜感激。

Answer 1

这是一个广泛的问题。我将介绍几个方面:

半透明(音频 react )覆盖:查看 PGraphics .就像处理中的层。您可以在 PGraphics 中绘制(使用半透明等)，然后按照您想要的顺序进行渲染。请参阅下面的评论示例

音频 react :您可以使用 minim 使用响度、FFT 数据或其他一些可以进行更高级音频分析的软件，您可以从中导出数据以供处理读取。

1920x1080 输出 :根据我的个人经验，在撰写本文时，我惊讶地看到在 Processing 中播放的 1080p 视频还可以，但不是 super 清晰(我偶尔会体验到惊人的效果，在具有 16GB RAM 的 macbook 和PC 也有 16GB RAM)。在顶部进行声音分析和叠加图形可能会进一步降低性能，主要问题是音频和合成图形之间的同步，即您希望实时执行此操作。

如果您只是想输出具有漂亮的生成音频响应图形但不需要实时的视频，我建议采用更“离线”的方法:

预先分析音频数据，因此只有您需要驱动视觉效果(可以像响度一样简单)

以低分辨率制作具有实时音频且无视频的视觉原型(prototype)，以查看外观/感觉是否良好

以 1080p 逐帧渲染视频 + 视觉效果(具有声音映射属性)，然后与音频同步渲染(可以使用 After Effects、ffmpeg 等)

作为引用，这里有一个非常基本的概念证明草图，它演示了:

使用叠加图形

将覆盖图形更新为音频响应(最小 MonitorInput 示例)

合成视频 + 叠加

注意低分辨率视频大小。

import processing.video.*;

Capture cam;
PGraphics overlay;

import ddf.minim.*;

Minim minim;
AudioInput in;


void setup(){
  size(320,240);

  // setup video (may be video instead of webcam in your case)
  cam = new Capture(this,width,height);
  cam.start();

  // setup sound
  minim = new Minim(this);
  in = minim.getLineIn();

  // setup overlay
  overlay = createGraphics(width,height);
  // initial draw attributes
  overlay.beginDraw();
  overlay.strokeWeight(3);
  overlay.rectMode(CENTER);
  overlay.noFill();
  overlay.stroke(255,255,255,32);
  overlay.endDraw();
}

void draw(){

  //update overlay based on audio data
  overlay.beginDraw();
  overlay.background(0,0);
  for(int i = 0; i < in.bufferSize() - 1; i++)
  {
    overlay.line( i, 50 + in.left.get(i)*50, i+1, 50 + in.left.get(i+1)*50 );
    overlay.line( i, 150 + in.right.get(i)*50, i+1, 150 + in.right.get(i+1)*50 );
  }
  overlay.endDraw();
  //render video then overlay composite
  image(cam,0,0);
  image(overlay,0,0);
}
// update video (may be movieEvent(Movie m) for you
void captureEvent(Capture c){
  c.read();
}