Audio visualizationUsing the audio visualization APIs in Remotion 2.0, you can create animations based on the frequency of the audio. This is often used to make graphics react to the volume or sound spectrum of the music.Import audio​You can import an audio file using an import statement:tsimport audio from "./audio.mp3";Copytsimport audio from "./audio.mp3";Copyaudio will resolve to a string pointing to an audio file. You may also skip importing and use an https:// URL to load audio from a remote location, if the audio is allowed to be loaded by the domains CORS policy.Render audio visualization​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.tsximport { Audio, useCurrentFrame, useVideoConfig } from "remotion";import { useAudioData, visualizeAudio } from "@remotion/media-utils";import music from "./music.mp3"; export const MyComponent: React.FC = () => { const frame = useCurrentFrame(); const { width, height, fps } = useVideoConfig(); const audioData = useAudioData(music);  if (!audioData) { return null; }  const visualization = 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 bar return ( <div> <Audio src={music} /> {visualization.map((v) => { return ( <div style={{ width: 1000 * v, height: 15, backgroundColor: "blue" }} /> ); })} </div> );};Copytsximport { Audio, useCurrentFrame, useVideoConfig } from "remotion";import { useAudioData, visualizeAudio } from "@remotion/media-utils";import music from "./music.mp3"; export const MyComponent: React.FC = () => { const frame = useCurrentFrame(); const { width, height, fps } = useVideoConfig(); const audioData = useAudioData(music);  if (!audioData) { return null; }  const visualization = 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 bar return ( <div> <Audio src={music} /> {visualization.map((v) => { return ( <div style={{ width: 1000 * v, height: 15, backgroundColor: "blue" }} /> ); })} </div> );};Copy

Remotion is a suite of libraries building a foundation for creating videos programmatically using React. Why create videos in React? Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc. Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

Editly is a tool and framework for declarative NLE (non-linear video editing) using Node.js and ffmpeg. Editly allows you to easily and programmatically create a video from a set of clips, images, audio and titles, with smooth transitions and music overlaid. Editly has a simple CLI for quickly assembling a video from a set of clips or images, or you can use its more flexible JavaScript API. Inspired by ffmpeg-concat, editly is much faster and doesn't require much storage because it uses streaming editing. Editly aims to be very extensible and feature rich with a pluggable interface for adding new dynamic content. This GIF / YouTube was created with this command: "editly commonFeatures.json5". See more examples here. Features Edit videos with code! 🤓 Declarative API with fun defaults Create colorful videos with random colors generated from aesthetically pleasing palettes and random effects Supports any input size, e.g. 4K video and DSLR photos Can output to any dimensions and aspect ratio, e.g. Instagram post (1:1), Instagram story (9:16), YouTube (16:9), or any other dimensions you like. Content is scaled and letterboxed automatically, even if the input aspect ratio is not the same and the framerate will be converted. Speed up / slow down videos automatically to match the cutFrom/cutTo segment length with each clip's duration Overlay text and subtitles on videos, images or backgrounds Accepts custom HTML5 Canvas / Fabric.js JavaScript code for custom screens or dynamic overlays Render custom GL shaders (for example from shadertoy) Can output GIF Overlay transparent images or even videos with alpha channel Show different sub-clips for parts of a clips duration (B-roll) Picture-in-picture Vignette Preserve/mix multiple audio sources Automatic audio crossfading Automatic audio ducking and normalization Use cases Create a slideshow from a set of pictures with text overlay Create a fast-paced trailer or promo video Create a tutorial video with help text Create news stories Create an animated GIF Resize video to any size or framerate and with automatic letterboxing/cropping (e.g. if you need to upload a video somewhere but the site complains Video must be 1337x1000 30fps) Create a podcast with multiple mixed tracks