जब हम web page ready करते हैं तो need के according हमें Audio files की भी जरूरत पढ़ती है , HTML में audio / music को use करने के लिए <audio> tag का use किया जाता है।


अभी HTML तीन तरह audio files को support करता है।

  1. mp3
  2. wav
  3. ogg

HTML Audio Example

Audio files का path देने के लिए इसमें हमें <source> tag का use करने पड़ता है।

<audio controls>  
  <source src="https://learnhindituts.com/storage/sparrows-chirping.mp3" type="audio/mp3">  
  browser does not support audio tag.  
</audio>  

Output :

तो कुछ इस तरह से web pages पर audio / music files को use करते हैं। हालाँकि <audio> tag के कई useful attributes भी होते हैं music file को और अच्छे  control किया जा सके।

HTML audio Atributes

Attribute Name Uses
controls

controls attribute का use play / pause action button के लिए किया जाता है , जैसा कि आप ऊपर दिए गए example में देख सकते हैं।

autoplay

इस attribute का use करके हम music file को automatically play करने के लिए करते हैं , हमें play button press नहीं करनी पड़ती है। जैसे ही audio file ready होती है यह automatically play हो जाती है।

loop

यह बताता है कि audio file complete होते ही फिर से start हो जायगी।

muted

यह audio output को mute करने के लिए use होता है।

HTML audio attribute Example

<audio controls autoplay loop>  
  <source src="https://learnhindituts.com/storage/sparrows-chirping.mp3" type="audio/mp3">  
  browser does not support audio tag.  
</audio>  

Output :

अब चूँकि example में autoplay & loop attribute का use किया गया है , इसलिए जैसे ही web page load होगा ये audio automatically play हो जायगी और complete होते ही restart होगी।


I Hope , अब आप HTML में audio को कैसे use करते हैं ये समझ ही गए होंगे।

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers