feat: Adding background sound effects. #235
feat: Adding background sound effects. #235prayaslashkari wants to merge 8 commits intosiddharthvaddem:mainfrom
Conversation
Extract WALLPAPERS, GRADIENTS, AUDIO_TRACKS, DEFAULT_BG_MUSIC_VOLUME, and resolveBackgroundMusicUrl into a dedicated constants.ts to eliminate duplication between SettingsPanel and projectPersistence.
Add upbeat-happy-corporate.mp3 as the first bundled background music track.
Add backgroundMusic (track id or data URL) and backgroundMusicVolume fields to ProjectEditorState with validation/normalization in normalizeProjectEditor. Also refactor WALLPAPER_PATHS to derive from the shared WALLPAPERS constant.
- Add Music accordion section with built-in and custom audio track selection - Support uploading custom MP3 files as background music - Show volume slider when a track is active - Refactor inline WALLPAPERS/GRADIENTS arrays to use shared constants
Thread backgroundMusic and backgroundMusicVolume state into persistence, export config, SettingsPanel props, and VideoPlayback props.
- Add bgAudioRef to hold a looping HTMLAudioElement for background music - Sync audio play/pause with the video playback state - Adjust volume reactively via a dedicated effect - Resolve bundled track IDs or data URLs via resolveBackgroundMusicUrl
- audioEncoder: support mixing a background music AudioBuffer with the source audio track using the Web Audio API; handles videos with no source audio - videoExporter: pass backgroundMusicUrl and backgroundMusicVolume through to AudioProcessor; include background music in hasAudio decision for muxer
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
When a video has no source audio track, the background-music-only generation path was writing raw samples at full volume, ignoring the user's volume setting. Scale bgSamples by the gain before encoding.
| import type { ProjectMedia } from "@/lib/recordingSession"; | ||
| import { normalizeProjectMedia } from "@/lib/recordingSession"; | ||
| import { ASPECT_RATIOS, type AspectRatio } from "@/utils/aspectRatioUtils"; | ||
| import { DEFAULT_BG_MUSIC_VOLUME, WALLPAPERS } from "./constants"; |
There was a problem hiding this comment.
I should probably move it to assets/constants.
@siddharthvaddem Wdy think?
There was a problem hiding this comment.
@prayaslashkari could you briefly explain how it works when an audio clip is 10 seconds, and the video is 1 min. or the audio is 1 min and the video is 5 seconds, Is this audio configurable element? or would that just be added to the track from start to end. Idk if I'm making sense?
2 participants
Pull Request Template
Description
Adds background music (sound effects) support to the video editor. Users can select a bundled music track or upload a custom MP3, preview it live during playback, adjust volume, and have it automatically mixed into the final exported video.
What changed
Motivation
Screen recordings typically have no music, making demos and tutorials feel flat. This feature lets creators add background music without leaving the editor. The original audio is preserved and mixed at a user-controlled volume, keeping the workflow non-destructive. The architecture is extensible, i.e., adding a new bundled track is a one-line addition to AUDIO_TRACKS.
Type of Change
Related Issue(s)
Screenshots / Video
Screenshot (if applicable):
Expanded
Collapsed
Volume Slider
Custom Audio
Video (if applicable):
audio-bg-effect.mov
Testing
Checklist
Thank you for contributing!