Audio visualization
Remotion has APIs for visualizing audio, for example for creating audiograms or music visualizers.
The @remotion/media-utils
package provides helper functions for reading and processing audio. Using the getAudioData()
API you can read audio, and using the useAudioData()
helper hook you can load this audio data directly into your component.
Using the visualizeAudio()
API, you can get an audio spectrum for the current frame, with the numberOfSamples
parameter being an option to control the amount of detail you need.
Refer to the documentation of the above mentioned functions to learn more.
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 >);};