Skip to main content

useAudioData()

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

这个便利函数将 getAudioData() 函数封装成一个 hook,并执行 3 个操作:

  • 保持音频数据的状态
  • 将函数包装在 delayRender() / continueRender() 模式中。
  • 处理组件在获取数据过程中卸载并抛出 React 错误的情况。

使用这个函数,您可以根据音频属性优雅地渲染一个组件,例如与 visualizeAudio() 函数一起使用。

info

远程音频文件需要支持 CORS

更多信息

参数

src

指向音频资产的字符串。

返回值

AudioData | null - 包含音频数据的对象(请参阅 getAudioData() 的文档)或 null(如果数据尚未加载)。

示例

tsx
import { useAudioData } from "@remotion/media-utils";
import { staticFile } from "remotion";
 
export const MyComponent: React.FC = () => {
const audioData = useAudioData(staticFile("music.mp3"));
 
if (!audioData) {
return null;
}
 
return <div>This file has a {audioData.sampleRate} sampleRate.</div>;
};
tsx
import { useAudioData } from "@remotion/media-utils";
import { staticFile } from "remotion";
 
export const MyComponent: React.FC = () => {
const audioData = useAudioData(staticFile("music.mp3"));
 
if (!audioData) {
return null;
}
 
return <div>This file has a {audioData.sampleRate} sampleRate.</div>;
};

错误

如果传入没有音轨的文件,此 hook 将抛出错误(从 v4.0.75 开始)或导致未处理的拒绝(直到 v4.0.74)。

要确定文件是否有音轨,您可以在服务器上使用 getVideoMetadata() 函数来拒绝没有音轨的文件。为此,请检查 audioCodec 字段是否为 null

如果要在组件中捕获错误,您需要通过从本页底部获取源代码来制作自己的内联 hook。

参见