Module 11: Sound & Audio — Design & Code Foundations

01

Audio Fundamentals

Understanding how digital audio works helps you make informed decisions about quality, file size, and format selection.

Samples per second (Hz)

Sample Rate Explained

Sample rate is how many times per second audio is captured. 44.1kHz (CD quality) samples 44,100 times per second. Higher = better quality but larger files.

Key point: 44.1kHz is standard for web audio

8-bit (256 levels)

16-bit (65,536 levels)

Bit Depth Explained

Bit depth determines dynamic range - the difference between quietest and loudest sounds. 16-bit is standard. 24-bit for professional production.

Key point: 16-bit is sufficient for web delivery

64

kbps - Low

128

kbps - Medium

320

kbps - High

Bit Rate & Compression

Bit rate is how much data per second in compressed audio. Higher bit rate = better quality but larger files. 128kbps is often acceptable for web.

Key point: 128-192kbps balances quality and file size

Mono (1 channel)

Half the file size

Stereo (2 channels)

Spatial sound

Mono vs Stereo

Mono has one channel, stereo has two (left/right). UI sounds are often mono. Music and ambient audio use stereo. Mono files are half the size.

Key point: Use mono for UI sounds to reduce file size

02

Audio Formats

Different formats have different browser support, compression efficiency, and use cases. Choose based on your needs.

.mp3

Universal support, good compression

ChromeFirefoxSafariEdge

MP3 Format

MP3 is universally supported and well-compressed. It's the safe choice for maximum compatibility. Lossy compression means some quality loss.

Key point: Best for compatibility - works everywhere

.aac / .m4a

Better quality than MP3 at same size

ChromeSafariEdgeFirefox*

AAC Format

AAC provides better quality than MP3 at the same bit rate. Native to Apple devices. Firefox support requires system codecs.

Key point: Better compression than MP3, good support

.ogg

Open source, excellent quality

ChromeFirefoxEdgeSafari

OGG Vorbis Format

OGG Vorbis is open source with excellent compression. No Safari support means you need a fallback format.

Key point: Great quality but needs MP3 fallback for Safari

.opus

Best compression, modern browsers

ChromeFirefoxEdgeSafari 15+

Opus Format

Opus offers the best compression efficiency. Excellent for voice and music. Safari added support in version 15. The modern choice.

Key point: Best quality-to-size ratio available

03

Audio on the Web

Web audio comes with unique constraints around autoplay, performance, and user expectations.

BLOCKED BY DEFAULT

Browsers block autoplay audio unless:

User has interacted with the page
Site has high media engagement score
Audio is muted (video autoplay)

Autoplay Restrictions

Browsers block autoplay to prevent annoying experiences. Audio requires user interaction first. This is a feature, not a bug.

Key point: Never fight autoplay restrictions

preload="auto"

Downloads entire file - wastes bandwidth

preload="metadata"

Downloads duration/size info only

preload="none"

No preloading - best for performance

Preload Strategies

Preloading audio wastes bandwidth if users never play it. Use 'none' or 'metadata' unless audio will definitely be used.

Key point: Default to preload='none' for performance

+

Click

✓

Success

!

Error

i

Notification

Interface Sounds

UI sounds provide feedback for actions. Keep them short (<500ms), subtle, and always optional. Slack, Discord, and iOS use them effectively.

Key point: UI sounds should be short, subtle, and optional

▶

🔊

Audio Controls

Always provide visible controls: play/pause, progress, volume, and mute. Users must be able to stop audio immediately.

Key point: Never hide audio controls from users

04

Audio Performance

Audio files impact page load time. Optimize aggressively while maintaining acceptable quality.

30 seconds of audio:

WAV: 5.3 MB

MP3 320: 1.2 MB

MP3 128: 480 KB

Opus 96: 360 KB

Size Comparison

Compression dramatically reduces file size. For UI sounds and notifications, aggressive compression is usually fine.

Key point: Opus at 96kbps is often indistinguishable from MP3 320

// Don't load until needed
const audio = new Audio();
audio.src = 'sound.mp3';
// Load on first interaction
button.onclick = () => audio.play();

Lazy Loading Audio

Don't preload audio that might not be used. Create Audio objects but don't set src until needed, or use preload='none'.

Key point: Lazy loading saves bandwidth for users who never play audio

0sclicksuccesserrornotify2s

One file, multiple sounds. Seek to play each.

Audio Sprites

Combine multiple short sounds into one file. Reduces HTTP requests. Use JavaScript to seek to the right position and play segments.

Key point: Audio sprites reduce requests and improve caching

Source

→

Gain

→

Filter

→

Output

Audio graph for advanced control

Web Audio API

Web Audio API provides programmatic control: mixing, effects, spatial audio. More complex but powerful for games and interactive experiences.

Key point: Use Web Audio API for games and complex audio needs

05

Audio Accessibility

Not everyone can hear audio. Ensure your content works without sound and provide alternatives.

▶

Podcast Episode

Transcript

Full text of audio content available for reading...

Provide Transcripts

Transcripts make audio content accessible to deaf users, non-native speakers, and anyone who can't play audio. They're also great for SEO.

Key point: Transcripts benefit more users than you'd expect

This is what captions look like.

CCSettings

Captions for Video

Videos with audio need captions. Auto-generated captions are a start but should be reviewed for accuracy. Provide multiple languages when possible.

Key point: 80% of video is watched without sound on social media

Sound Only

*beep*

User might miss this

Sound + Visual

Error: Invalid email

Clear to all users

Visual Alternatives

Never rely on sound alone for important feedback. Pair every audio cue with a visual indicator. Screen shake, color change, toast notifications.

Key point: Sound should enhance, not replace, visual feedback

Keyboard: Space = play, M = mute

Accessible Controls

Audio controls must be keyboard accessible. Provide global mute option. Remember user preferences. Never trap focus in audio players.

Key point: Respect user's sound preferences

09

Physical vs Digital Audio

Audio in physical media vs web has fundamental differences in delivery, quality, and user control.

Delivery

Print

Physical media

CD, vinyl - fixed quality, physical object

Web

Streaming

Adaptive bitrate, downloads on demand

Quality Control

Print

1411

kbps (CD)

Producer controls final quality

Web

64-320

kbps (varies)

User's connection affects quality

User Control

Print

▶ ⏸ ⏹

Physical buttons

Hardware controls, always accessible

Web

🔇 ❌

Tab mute, close tab

Software controls, browser restrictions

10

The Science of Sound

Understanding how we perceive sound helps design better audio experiences.

Human hearing: 20Hz - 20kHz

Auditory Perception

Humans hear frequencies from 20Hz to 20kHz, with peak sensitivity around 2-4kHz (speech range). Hearing degrades with age, especially high frequencies.

Key point: Design for the full hearing spectrum

Background noise

ALERT!

Background noise

Sudden sounds grab attention

Auditory Attention

Sound is processed pre-attentively - we notice sounds before consciously focusing. This is why notification sounds work, but also why they can be intrusive.

Key point: Sound bypasses conscious attention

♪

Major = Happy

♪

Minor = Sad

♪

Dissonant = Tense

Emotional Response

Music and sound trigger emotional responses. Major keys feel happy, minor keys sad, dissonance creates tension. Use this intentionally in UI sounds.

Key point: Choose sounds that match the emotional context

Intel: bong bong bong BONG

Netflix: ta-dum

iPhone: marimba

You can hear these in your head

Audio Memory

Audio branding creates strong memory associations. Consistent sounds become part of brand identity. The Intel bong, Netflix ta-dum, iPhone marimba are instantly recognizable.

Key point: Consistent audio builds brand recognition

11

Real-World Audio

How successful products use audio effectively and respectfully.

knock brush

Distinctive notification sounds

Principles Identified:

Distinctive Unique sounds you won't confuse with other apps

Customizable Users can change or disable all sounds

Contextual Different sounds for DMs, mentions, and channels

Key insight: Slack's sounds are recognizable but not annoying. Users can customize everything.

🎉

Correct!

ta-da sound + animation

Principles Identified:

Rewarding Positive sounds reinforce correct answers

Paired Every sound has a matching visual

Proportional Bigger achievements get bigger sounds

Key insight: Duolingo uses sound as positive reinforcement. Learning feels like a game.

System Sound

Subtle "pop" for notifications

Principles Identified:

Subtle System sounds are quiet and unobtrusive

Consistent Same sounds across all apps

Controllable Global volume, per-app settings, Do Not Disturb

Key insight: Apple's system sounds are so well-designed they became cultural references.

12

Audio Failures

Common mistakes that make web audio frustrating instead of helpful.

Failure: Autoplay Assault

🔊 MUSIC PLAYING ON PAGE LOAD

User frantically searching for mute button

Fix: Wait for user interaction

🔇 Click to enable sound

User chooses when to hear audio

Rule: Never autoplay audio. Browsers block it anyway. Design for silence by default.

Failure: Hidden Controls

Music playing...

Mute button is... somewhere?

Fix: Make controls visible and accessible

Music playing

Rule: Audio controls must be immediately visible. Users should never hunt for the mute button.

Failure: Sound Without Visual

*error sound plays*

No visual indication of error

Fix: Pair audio with visual feedback

⚠️ Error: Invalid input

Sound + visual feedback

Rule: Never rely on sound alone. Pair every audio cue with a visual indicator.

Failure: Infinite Loop

🔔 🔔 🔔 🔔 🔔

Notification repeating until acknowledged

Fix: Limit repetition

🔔 (once)

Visual indicator remains, sound plays once

Rule: Notification sounds should play once. Use visual persistence, not audio repetition.

13

Audio Tests

Quick checks to ensure your audio implementation is solid.

01

Silence Test

Tests: Core Functionality

Mute your device and use the entire site. Does everything work? Can you complete all tasks? Any confusion?

🔇

Site must work without sound

02

Surprise Test

Tests: Autoplay Prevention

Open the site in a new tab with speakers on. Does any unexpected audio play? Test all entry points.

Open → No sound

Scroll → No sound

Click → Sound (if intentional)

03

Control Test

Tests: User Control

Can users mute all audio with one click? Do preferences persist? Can keyboard users control audio?

Press M

04

Size Test

Tests: Performance

What's the total size of audio files loaded? On slow 3G, how long until audio is playable? Is lazy loading implemented?

<100KB

Total audio budget for typical sites

14

Audio Implementation

HTML and JavaScript patterns for implementing web audio correctly.

HTML Audio via CSS

controls - Shows native browser controls
preload="none" - Prevents automatic download
Multiple sources - Browser picks first supported format
Fallback - Download link for old browsers

Tip: Always provide multiple formats with Opus first, MP3 as fallback.

// Create audio on demand
const sounds = {
  click: null,
  success: null
};

function playSound(name) {
  if (!sounds[name]) {
    sounds[name] = new Audio(`/sounds/${name}.mp3`);
  }
  sounds[name].currentTime = 0;
  sounds[name].play().catch(() => {});
}

// Use after user interaction
button.onclick = () => playSound('click');

JavaScript Audio via CSS

Lazy creation - Audio objects created on first use
Reuse objects - Don't create new Audio for each play
Reset time - currentTime = 0 allows rapid replay
Catch errors - Handle autoplay rejection gracefully

Tip: Create Audio objects lazily and reuse them for better performance.

// Respect user preferences
const soundEnabled = () => {
  return localStorage.getItem('sound') !== 'off';
};

function toggleSound() {
  const current = soundEnabled();
  localStorage.setItem('sound', current ? 'off' : 'on');
  updateUI();
}

function playSound(name) {
  if (!soundEnabled()) return;
  // ... play sound
}

Sound Preferences via CSS

localStorage - Persist user preference
Check before play - Respect mute setting
Default to on - But make toggle obvious
Update UI - Show current state clearly

Tip: Always remember and respect user's sound preferences.


  
    Episode 42: Web Audio Best Practices
  
  
  
    View Transcript
    ...

Accessible Audio via CSS

Descriptive label - Screen readers announce content
Transcript - Full text alternative
- Collapsible without JavaScript
Semantic HTML - figure/figcaption for context

Tip: Every audio element needs a text alternative - label at minimum, transcript ideally.

15

Self-Assessment

Test your understanding of web audio principles.

Q1

Why do browsers block autoplay audio?

Click to reveal

Q2

What preload value should you use for optional audio?

Click to reveal

Q3

Why pair audio cues with visual feedback?

Click to reveal

Q4

What's the benefit of using Opus format?

Click to reveal

Q5

How should notification sounds behave?

Click to reveal

Sound & Audio

Core Concepts

Audio Fundamentals

Audio Formats

Audio on the Web

Audio Performance

Audio Accessibility

Print vs Web

Physical vs Digital Audio

Science & Psychology

The Science of Sound

Real-World Examples

Real-World Audio

Common Failures

Audio Failures

Visual Tests

Audio Tests

Silence Test

Surprise Test

Control Test

Size Test

CSS Implementation

Audio Implementation

Self-Assessment

Self-Assessment

Key Takeaways