useAudioData()

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

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

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

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

info

远程音频文件需要支持 CORS。

更多信息

Remotion 的源通常是 http://localhost:3000，但如果在 Lambda 上渲染或端口繁忙，则可能会有所不同。
您可以在不需要音频支持 CORS 的情况下使用 getAudioDurationInSeconds()。
您可以在渲染过程中禁用 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。

参数​

src​

返回值​

示例​

错误​

参见​

参数

`src`

返回值

示例

错误

参见