Day 20: Sound and Vision

Designing for Multiple Senses

Web design traditionally focuses on visual communication, but sound adds emotional depth impossible through visuals alone. Teenage Engineering's websites demonstrate this mastery - every interaction has sonic character. Small clicks, subtle whooshes, gentle hums. Sound doesn't dominate; it completes. When visual and audio design synchronize, websites become instruments.

Web Audio Fundamentals

The Web Audio API transforms browsers into synthesizers. Create oscillators for pure tones, load samples for realistic sounds, apply filters for character. Start simple - a click sound on buttons, a whoosh on page transitions. Map visual properties to audio parameters: pitch to position, volume to size, timbre to color. These connections make sound feel inevitable rather than added.

Visual-Audio Reactive System:

// Create audio context and analyzer
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();

// Connect microphone input
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const source = audioContext.createMediaStreamSource(stream);
    source.connect(analyser);
    
    // Visualize frequency data
    const frequencyData = new Uint8Array(analyser.frequencyBinCount);
    
    function visualize() {
      analyser.getByteFrequencyData(frequencyData);
      
      // Map frequency to visual elements
      elements.forEach((el, i) => {
        const scale = frequencyData[i] / 255;
        el.style.transform = `scaleY(${scale})`;
        el.style.backgroundColor = `hsl(${scale * 360}, 70%, 50%)`;
      });
      
      requestAnimationFrame(visualize);
    }
    visualize();
  });

Interaction Sonification

Every interaction can have sonic character. Hover states might trigger soft sine waves. Successful actions could play major chord progressions. Errors might use dissonant intervals. The key is subtlety - users should feel the sound more than hear it. Like film scores, the best interface sounds go unnoticed while profoundly affecting emotional experience.

Inclusive Audio Design

Sound design must be optional and accessible. Provide visual alternatives for audio feedback. Include clear audio controls - not everyone wants or can use sound. Consider context - autoplay frustrates, especially in public spaces. Design silence as carefully as sound. When done right, audio enhances without requiring, delights without demanding.