Web Design and Multimedia INTECH 2100

Web Design and Multimedia (INTECH 2100)

• Course title: Web Design and Multimedia
• Course code: INTECH 2100

Types of Multimedia: Sound/Audio

• Multimedia applications often use speech, music, and sound effects, which are audio/sound elements.
• Audio can be analog or digital.
• Analog audio refers to the original sound signal.
• Digital audio is stored in digital form by computers and is used in multimedia applications.

Uses of Sound/Audio

• Sound enhances website design and social media platforms.
• It's a multimedia element that uses dialogue, narration, music, and sound effects.
• Used in moderation, it can grab attention, deliver info, and reinforce comprehension.

Types of Sound/Audio

• Short sound tracks capture users' attention for short periods.
• Background sounds (music or ambient sound), create a pleasant atmosphere around maps and improve perception.
• Sound effects make selected elements stand out; they could be applause, cheering, taking off a plane, waves, or crowd noise.

Digital Audio

• Digital audio data represents sound in samples.
• Samples show the amplitude (volume) of sound at specific points in time.
• Recording quality depends on the sampling rate (number of samples per second).

Digital Audio

• Three standard sampling frequencies used in multimedia are CD-quality, 44.1 kHz, 22.05 kHz, and 11.025 kHz.
• The number of bits used to measure the amplitude of a sound wave in a sample is the sample size.

Digital Audio (cont.)

• Digital audio is device-independent.
• Sample values are rounded to the nearest integer to be more concise (quantization).
• Clipping and quantization must be considered when dealing with digital audio.

Digitization

• Sound is converted from analog to digital format in three steps:
• Sampling: Measures amplitude at equal time intervals. Sampling rate is the number of times it is measured per second.
• Quantization: Represents amplitude values as integers. Sample size/bit depth/resolution defines how many different amplitudes can be stored for each sample.
• Encoding: Converts integer values to binary numbers (0s and 1s) for digital representation.

Pulse Code Modulation (PCM)

• PCM converts analog data (e.g., voice, music, video, etc.) to binary code in a consistent and independent way from its complexity.
• This is the standard form for digital audio in computing systems.

Basic Sound Editing Operations

• Trimming: Removes dead air or silence from recordings.
• Splicing and Assembly: Combines short recordings or removes unnecessary parts.
• Volume Adjustments: Ensures consistent volume levels in recordings.
• Format Conversion: Converts audio formats like MP3 or WAV.
• Resampling/Downsampling: Changes the sampling rate to adjust file size.
• Fade in/Fade out: Softens the beginning and end of sound clips.
• Equalization: Modifies the audio frequencies for different tones.
• Time Stretching: Alters the duration of recordings.
• Digital Sound Processing: Adds effects like reverberation, delay, chorus, and flange.
• Reversing Sound: Plays a recording in the reverse order.
• Multiple Tracks: Combines audio clips into a single final mix.

Audio Quality

• Audio Codecs: Programs for compressing and decompressing audio data for transmission.
• Speed measured in kbps (kilobits per second) or bitrate refers to the number of bits of processed sound per second.
• Lower bitrate means smaller file sizes, but more sound data is lost.
• Audio codecs are important when considering sample rate and bit depth:
• Sample rate: How many samples are taken every second.
• Bit depth: Number of bits per sample. The higher the bit depth, the greater dynamic range (and potential loudness)

Audio File Formats (Lossy)

• MP3: Most common, good compression, small size, compatible across devices.
• AAC: Compressed, better than MP3 at same bitrate, and good for streaming.
• Ogg Vorbis: Open-source, streaming-friendly but some compression loss.

Audio File Formats (Lossless)

• FLAC: Free, open-source, lossless compression.
• ALAC: Apple's lossless codec, but only works on Apple devices.
• Monkey's Audio (APE): Slightly better compression than FLAC or WAVPACK but requires more processing.
• WavPack (.wav): Free, open-source codec that has lossless and hybrid compression options to give better quality of audio, plus additional "correction" file allowing overall restoration of the original audio.

Audio File Formats (Uncompressed)

• WAV (Waveform Audio File): Ideal format for engineers, retains all original data, and commonly uses 24-bit or 32-bit audio.
• AIFF (Audio Interchange File Format): Similar to WAV in retaining original audio but not time codes, making it less useful for editing.
• DSD (Direct Stream Digital): Very high-resolution format, large file sizes, suited for high-end audio systems.

Audio in Web Design - Significance and Technical Aspects

• Significance: Audio can increase user engagement, improve the user experience, enhance accessibility, and reinforce brand identity.
• Technical aspects: How audio is embedded on websites, using the HTML

Web Audio Tools and Libraries

• Libraries: Howler.js (simplifies audio across devices/browsers), Tone.js (interactive music/audio apps), SoundManager 2 (cross-browser audio).
• Editing Software: Audacity (free, open-source), Adobe Audition (professional tool).

Audio SEO and Performance

• Audio File Naming & Metadata: Descriptive file names improve search engine optimization for audio files.
• Audio File Compression: Compress audio for better loading times.
• Lazy Loading: Load files only when the file is needed

Ensuring Audio Quality

• Appropriate file formats: Select files compatible across devices, considering sound quality and file sizes.
• Optimization: Balancing file size and quality. Consider adjusting sampling rates and bit rates as needed.
• Editing tools: Use tools like Audacity or Adobe Audition to optimize, edit, normalize, or fix issues with audio files.

Best Practices for Audio on Websites

• Sparing: Only use audio when it directly aids the user experience, avoiding excessive sounds.
• User Control: Provide users with ways to control playback.
• Optimal Load Speed: Compression is important for website loading.
• Accessibility: Include transcripts or captions in cases of spoken content for improved accessibility.

Accessibility Considerations

• WCAG compliance: Make the audio accessible using Web Content Accessibility Guidelines.
• Text alternatives: Provide text alternatives or captions to aid people with hearing impairments.
• Avoid autoplay: Avoid automatically playing audio as it can be distracting or problematic.

Summary

• Audio enhances user experience by adding depth, improving accessibility, and reinforcing brand identity.
• Audio quality depends on good compression and technical know-how to understand file types and methods of embedding audio files.