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 constMyComponent :React .FC = () => {constaudioData =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 constMyComponent :React .FC = () => {constaudioData =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。