Skip to main content

visualizeAudioWaveform()

@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 a waveform.

这个功能适合可视化语音。要可视化音乐，请使用 visualizeAudio()

🌐 This function is suitable for visualizing voice. For visualizing music, use visualizeAudio()

Usage
const waveform = visualizeAudioWaveform({
  fps,
  frame,
  audioData,
  numberOfSamples: 16,
  windowInSeconds: 1 / fps,
});

请参见下面的示例。

🌐 See Examples below.

参数​

🌐 Arguments

此函数的唯一参数是一个包含以下值的对象：

🌐 The only argument for this function is 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.

windowInSeconds​

number

以秒为单位的时间（可以是浮点数），表示你希望看到音频波形的持续时间。 示例：你的视频 fps 为 30，如果在 visualizeAudioWaveform 上传入 15 作为 frame，并以 0.25 作为 windowInSeconds，那么输出将包含从 (15/30) - 0.125 = 0.375 秒到 (15/30) + 0.125 = 0.625 秒的音频波形数据。

🌐 Time in seconds (can be float) which represents the duration for which you want to see the audio waveform.
Example: Your video has an fps of 30, and you pass 15 as the frame on visualizeAudioWaveform and 0.25 as windowInSeconds then output will have audio waveform data from (15/30) - .125 = 0.375 sec to (15/30) +0.125 = 0.625 sec.

dataOffsetInSecondsv4.0.268​

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

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

normalize?v4.0.280​

boolean

默认 false。如果设置为 true，则波形数据将被缩放，使最大值为 1。

🌐 Default false. If set to true, then the wave data gets scaled so that the biggest value is 1.

返回值​

🌐 Return value

number[]

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

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

示例​

🌐 Examples

基本示例​

🌐 Basic example

import {createSmoothSvgPath, useAudioData, visualizeAudioWaveform} from '@remotion/media-utils';
import React from 'react';
import {AbsoluteFill, Html5Audio, useCurrentFrame, useVideoConfig, staticFile} from 'remotion';

const height = 300;

const BaseExample: React.FC = () => {
  const frame = useCurrentFrame();
  const audioDataVoice = useAudioData(staticFile('podcast.wav'));
  const {width, fps} = useVideoConfig();

  if (!audioDataVoice) {
    return null;
  }

  const waveform = visualizeAudioWaveform({
    fps,
    frame,
    audioData: audioDataVoice,
    numberOfSamples: 32,
    windowInSeconds: 1 / fps,
  });

  const p = createSmoothSvgPath({
    points: waveform.map((x, i) => {
      return {
        x: (i / (waveform.length - 1)) * width,
        y: (x - 0.5) * height + height / 2,
      };
    }),
  });

  return (
    <div style={{flex: 1}}>
      <Html5Audio src={staticFile('podcast.wav')} />
      <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
        <svg style={{backgroundColor: ' #0B84F3'}} viewBox={`0 0 ${width} ${height}`} width={width} height={height}>
          <path stroke="white" fill="none" strokeWidth={10} d={p as string} />
        </svg>
      </AbsoluteFill>
    </div>
  );
};

滑动效果​

🌐 Sliding effect

通过将 windowInSeconds 增加十倍，听力图开始向右移动：

🌐 By increasing the windowInSeconds by tenfold, the audiogram starts moving to the right:

const waveform = visualizeAudioWaveform({
  fps,
  frame,
  audioData: audioDataVoice,
  numberOfSamples: 32,
  windowInSeconds: 10 / fps,
});

制作海报效果​

🌐 Posterizing

通过只计算每第三帧的波形，我们使波形更加平稳，并产生一种酷炫的效果：

🌐 By only calculating the waveform every third frame, we make the waveform calmer and generate a cool effect:

const waveform = visualizeAudioWaveform({
  fps,
  frame: Math.round(frame / 3) * 3,
  audioData: audioDataVoice,
  numberOfSamples: 32,
  windowInSeconds: 10 / fps,
});

另请参阅​

🌐 See also

Last updated on