Skip to main content

visualizeAudio()

@remotion/media-utils 包中的辅助函数之一。

此函数接收 AudioData（最好是通过 useAudioData() 钩子获取）并以一种使得在当前帧播放的音频可视化变得容易的方式进行处理。

参数​

接收一个包含以下值的对象：

audioData​

AudioData

包含音频数据的对象。您可以使用 useAudioData() 或 getAudioData() 来获取此对象。

frame​

number

您想要获取音频信息的轨道时间。frame 总是指音频轨道中的位置 - 如果您在时间轴中移动或修剪了音频，则在将其传递到此函数之前，useCurrentFrame 返回的帧也必须进行调整。

fps​

number

合成的帧速率。这有助于函数理解 frame 输入的含义。

numberOfSamples​

number

必须是二的幂，例如 32、64、128 等。此参数控制输出数组的长度。较低的数字将简化频谱，并且在您希望基本上基于低音、中音和高音的级别对元素进行动画处理时很有用。较高的数字将提供更详细的频谱，这对于显示柱状图或波形样式的音频可视化很有用。

smoothing​

boolean

当设置为 true 时，返回的值将是当前、前一个和下一个帧的平均值。结果是对快速变化值进行更平滑的过渡。默认值为 true。

optimizeFor?v4.0.83​

"accuracy" | "speed"

默认为 "accuracy"。当设置为 "speed" 时，将使用更快的快速傅里叶变换。推荐用于 Remotion Lambda 和使用大量样本时。阅读用户 体验 此处。

返回值​

number[]

描述每个频率范围幅度的值数组。每个值介于0和1之间。数组的长度由numberOfSamples参数定义。

数组左侧的值是低频（例如低音），随着向右移动，我们经过中频和高频，如鼓声和人声。

通常，数组左侧的值可能比右侧的值大得多。这不是错误，但对于某些可视化，您可能需要对其进行一些后处理，例如将每个值映射到原始函数的对数。

示例​

在此示例中，我们使用useAudioData()和visualizeAudio()导入的音频文件渲染了一个条形图，可视化音频频谱。

tsx
import { useAudioData, visualizeAudio } from "@remotion/media-utils";
import { Audio, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
 
export const MyComponent: React.FC = () => {
  const frame = useCurrentFrame();
  const { width, height, fps } = useVideoConfig();
  const audioData = useAudioData(staticFile("music.mp3"));
 
  if (!audioData) {
    return null;
  }
 
  const visualization = visualizeAudio({
    fps,
    frame,
    audioData,
    numberOfSamples: 16,
  }); // [0.22, 0.1, 0.01, 0.01, 0.01, 0.02, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
 
  // Render a bar chart for each frequency, the higher the amplitude,
  // the longer the bar
  return (
    <div>
      <Audio src={staticFile("music.mp3")} />
      {visualization.map((v) => {
        return (
          <div
            style={{ width: 1000 * v, height: 15, backgroundColor: "blue" }}
          />
        );
      })}
    </div>
  );
};
tsx
import { useAudioData, visualizeAudio } from "@remotion/media-utils";
import { Audio, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
 
export const MyComponent: React.FC = () => {
  const frame = useCurrentFrame();
  const { width, height, fps } = useVideoConfig();
  const audioData = useAudioData(staticFile("music.mp3"));
 
  if (!audioData) {
    return null;
  }
 
  const visualization = visualizeAudio({
    fps,
    frame,
    audioData,
    numberOfSamples: 16,
  }); // [0.22, 0.1, 0.01, 0.01, 0.01, 0.02, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
 
  // Render a bar chart for each frequency, the higher the amplitude,
  // the longer the bar
  return (
    <div>
      <Audio src={staticFile("music.mp3")} />
      {visualization.map((v) => {
        return (
          <div
            style={{ width: 1000 * v, height: 15, backgroundColor: "blue" }}
          />
        );
      })}
    </div>
  );
};

后处理示例​

音频的对数表示看起来比线性表示更吸引人。以下是一个比默认值更漂亮的后处理步骤示例。

tsx
/**
 * This postprocessing step will match the values with what you'd
 * get from WebAudio's `AnalyserNode.getByteFrequencyData()`.
 *
 * MDN: https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData
 * W3C Spec: https://www.w3.org/TR/webaudio/#AnalyserNode-methods
 */
 
// get the frequency data
const frequencyData = visualizeAudio(params);
 
// default scaling factors from the W3C spec for getByteFrequencyData
const minDb = -100;
const maxDb = -30;
 
const amplitudes = frequencyData.map((value) => {
  // convert to decibels (will be in the range `-Infinity` to `0`)
  const db = 20 * Math.log10(value);
 
  // scale to fit between min and max
  const scaled = (db - minDb) / (maxDb - minDb);
 
  return scaled;
});
tsx
/**
 * This postprocessing step will match the values with what you'd
 * get from WebAudio's `AnalyserNode.getByteFrequencyData()`.
 *
 * MDN: https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData
 * W3C Spec: https://www.w3.org/TR/webaudio/#AnalyserNode-methods
 */
 
// get the frequency data
const frequencyData = visualizeAudio(params);
 
// default scaling factors from the W3C spec for getByteFrequencyData
const minDb = -100;
const maxDb = -30;
 
const amplitudes = frequencyData.map((value) => {
  // convert to decibels (will be in the range `-Infinity` to `0`)
  const db = 20 * Math.log10(value);
 
  // scale to fit between min and max
  const scaled = (db - minDb) / (maxDb - minDb);
 
  return scaled;
});

参见​