Skip to main content

音频可视化

Remotion 有用于可视化音频的 API，例如用于创建音频图或音乐可视化器。

🌐 Remotion has APIs for visualizing audio, for example for creating audiograms or music visualizers.

@remotion/media-utils 包提供了用于读取和处理音频的辅助函数。使用 getAudioData() API，你可以读取音频，使用 useAudioData() 辅助钩子，你可以将这些音频数据直接加载到你的组件中。

🌐 The @remotion/media-utils package provides helper functions for reading and processing audio. Using the getAudioData() API you can read audio, and using the useAudioData() helper hook you can load this audio data directly into your component.

柱状图可视化​

🌐 Bar visualization

使用 visualizeAudio() API，你可以获取当前帧的音频频谱。

🌐 Using the visualizeAudio() API, you can get an audio spectrum for the current frame.

柱状图可用于可视化音乐。

🌐 Bar visualizations are ideal for visualizing music.

import {useAudioData, visualizeAudio} from '@remotion/media-utils';
import {Html5Audio, staticFile, useCurrentFrame, useVideoConfig} from 'remotion';

const music = staticFile('music.mp3');

export const MyComponent: React.FC = () => {
  const frame = useCurrentFrame();
  const {width, height, fps} = useVideoConfig();
  const audioData = useAudioData(music);

  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={music} />
      {visualization.map((v) => {
        return <div style={{width: 1000 * v, height: 15, backgroundColor: 'blue'}} />;
      })}
    </div>
  );
};

波形可视化​

🌐 Waveform visualization

在此查看使用 visualizeAudioWaveform() 的波形可视化示例。

🌐 See an example for a waveform visualizations using visualizeAudioWaveform() here.

处理大型文件​

🌐 Working with large files

useAudioData() 将整个音频文件加载到内存中。这对于小文件来说没问题，但对于大文件，它可能会很慢并且消耗大量内存。

使用useWindowedAudioData()只加载当前帧周围的一部分音频。
权衡是这个 API 仅适用于 .wav 文件。

🌐 Use useWindowedAudioData() to only load a portion of the audio around the current frame. The tradeoff is that this API only works with .wav files.

另请参阅​

🌐 See also

Last updated on