Skip to main content

Audio Layers & Sound Integration

Add sound to your themes! Background music, sound effects, and audio cues can transform a visual theme into a complete sensory experience. HyperTheme's audio system makes it easy to integrate sound without complicated setup.

What Are Audio Layers?​

Audio layers are:

  • Sound files attached to your theme
  • Background music that loops
  • Sound effects triggered by events
  • Invisible on canvas (audio has no visual component)
  • Controlled via Properties panel

Supported formats:

  • MP3 (most common)
  • WAV (higher quality, larger files)
  • OGG (good compression, web-friendly)
  • M4A/AAC (depends on browser support)

Why Add Audio?​

Enhances Theme Experience​

Background music:

  • Sets mood and atmosphere
  • Creates emotional connection
  • Makes themes feel "alive"
  • Professional polish

Sound effects:

  • Feedback for interactions
  • Attention grabbers
  • Thematic consistency
  • Memorable moments

When Audio Works Best​

✅ Menu themes - Background ambience while browsing ✅ Intro sequences - Dramatic reveals ✅ System themes - Console-specific music/sounds ✅ Retro themes - Authentic chiptune audio ✅ Branded themes - Theme songs or jingles

When to Skip Audio​

❌ Every theme - Not all themes need sound ❌ Short loops - Repetitive audio gets annoying ❌ Loud/jarring sounds - Respect user's environment ❌ Large files - Keep file sizes reasonable ❌ Copyright concerns - Use licensed/original audio only

Adding Audio Layers​

Step-by-Step​

  1. Upload audio file to Library

    • File → Upload (Ctrl+U)
    • Select your audio file
    • Wait for upload to complete
    • Appears in Library with audio icon

  2. Add audio layer to theme

    • Drag audio from Library to canvas
    • Or use Add Audio button (if available)
    • Audio layer appears in Layers panel
    • No visual representation on canvas

  3. Configure audio settings

    • Select audio layer in Layers panel
    • Properties panel shows audio controls
    • Adjust volume, loop, playback settings

  4. Test audio

    • Press Spacebar to preview theme
    • Audio plays along with animations
    • Adjust as needed

Audio Layer Properties​

Playback Controls​

In the Properties panel (right side):

Volume:

  • Range: 0-100%
  • 100% = Full volume
  • 50% = Half volume
  • 0% = Muted (but still loaded)
  • Adjust to balance with other sounds

Loop:

  • Enabled: Audio repeats indefinitely
  • Disabled: Plays once and stops
  • Most background music should loop
  • Sound effects usually don't loop

Muted:

  • Checkbox to mute audio
  • Useful for testing without audio
  • Doesn't remove audio, just silences it
  • Quick way to disable temporarily

Auto-play:

  • Start playing automatically
  • Or wait for trigger/event
  • Most theme audio auto-plays
  • Interactive sounds may not

Playback Rate:

  • Speed multiplier
  • 1.0 = Normal speed
  • 0.5 = Half speed (slower, deeper)
  • 2.0 = Double speed (faster, higher pitch)
  • Range: 0.1 to 3.0 typically
  • Creative effects possible!

Transform Properties​

Even though audio is invisible, it has transform properties:

Position (X, Y):

  • Doesn't affect sound
  • Exists for layer organization
  • Shows in Layers panel

Opacity:

  • Actually controls volume in some implementations
  • Or has no effect (audio is invisible anyway)
  • Use Volume control instead

Audio Workflows​

Background Music Theme​

Goal: Continuous music while browsing theme

Setup:

  1. Upload music track (MP3, 2-3 minutes)
  2. Add as audio layer
  3. Configure:
    • Volume: 60-80% (not overwhelming)
    • Loop: Enabled
    • Auto-play: Enabled
    • Playback Rate: 1.0 (normal)

Pro tip: Fade in/out at loop points for seamless playback

Sound Effect Layer​

Goal: Short sound plays once

Setup:

  1. Upload sound effect (WAV or MP3, < 5 seconds)
  2. Add as audio layer
  3. Configure:
    • Volume: 80-100%
    • Loop: Disabled
    • Auto-play: Based on trigger
    • Playback Rate: 1.0

Use cases:

  • Intro "whoosh" sound
  • Selection confirmation
  • Theme reveal sound
  • Transition effect

Multiple Audio Layers​

You can have multiple audio layers!

Example: Music + Effects

  • Layer 1: Background music (looping, 60% volume)
  • Layer 2: Intro sound effect (once, 100% volume)
  • Layer 3: Ambient sound (looping, 30% volume)

Layer order doesn't matter for audio (all play simultaneously)

Mixing tips:

  • Keep total volume under 100% combined
  • Lower background music when effects play
  • Don't overwhelm with too many sounds
  • Test on actual speakers, not just headphones

Audio Best Practices​

File Size Optimization​

Keep audio files small:

  • MP3 at 128kbps is usually sufficient
  • Higher bitrates = larger files = longer load times
  • 2-3 minutes max for background music
  • Sound effects under 1MB each

Compression tips:

  • Use MP3 for music
  • Use OGG for web optimization
  • WAV only if quality critical (large files!)
  • Avoid lossless formats (FLAC, etc.)

Target sizes:

  • Background music: 2-5MB
  • Sound effects: 50-500KB
  • Total audio per theme: < 10MB recommended

Loop Points​

For seamless looping music:

  • Trim silence from start/end
  • Ensure loop point matches musically
  • Test loop in audio editor first
  • Fade in/out at loop boundaries

Tools for loop editing:

  • Audacity (free)
  • Adobe Audition (professional)
  • Online audio editors
  • Most DAWs (Digital Audio Workstations)

Volume Balancing​

Goldilocks principle:

  • Too loud: Jarring, unprofessional
  • Too quiet: Pointless, barely audible
  • Just right: Audible but not overwhelming

Test at multiple volumes:

  • Low speaker volume (nighttime)
  • High speaker volume (party mode)
  • Headphones (more sensitive to loud sounds)
  • Different devices (PC, TV, etc.)

General guidelines:

  • Background music: 40-70% volume
  • Sound effects: 70-90% volume
  • Ambient sounds: 20-40% volume

Use only:

  • Royalty-free music
  • Your own compositions
  • Licensed tracks (with permission)
  • Creative Commons (check attribution requirements)
  • Public domain recordings

Avoid:

  • Copyrighted commercial music
  • Video game soundtracks (usually copyrighted)
  • Movie/TV themes
  • Popular songs

Resources for free/legal audio:

  • Incompetech (Kevin MacLeod)
  • FreeSound.org
  • YouTube Audio Library
  • Epidemic Sound (subscription)
  • AudioJungle (paid)
  • Purple Planet
  • Bensound

Advanced Audio Techniques​

Dynamic Audio (Concept)​

While HyperTheme doesn't have built-in audio animation, you can simulate dynamic audio:

Fade in effect:

  • Start with volume at 0%
  • Manually adjust or via animation (if supported)
  • Gradually increase to target volume
  • Creates smooth entrance

Sync with visuals:

  • Time audio cues to match animations
  • Whoosh at 2 seconds = animation at 2 seconds
  • Creates cohesive experience
  • Requires careful planning

Audio Layer Naming​

Be descriptive:

✅ Good:
- BGM_Cyberpunk_Loop
- SFX_Intro_Whoosh
- Ambient_Rain_Subtle

❌ Bad:
- Audio 1
- sound
- track

Benefits:

  • Know what each layer does
  • Easy to find specific audio
  • Professional organization

Multiple Versions​

Consider creating variants:

  • Music_Full (main version)
  • Music_Lite (lower quality, smaller file)
  • Music_Short (shorter loop)

Use based on:

  • User's connection speed
  • Theme complexity
  • Target platform

Audio Layer Management​

Finding Audio Layers​

In Layers panel:

  • Audio layers listed like visual layers
  • Usually has audio icon indicator
  • Name shows audio file name
  • Select to see properties

Tips:

  • Group audio layers together
  • Name clearly
  • Keep at bottom of layer list (organizational preference)

Deleting Audio​

Remove audio layer:

  1. Select audio layer in Layers panel
  2. Press Delete key
  3. Or click X button
  4. Audio removed from theme

Audio file stays in Library - only removed from this theme

Replacing Audio​

Change audio file:

  1. Select audio layer
  2. Choose different audio from Library
  3. OR upload new audio and replace
  4. Settings remain the same

Keeps your volume/loop settings - just swaps the audio file

Troubleshooting Audio​

"I can't hear any sound"​

Check these:

  1. Computer volume - Is it muted?
  2. Browser audio - Tab muted?
  3. Layer muted - Check Muted checkbox in Properties
  4. Volume at 0% - Increase volume slider
  5. Auto-play enabled - Must be on to play automatically
  6. Audio file format - Browser might not support format

Test:

  • Play audio in separate player first
  • Confirm file works outside HyperTheme
  • Try different audio format if needed

"Audio is stuttering/glitching"​

Causes:

  • File too large
  • Poor compression
  • Browser performance issues
  • Too many audio layers

Solutions:

  • Compress audio file more
  • Reduce bitrate (128kbps)
  • Remove some audio layers
  • Test on different browser

"Audio doesn't loop smoothly"​

Causes:

  • Silence at start/end of file
  • Loop point doesn't match musically
  • Clicking/popping at loop boundary

Solutions:

  • Edit audio in Audacity
  • Trim silence
  • Add crossfade at loop point
  • Use pre-looped audio files

"Audio plays in HyperTheme but not in published theme"​

Check:

  • Audio file uploaded to project
  • Audio layer not accidentally hidden
  • Export settings include audio
  • Browser supports audio format
  • No conflicting audio settings

Audio Performance​

Impact on Theme​

Audio affects:

  • Initial load time (larger files = longer wait)
  • Memory usage (multiple audio = more RAM)
  • Browser performance (decoding audio)

Minimal impact if:

  • Reasonable file sizes (< 10MB total)
  • Compressed properly (MP3 128kbps)
  • Not excessive layers (< 5 audio tracks)

Optimization Checklist​

✅ Compress audio files (MP3 128kbps) ✅ Keep individual files under 5MB ✅ Total audio under 10MB per theme ✅ Remove unused audio from Library ✅ Test on target hardware ✅ Consider audio-free version for low-end devices

Audio Layer Examples​

Retro Arcade Theme​

Layers:
- BGM_ChiptuneLoop.mp3 (3MB, loop enabled, 60% volume)
- SFX_CoinInsert.wav (100KB, loop disabled, 90% volume)
- SFX_GameStart.wav (150KB, loop disabled, 85% volume)

Total audio: ~3.25MB

Cinematic Theme​

Layers:
- BGM_EpicOrchestra.mp3 (5MB, loop enabled, 50% volume)
- SFX_WhooshIntro.mp3 (200KB, loop disabled, 100% volume)
- Ambient_WindSubtle.mp3 (2MB, loop enabled, 25% volume)

Total audio: ~7.2MB

Minimal Theme​

Layers:
- BGM_AmbientMinimal.mp3 (2.5MB, loop enabled, 55% volume)

Total audio: 2.5MB
(Sometimes less is more!)

Testing Audio​

Preview in HyperTheme​

During development:

  1. Press Spacebar to play theme
  2. Audio plays along with animations
  3. Adjust volume while previewing
  4. Test loop points

Listen for:

  • Volume balance
  • Loop smoothness
  • Timing with visuals
  • Overall mix quality

Preview on Target Device​

Important testing:

  • Preview on actual HyperSpin setup
  • Test with real speakers/TV
  • Check at various volumes
  • Test in actual usage scenario

Different from development:

  • Speakers ≠ headphones
  • TV ≠ monitor
  • Room acoustics matter
  • User's volume preferences vary

Audio Resources​

Where to Find Audio​

Free music:

  • Incompetech.com (requires attribution)
  • FreePD.com (public domain)
  • ccMixter.org (Creative Commons)
  • YouTube Audio Library

Free sound effects:

  • FreeSound.org
  • Zapsplat.com
  • SoundBible.com
  • 99Sounds.org

Paid (higher quality):

  • AudioJungle
  • Epidemic Sound
  • Artlist
  • Soundstripe

Audio Editing Tools​

Free:

  • Audacity (Windows/Mac/Linux)
  • Ocenaudio (simpler than Audacity)
  • WavePad (free version available)

Online:

  • TwistedWave
  • AudioMass
  • Sodaphonic

Professional:

  • Adobe Audition
  • Logic Pro
  • FL Studio
  • Ableton Live

Next Steps​

Pro Tip: When in doubt, go quieter. Background music should enhance your theme, not dominate it. Users can always turn their volume up, but they can't fix audio that's too loud in the theme itself! 🔊