WikiGalaxy
WikiGalaxy💙Blue💛🌹
Personalize
HTML Audio
he HTML
<audio> element is an essential tool for embedding and controlling audio playback on web pages.
It supports various file formats, playback controls, and custom configurations, enhancing user interactivity and engagement.
Subtopics and Key Aspects
- Embedding Audio in HTML
- Attributes of the
<audio>Element - Customizing Audio Playback
- Audio Formats and Compatibility
-
- Advanced Techniques with JavaScript
Embedding Audio in HTML
The
<audio> tag provides a way to include audio files in a web page. It supports multiple sources for compatibility across browsers.
<!DOCTYPE html>
<html>
<head>
<title>Embedding Audio Example</title>
</head>
<body>
<h1>Simple Audio Example</h1>
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
<audio> Element
controls:
autoplay:
loop:
Repeats the audio file when playback ends
<audio controls autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
<source src="background-music.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Customizing Audio Playback
CSS and JavaScript can be used to customize audio elements further for advanced designs or interactive controls.
<audio id="custom-audio" controls>
<source src="custom-audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
const audioElement = document.getElementById('custom-audio');
audioElement.volume = 0.5; // Set initial volume to 50%
audioElement.playbackRate = 1.25; // Speed up playback by 25%
</script>
Emerald on Dark Emerald
Embedded Audio:
Displays a media player with play, pause, and volume controls.
Enhanced Playback:
Autoplay and looping create continuous audio playback.
Custom Settings:
JavaScript modifies volume and playback speed.
