HTML Audio
HTML provides a straightforward way to embed audio in web pages using the
<audio> element. Here’s how to use it effectively:
Syntax:
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
<audio>
Attributes
- controls: Displays playback controls (play, pause, volume).
- autoplay: Starts playing the audio automatically.
- loop: Repeats the audio playback.
- muted: Starts the audio muted.
- preload: Indicates how the audio should be loaded
ii. metadata: Load only metadata (e.g., duration).
iii. auto: Load the entire audio file.
Audio Formats
1. MP3 (.mp3)
- Widely used for music and audio streaming.
- Good compression with acceptable quality.
2. WAV (.wav)
- Uncompressed audio format.
- High quality but larger file sizes.
3. AAC (.aac)
- Advanced Audio Codec; commonly used in streaming.
- Better quality than MP3 at similar bit rates.
4. OGG (.ogg)
- Open format that supports multiple codecs.
- Good for streaming and offers good quality.
5. FLAC (.flac)
- Free Lossless Audio Codec; lossless compression.
- Maintains original audio quality.
6. ALAC (.m4a)
- Apple Lossless Audio Codec; similar to FLAC.
- Used primarily in Apple devices.
7. AIFF (.aiff)
- Audio Interchange File Format; uncompressed.
- High quality, often used in professional audio.
8. MIDI (.midi)
- Musical Instrument Digital Interface; not audio but data for music production.
- Windows Media Audio; proprietary format with good compression.
- Less commonly used outside Windows environments.
Example:
<audio controls preload="auto">
<source src="example-audio.mp3" type="audio/mpeg">
<source src="example-audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Output:
More topic in HTML