Skip to main content

音频可视化

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

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

使用visualizeAudio() API,您可以获取当前帧的音频频谱,numberOfSamples参数是一个选项,用于控制您需要的详细程度。

请参阅上述函数的文档以了解更多信息。

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

另请参阅