Skip to main content

visualizeAudio()

@remotion/media-utils 工具函数包的一部分。

🌐 Part of the @remotion/media-utils package of helper functions.

这个函数接收 AudioData（例如通过 useAudioData() 获取的）并将其处理为用于显示为条形图。

🌐 This function takes in AudioData (for example fetched by useAudioData()) and processes it for displaying as bars.

参数​

🌐 Arguments

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

🌐 Takes an object containing the following values:

audioData​

AudioData

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

🌐 An object containing audio data. You can fetch this object using useAudioData() or getAudioData().

frame​

number

你想要获取音频信息的轨道的时间。frame 始终指音频轨道中的位置——如果你在时间轴中移动或裁剪了音频，那么 useCurrentFrame 返回的帧在传入此函数之前也必须进行调整。

🌐 The time of the track that you want to get the audio information for. The frame always refers to the position in the audio track - if you have shifted or trimmed the audio in your timeline, the frame returned by useCurrentFrame must also be tweaked before you pass it into this function.

fps​

number

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

🌐 The frame rate of the composition. This helps the function understand the meaning of the frame input.

numberOfSamples​

number

必须是二的幂，例如 32、64、128 等。此参数控制输出数组的长度。较小的数值会简化频谱，如果你想根据低音、中音和高音的大致水平来动画显示元素，这会很有用。较大的数值会提供更详细的频谱，这对于显示条形图或波形风格的音频可视化很有帮助。

🌐 Must be a power of two, such as 32, 64, 128, etc. This parameter controls the length of the output array. A lower number will simplify the spectrum and is useful if you want to animate elements roughly based on the level of lows, mids and highs. A higher number will give the spectrum in more detail, which is useful for displaying a bar chart or waveform-style visualization of the audio.

smoothing​

boolean

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

🌐 When set to true the returned values will be an average of the current, previous and next frames. The result is a smoother transition for quickly changing values. Default value is true.

optimizeFor?v4.0.83​

"accuracy" | "speed"

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

🌐 Default "accuracy". When set to "speed", a faster Fast Fourier transform is used. Recommended for Remotion Lambda and when using a high number of samples. Read user experiences here.

dataOffsetInSecondsv4.0.268​

音频偏移的秒数，如果你正在使用 useWindowedAudioData()，请传递此参数。

🌐 The amount of seconds the audio is offset, pass this parameter if you are using useWindowedAudioData().

返回值​

🌐 Return value

number[]

一个描述每个频率范围振幅的值数组。每个值在0到1之间。数组的长度由 numberOfSamples 参数定义。

🌐 An array of values describing the amplitude of each frequency range. Each value is between 0 and 1. The array is of length defined by the numberOfSamples parameter.

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

🌐 The values on the left of the array are low frequencies (for example bass) and as we move towards the right, we go through the mid and high frequencies like drums and vocals.

通常数组左侧的值可能会比右侧的值大得多。这不是错误，但对于某些可视化，你可能需要对其进行一些后处理，例如可以通过将每个值映射为原函数的对数来平滑曲线。

🌐 Usually the values on left side of the array can become much larger than the values on the right. This is not a mistake, but for some visualizations you might have to apply some postprocessing to it, you can flatten the curve by for example mapping each value to a logarithm of the original function.

示例​

🌐 Example

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

🌐 In this example, we render a bar chart visualizing the audio spectrum of an audio file we imported using useAudioData() and visualizeAudio().

import {useAudioData, visualizeAudio} from '@remotion/media-utils';
import {Html5Audio, 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>
      <Html5Audio src={staticFile('music.mp3')} />
      {visualization.map((v) => {
        return <div style={{width: 1000 * v, height: 15, backgroundColor: 'blue'}} />;
      })}
    </div>
  );
};

后处理示例​

🌐 Postprocessing example

音频的对数表示看起来会比线性表示更有吸引力。下面是一个后处理步骤的示例，它看起来比默认的更漂亮。

🌐 A logarithmic representation of the audio will look more appealing than a linear one. Below is an example of a postprocessing step that looks prettier than the default one.

/**
 * This postprocessing step will match the values with what you'd
 * get from WebAudio's `AnalyserNode.getByteFrequencyData()`.
 *
 * MDN: https://web.nodejs.cn/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;
});

另请参阅​

🌐 See also

Last updated on