Part of the
@remotion/media-utils package of helper functions.
This function takes in
AudioData (preferrably fetched by the
useAudioData() hook) and processes it in a way that makes visualizing the audio that is playing at the current frame easy.
The only argument for this function is an object containing the following values:
number- the time of the track that you want to get the audio information for. The
framealways refers to the position in the audio track - if you have shifted or trimmed the audio in your timeline, the frame returned by
useCurrentFramemust also be tweaked before you pass it into this function.
number- the frame rate of the composition. This helps the function understand the meaning of the
number- must be a power of two, such as
128, etc. This parameter controls the length of the output array. A lower number will simplify the spectrum and is useful if you want to animate elements roughly based on the level of lows, mids and highs. A higher number will give the spectrum in more detail, which is useful for displaying a bar chart or waveform-style visualization of the audio.
number - An array of values describing the amplitude of each frequency range. Each value is between 0 and 1. The array is of length defined by the
The values on the left of the array are low frequencies (for example bass) and as we move towards the right, we go through the mid and high frequencies like drums and vocals.
Usually the values on left side of the array can become much larger than the values on the right. This is not a mistake, but for some visualizations you might have to apply some postprocessing to it, you can flatten the curve by for example mapping each value to a logarithm of the original function.
In this example, we render a bar chart visualizing the audio spectrum of an audio file we imported using