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。

参见​