Techoceanhub logo

Implementing Audio tag in HTML.

The audio tag is one of the important tags as it is used to implement sound or audio in the document as well as, in any project.

The <audio> tag contains one or more different audio sources. The browser may support in the first come first serve way or you can play both together.

The text between the opening and closing audio tag will only be displayed when the browser is unable to display any sound content included in the audio tag. There are three available supported audio formats in HTML: MP3, WAV, and OGG.

Below is a simple code snippet:


  <!DOCTYPE html>                                                                   
  <html>                                                                          
  <body>
     <h1>The audio element</h1>
     <p>please play the audio:</p>
    <audio
       controls source src="bensound.mp3" type="audio/mpeg">
        Not able to play
    </audio>
 </body>
</html>

You can see there are other attributes also present inside the audio tag such as controls .

controls: It offers to have controls on the pause and play button which is displayed when we use this attribute.

There are many other attributes like autoplay, loop, muted, preload and src and is described below.

autoplay: It will start playing audio as soon it is ready.

loop: The audio will repeat itself over and over again, once it is finished, it will start all over again.

muted: It specifies that audio output will be muted.

preload: Audio gets loaded once the page is loaded even if refreshing by user takes place.

src: It is the url of the audio.

Audio used is taken from Bensound.com. Above given is simple example of <audio>, try and feel free to comment below.

Share:

Categories

Archives

Related Posts

Array Destructuring

Array Destructuring Array destructuring is a powerful syntax introduced in ES6 that allows you to unpack elements from an array

Read More »

Explore our Affiliated partner links

hostgator website plan

Hostgator

Best Website hosting plans & Best for 24/7 support.

hostinger webhosting plan

Hostinger

Reasonable website hosting packages for small business & 24/7 Email support

Elementor pro

Design Worpdress website quickly using Elementor Builder and AI

buy elementor website templates

Buy Elementor Website Template

Buy ready made Elementor Website Template from us & Get Free Elementor pro licence for 1 year .