HTML Audio <audio> element की मदद से web page पर sound और music play करने की सुविधा देता है।
HTML5 से पहले audio के लिए external plugins की जरूरत पड़ती थी, लेकिन अब browser native support देता है।
HTML audio lightweight और easy to use है।
audio Element
<audio> element audio content define करता है।
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
controls attribute play, pause और volume controls दिखाता है।
audio Attributes
controls audio controls दिखाता हैautoplay page load होते ही audio play करता हैloop audio repeat करता हैmuted audio mute करता हैpreload audio loading behavior control करता है
<audio controls loop>
<source src="music.mp3" type="audio/mpeg">
</audio>
autoplay Restrictions
Modern browsers autoplay audio को by default block कर देते हैं।
Autoplay तभी काम करता है जब user interaction हो या audio muted हो।
Multiple Audio Sources
Different browsers के लिए multiple audio formats provide किए जा सकते हैं।
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
</audio>
Browser supported format automatically select करता है।
Supported Audio Formats
MP3
WAV
OGG
MP3 सबसे ज़्यादा widely supported format है।
Audio Controls JavaScript से
JavaScript की मदद से audio control किया जा सकता है।
var audio = document.querySelector("audio");
audio.play();
audio.pause();
preload Attribute
preload attribute browser को बताता है कि audio file कैसे load हो।
<audio preload="metadata" controls>
Values हो सकती हैं: auto, metadata, none
Audio Volume Control
JavaScript से volume control किया जा सकता है।
audio.volume = 0.5;
Value 0.0 से 1.0 के बीच होती है।
Accessibility और Audio
Controls हमेशा enable रखें
Autoplay audio avoid करें
Captions या transcripts provide करें
User को full control दें
HTML Audio Best Practices
Compressed audio files use करें
Multiple formats provide करें
Unnecessary autoplay avoid करें
Preload wisely use करें
HTML Audio Summary
HTML audio element native audio playback देता है
Plugins की जरूरत नहीं होती
Multiple sources browser compatibility improve करते हैं
Accessibility और user experience important हैं