html5 audio tag <audio>
audio tag html5 की एक नयी tag है | html में किसी sound file को जोड़ने के लिए <audio> tag का इस्तेमाल होता है | sound file जैसे कोई music, या song या कोई अन्य recording को किसी वेबपेज में रखना हो, तो उसे <audio> के मदद से की जा सकती है |
पुराने browsers audio tag को support नहीं करती | नए browsers कुछ audio formats को support करती है और वो है
- mp3
- ogg
- wav
attributes of <audio> tag
- controls
- autoplay
- loop
- muted
- preload
controls atrribute
audio file को html में run होने के लिए controls attribute लगाना जरुरी होता है | इसके बिना audio tag काम नहीं करेगी|
autoplay attribute
html page load होते ही या फिर html page refresh होते ही, उसमे लगी audio file automatic play हो, उसके लिए autoplay attribute लगायी जाती है |
loop attribute
loop attribute से audio file बार बार चलता रहेगा |
muted attribute
इस attribute से audio file mute होकर play होगी | आप sound option पे click करके इसे volume दे सकते हैं |
preload attribute
preload attribute से audio file के icon को control किया जाता है | इस attribute के 3 values होतें हैं वो है 1. auto, 2.metatag, 3.none
1.auto value — इस value से audio file, browser में load होते ही इससे जुड़े icons जैसे की play button और volumn option भी load हो जातें हैं |
2.none value — इस value से audio file, browser में load होते ही इससे जुड़े icons load नहीं होते हैं | audio file जैसे browser में run होगी उसके बाद उसकी सारी extra icons load जायेंगे |
3.metatag value — इसमें पेहले browser, audio file की सारी जानकारी को import करता है फिर उसके बाद audio file को import करता है |
**notepoint : controls, autoplay, loop, muted ये सारे attributes के लिए कोई value नहीं होती | इन attributes को direct, audio tag में लिख कर इसका इस्तेमाल किया जाता है |
<audio> tag Syntax
<audio controls>
<source src="sourcefilepath" type="audiofiletype" />
<audio><source> tag
<source> tag, <audio> tag की child tag है जिसके अंदर audio file की पाथ और वो कोनसे type की file है, वो बताई जाती है |
<audio> tag का उदाहरण
<!doctype html>
<html>
<head>
<title>audio tag example</title>
</head>
<body>
<audio controls>
<source src="D:\HTML5\musicfile.mp3" type="audio/mp3" />
</audio>
</body>
</html>
output
audio tag attributes example
<html>
<head>
<title>audio tag example</title>
</head>
<body>
<h1>Play Audio File</h1>
<audio controls loop muted preload="none">
<source src="D:\HTML5\musicfile.mp3" type="audio/mp3" />
</audio>
</body>
</html>
output
उदाहरण में देखिये audio file के extra icons अभी disable हैं preload=”none” attribute की वजह से| जैसे ही audio play होगा सब icons enable हो जायेंगें |