Audio & Sound - Complete Guide
Audio & Sound - Complete Guide
Learn how to add background music, sound effects, and voiceovers to your animations in Scribe Animator. This guide covers the Audio Library, track management, timeline sync, and audio mixing basics.
Application Layout Overview
┌─────────────────────────────────────────────────────────────────────────────┐
│ HEADER BAR │
│ [File] [Edit] [View] [Export] [Share] [?] │
├────────────┬────────────────────────────────────────────────────────────────┤
│ │ │
│ LEFT │ CANVAS AREA │
│ SIDEBAR │ │
│ │ ┌─────────────────────────────────┐ │
│ ┌────────┐ │ │ │ │
│ │ 📚 │ │ │ Your Animation Canvas │ │
│ │ Assets │ │ │ │ │
│ ├────────┤ │ └─────────────────────────────────┘ │
│ │ 🖼️ │ │ │
│ │ Images │ │ │
│ ├────────┤ │ │
│ │ 🎵 │◄├─── Audio Library Access Point │
│ │ Audio │ │ │
│ ├────────┤ │ │
│ │ 🧩 │ │ │
│ │ Vectors│ │ │
│ └────────┘ │ │
│ │ │
├────────────┴────────────────────────────────────────────────────────────────┤
│ TIMELINE │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │ 🎬 Scene Track │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ ││
│ ├───────────────────────┼─────────────────────────┼────────────────────────┤│
│ │ 🎵 Music Track │████████████████████████████████████│ ││
│ ├───────────────────────┼─────────────────────────────────────┼────────────┤│
│ │ 🔊 SFX Track │ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓ │ ││
│ ├───────────────────────┼────────────────────────────────────────────────┤│
│ │ 🎙️ Voiceover Track │ ████████████████ │ ││
│ └───────────────────────┴────────────────────────────────────────────────┘│
│ [▶️ Play] ════════════════════════════════════════════════ [00:00 / 00:30] │
└─────────────────────────────────────────────────────────────────────────────┘
Audio Feature Access Points:
- Left Sidebar → 🎵 Audio — Open the Audio Library
- Timeline → Audio Tracks — View and edit audio clips
- Timeline → Track Headers — Mute/solo and adjust volume
Quick Start: Adding Audio
Step-by-Step Workflow
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 🎵 │ │ Click │ │ Import audio │
│ Audio icon │ ───► │ [Manage…] │ ───► │ files from │
│ in sidebar │ │ button │ │ your computer│
└──────────────┘ └──────────────┘ └──────────────┘
│
▼
Step 4 Step 5
┌──────────────┐ ┌──────────────┐
│ Select audio │ │ Adjust clip │
│ and click │ ───► │ position on │
│ [Add to │ │ timeline │
│ Timeline] │ │ │
└──────────────┘ └──────────────┘
tip
You can also drag and drop audio files directly onto the timeline to add them instantly!
Audio Library Panel
Access all your project audio from one central location.
Library Launcher
Audio Library Launcher Card:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ ┌──────┐ │
│ │ 🎧 │ Audio Library │
│ │ │ 3 files · 12.5 MB used │
│ └──────┘ [Manage…] │
│ │
│ Manage all project audio from one place. Import, preview, │
│ and clean unused files in the popup. │
└─────────────────────────────────────────────────────────────┘
Audio Library Modal
┌─────────────────────────────────────────────────────────────────────────────┐
│ 🎧 Audio Library [×] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ 🔎 Search audio files... │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Filter: [All Types ▼] Sort: [Date Added ▼] [📤 Import Audio] │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ ☐ │ 🎵 │ background-music.mp3 │ 3:24 │ 4.2 MB │ │
│ │ │ MUS│ Music • Used in 1 clip │ │ │ │
│ ├───┼────┼─────────────────────────────────────────┼──────┼────────┼ │
│ │ ☐ │ 🔊 │ whoosh-sound.wav │ 0:02 │ 156 KB │ │
│ │ │ SFX│ SFX • Used in 3 clips │ │ │ │
│ ├───┼────┼─────────────────────────────────────────┼──────┼────────┼ │
│ │ ☐ │ 🎙️ │ narration-intro.mp3 │ 1:45 │ 2.1 MB │ │
│ │ │ VO │ Voiceover • Not used │ │ │ │
│ └───┴────┴─────────────────────────────────────────┴──────┴────────┘ │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ Preview Player: │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ ▶️ │ ═══════════════●═══════════════════════════ │ 1:23 / 3:24 │ │
│ │ │ background-music.mp3 │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Project Total: 6.5 MB / 50 MB │
│ │
│ [Delete Selected] [Rename] [Add to Timeline] │
└─────────────────────────────────────────────────────────────────────────────┘
Audio Track Types
Organize your audio into different track types for easier mixing.
Track Roles
| Role | Icon | Color | Use Case |
|---|---|---|---|
| Music | 🎵 | Blue | Background music, ambient tracks |
| SFX | 🔊 | Orange | Sound effects, whooshes, clicks |
| Voiceover | 🎙️ | Yellow | Narration, dialogue, speech |
| Generic | 📦 | Purple | Other audio, miscellaneous |
Track Layout on Timeline
Timeline with Audio Tracks:
─────────────────────────────────────────────────
│ 0s 5s 10s 15s 20s
│ ▼ ▼ ▼ ▼ ▼
────────┼───────────────────────────────────────────────
🎵 MUSIC│ ████████████████████████████████████████████
│ background-music.mp3
────────┼───────────────────────────────────────────────
🔊 SFX │ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓
│ whoosh click swoosh
────────┼───────────────────────────────────────────────
🎙️ VO │ ████████████████████
│ intro-narration.mp3
────────┼───────────────────────────────────────────────
Auto-Detection Rules
Scribe Animator automatically assigns track roles based on filename:
| Keywords in Filename | Assigned Role |
|---|---|
vo, voiceover, voice, narration, speech, dialogue | Voiceover |
sfx, sound effect, fx, foley, whoosh, click, beep, hit | SFX |
music, song, bgm, soundtrack | Music |
| (none of the above) | Music (default) |
note
You can manually change the track role anytime from the Audio Library or track header.
Importing Audio
Supported Formats
| Format | Extension | Support Level | Notes |
|---|---|---|---|
| MP3 | .mp3 | ✅ Full | Most compatible, recommended |
| WAV | .wav | ✅ Full | Lossless, larger files |
| OGG | .ogg | ✅ Full | Open format, good quality |
| AAC | .aac, .m4a | ✅ Full | Apple format |
| WebM Audio | .webm | ✅ Full | Modern web format |
| FLAC | .flac | ⚠️ Partial | May need conversion |
Import Methods
Method 1: Audio Library
Audio Library → [📤 Import Audio] → Select Files → Open
Method 2: Drag & Drop to Library
┌─────────────────────────────────────────────────────────────┐
│ │
│ ╔═══════════════════════════════════════╗ │
│ ║ ║ │
│ ║ 📂 Drop audio files here ║ │
│ ║ ║ │
│ ║ or click to browse ║ │
│ ║ ║ │
│ ╚═══════════════════════════════════════╝ │
│ │
└─────────────────────────────────────────────────────────────┘
Method 3: Drag & Drop to Timeline
Drag audio file directly onto timeline → Auto-creates clip at drop position
File Size Limits
| Limit Type | Size | Description |
|---|---|---|
| Soft Limit (per file) | 10 MB | Warning shown, import allowed |
| Hard Limit (per file) | 256 MB | Import blocked |
| Project Total (soft) | 50 MB | Warning when approaching limit |
warning
Large audio files can slow down your project. Consider using compressed MP3 format (128-192 kbps) for background music to keep file sizes manageable.
Audio Clips
Clip Structure
Audio Clip Anatomy:
─────────────────────────────────────────────────
Source Audio (full duration)
┌─────────────────────────────────────────────────────────┐
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
└─────────────────────────────────────────────────────────┘
▲ ▲
│ Trim Start Trim End │
│ │
└──────────────┬───────────────────────────────┘
│
▼
Clip (trimmed portion)
┌─────────────────────────────────┐
│████████████████████████████████│
└─────────────────────────────────┘
│
Timeline ──────┼──────────────────────────────────
│
Offset ───┘ (position on timeline)
Clip Properties
| Property | Description | Range |
|---|---|---|
| Offset | When clip starts on timeline | 0 to project duration |
| Trim Start | How much to cut from beginning | 0 to source duration |
| Trim End | How much to cut from end | 0 to source duration |
| Fade In | Gradual volume increase at start | 0 to clip duration |
| Fade Out | Gradual volume decrease at end | 0 to clip duration |
| Muted | Silence this clip | On/Off |
Creating Clips
Step 1: Select Source Step 2: Add to Timeline
┌────────────────────────┐ ┌────────────────────────┐
│ Audio Library │ │ Timeline │
│ │ │ │
│ ☐ background-music.mp3 │ │ 🎵 ═══════════════════ │
│ ☑ whoosh-sound.wav │ ──► │ 🔊 ████ │
│ ☐ narration.mp3 │ │ 🎙️ ═══════════════════ │
│ │ │ │
│ [Add to Timeline] │ │ Clip added at playhead │
└────────────────────────┘ └────────────────────────┘
Timeline Integration
Playback Sync
Audio clips automatically sync with the global timeline.
Playback Sync Diagram:
─────────────────────────────────────────────────
Global Timeline
├───────────────────────────────────────────────────────────►
│ ▼ Playhead
│ │
│ 0s 5s 10s 15s 20s
│ ┼────────┼─────────┼─────────┼─────────┼
│
├── Scene Layer ─────────────────────────────────────────────
│ [Scene 1 ][Scene 2 ][Scene 3 ]
│
├── Audio Layer ─────────────────────────────────────────────
│ ████████████████████████████████████████████████
│ (Music plays continuously across all scenes)
│
│ ▓▓▓▓ ▓▓▓▓
│ (SFX clips at specific moments)
│
│ ████████████
│ (Voiceover synced to Scene 2)
Track Scope
| Scope | Description | Visibility |
|---|---|---|
| Global | Project-wide track | All scenes |
| Scene | Scene-specific track | Only in assigned scene |
tip
Use Global tracks for background music that spans the entire project. Use Scene tracks for voiceovers or SFX specific to one scene.
Audio Controls
Track Header Controls
Track Header:
─────────────────────────────────────────────────
┌────────────────────────────────────────────────┐
│ 🎵 Music Track │
│ │
│ [🔊] [S] │ ────────●──────── │ +0.0 dB │
│ ▲ ▲ ▲ ▲ │
│ │ │ │ │ │
│ Mute Solo Volume Slider Gain Display │
└────────────────────────────────────────────────┘
Control Functions
| Control | Icon | Function |
|---|---|---|
| Mute | 🔇 / 🔊 | Silence track (toggle) |
| Solo | S | Play only this track |
| Volume | Slider | Adjust track gain (-∞ to +12 dB) |
| Pan | L/R | Stereo positioning (future feature) |
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Space | Play/Pause |
M | Mute selected track |
S | Solo selected track |
Delete | Delete selected clip |
Ctrl/⌘ + D | Duplicate selected clip |
Waveform Display
Audio clips show waveform visualization on the timeline.
Waveform Anatomy
Waveform Display:
─────────────────────────────────────────────────
┌────────────────────────────────────────────────────────────┐
│ ▄ │
│ ▄▄ ▄██▄ ▄▄ │
│ ▄▄ ████ ██████ ████ ▄▄ │
│ ████ ██████ ████████ ██████ ████ │
│ ██████████████████████████████████████▄ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ██████████████████████████████████████▀ │
│ ████ ██████ ████████ ██████ ████ │
│ ▀▀ ████ ██████ ████ ▀▀ │
│ ▀▀ ▀██▀ ▀▀ │
│ ▀ │
├────────────────────────────────────────────────────────────┤
│ whoosh-sound.wav │ 0:02 │ SFX │
└────────────────────────────────────────────────────────────┘
▲
└── Amplitude visualization (louder = taller)
Waveform Colors
| Color | Meaning |
|---|---|
| Blue | Normal audio |
| Yellow | Selected clip |
| Red | Clipping warning (too loud) |
| Gray | Muted clip |
Audio Processing
Import Pipeline
Import Flow:
─────────────────────────────────────────────────
File Input Processing Store
│ │ │
▼ ▼ ▼
┌─────────┐ ┌──────────┐ ┌─────────┐
│ audio │ ──────► │ Validate │ ──────► │ Audio │
│ .mp3 │ │ & Decode │ │ Store │
└─────────┘ └──────────┘ └─────────┘
│
▼
┌──────────────┐
│ Generate │
│ Waveform │
│ Peaks │
└──────────────┘
│
▼
┌──────────────┐
│ Calculate │
│ Duration │
└──────────────┘
Audio Metrics
| Metric | Description | Display |
|---|---|---|
| Duration | Audio length | MM:SS format |
| File Size | Storage size | KB / MB |
| Sample Rate | Audio quality | 44.1 kHz typical |
| Channels | Mono/Stereo | 1 or 2 |
Budget & Performance
Memory Budget
Audio Memory Budget:
─────────────────────────────────────────────────
Total Budget: 256 MB
┌────────────────────────────────────────────────────────────┐
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│ Used: 45 MB (18%) Available: 211 MB │
└────────────────────────────────────────────────────────────┘
Budget Warnings
| Warning Level | Trigger | Action |
|---|---|---|
| Info | 50% used | Informational message |
| Warning | 75% used | Yellow warning banner |
| Error | 90% used | Red alert, consider removing files |
warning
Running low on audio budget can cause playback issues. Delete unused audio files to free up memory.
Performance Tips
- Use compressed formats — MP3 at 128-192 kbps for music
- Trim unused portions — Remove silence and unused sections
- Delete unused sources — Clean up files not used in any clip
- Limit concurrent clips — Avoid too many overlapping audio clips
Filtering & Sorting
Filter Options
| Filter | Description |
|---|---|
| All Types | Show all audio files |
| 🎵 Music | Only music tracks |
| 🔊 SFX | Only sound effects |
| 🎙️ Voiceover | Only voiceover/narration |
| 📦 Other | Generic/unclassified |
Sort Options
| Sort By | Description |
|---|---|
| Name | Alphabetical order |
| Duration | Shortest to longest |
| Size | Smallest to largest |
| Date Added | Newest first (default) |
| Type | Grouped by role |
Managing Audio Files
Rename Audio
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Select file │ │ Click │ │ Type new │
│ in library │ ───► │ [Rename] │ ───► │ name and │
│ │ │ button │ │ press Enter │
└──────────────┘ └──────────────┘ └──────────────┘
Delete Audio
┌─────────────────────────────────────────────────────────────┐
│ ⚠️ Delete Audio Files? │
├─────────────────────────────────────────────────────────────┤
│ │
│ You're about to delete 2 audio files: │
│ │
│ • old-music.mp3 (used in 0 clips) │
│ • test-sound.wav (used in 0 clips) │
│ │
│ This action cannot be undone. │
│ │
│ [Cancel] [Delete] │
└─────────────────────────────────────────────────────────────┘
warning
Deleting audio files that are used in clips will also remove those clips from the timeline. Check the "used in X clips" count before deleting.
Preview Audio
Preview Player:
─────────────────────────────────────────────────
┌─────────────────────────────────────────────────────────────┐
│ │
│ ▶️ │ ════════════════●════════════════════ │ 1:23 / 3:24 │
│ │ ▲ │
│ │ Playhead (draggable) │
│ │ │
│ Currently playing: background-music.mp3 │
│ │
└─────────────────────────────────────────────────────────────┘
Common Workflows
Workflow 1: Add Background Music
Step 1 Step 2 Step 3 Step 4
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click 🎵 │ │ Click │ │ Import your │ │ Select music │
│ Audio in │ ───► │ [Manage…] │ ───► │ music file │ ───► │ and click │
│ sidebar │ │ │ │ (.mp3/.wav) │ │ [Add to │
└──────────────┘ └──────────────┘ └──────────────┘ │ Timeline] │
└──────────────┘
Workflow 2: Add Sound Effect at Specific Time
Step 1 Step 2 Step 3
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Position │ │ Drag SFX │ │ SFX clip │
│ playhead at │ ───► │ file onto │ ───► │ added at │
│ desired time │ │ timeline │ │ playhead │
└──────────────┘ └──────────────┘ └──────────────┘
Workflow 3: Record Voiceover
Step 1 Step 2 Step 3 Step 4
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Click record │ │ Speak your │ │ Click stop │ │ Recording │
│ button in │ ───► │ narration │ ───► │ when done │ ───► │ added to │
│ audio panel │ │ into mic │ │ │ │ library │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
Troubleshooting
Audio Not Playing
| Issue | Cause | Solution |
|---|---|---|
| No sound | Browser muted | Check browser/system volume |
| No sound | Track muted | Click unmute (🔇) on track header |
| No sound | Clip muted | Check clip mute status |
| Choppy audio | Performance issue | Close other applications |
Import Errors
| Error | Cause | Solution |
|---|---|---|
| "File too large" | Exceeds 256 MB limit | Compress or trim audio file |
| "Invalid format" | Unsupported codec | Convert to MP3 or WAV |
| "Decode failed" | Corrupted file | Try re-exporting from source |
Sync Issues
| Issue | Cause | Solution |
|---|---|---|
| Audio drifts | Variable frame rate | Export at constant frame rate |
| Audio ahead/behind | Offset incorrect | Adjust clip offset property |
| Gaps in audio | Trim settings wrong | Check trim start/end values |
Best Practices
Audio Quality
- Use appropriate bitrate — 128-192 kbps for background music
- Match sample rates — 44.1 kHz or 48 kHz consistently
- Normalize levels — Keep peak levels around -6 dB
- Add headroom — Don't let audio clip (hit 0 dB)
Organization
- Name files clearly — Use descriptive names like
intro-whoosh.wav - Use track roles — Assign Music/SFX/VO for easy filtering
- Clean unused files — Regularly delete unused audio sources
- Keep backups — Export project to preserve audio references
Performance
- Limit track count — 3-5 audio tracks is typical
- Avoid long files — Split long audio into segments
- Use fades — Smooth transitions reduce artifacts
- Preview before export — Check sync before final render
tip
Pro tip: Add a short fade-in (0.1-0.3s) to all clips to avoid click/pop sounds at the start of playback.
Summary
| Feature | Location | Purpose |
|---|---|---|
| Audio Library | Left Sidebar → 🎵 Audio | Import and manage audio files |
| Track Types | Timeline | Music, SFX, Voiceover, Generic |
| Clip Editing | Timeline | Trim, fade, position audio |
| Preview Player | Audio Library Modal | Listen before adding |
| Budget Monitor | Audio Library Modal | Track memory usage |
The Audio system in Scribe Animator provides everything you need to add professional sound to your whiteboard animations — from background music to precise sound effects and voiceovers.
Related Documentation:
- Typography Text Guide — For adding and styling text
- Images & Vectors Guide — For visual assets
- Background & Canvas Settings — For canvas configuration