音频可视化
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";constmusic =staticFile ("music.mp3");export constMyComponent :React .FC = () => {constframe =useCurrentFrame ();const {width ,height ,fps } =useVideoConfig ();constaudioData =useAudioData (music );if (!audioData ) {return null;}constvisualization =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 barreturn (<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";constmusic =staticFile ("music.mp3");export constMyComponent :React .FC = () => {constframe =useCurrentFrame ();const {width ,height ,fps } =useVideoConfig ();constaudioData =useAudioData (music );if (!audioData ) {return null;}constvisualization =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 barreturn (<div ><Audio src ={music } />{visualization .map ((v ) => {return (<div style ={{width : 1000 *v ,height : 15,backgroundColor : "blue" }}/>);})}</div >);};