Embed Audio HTML

Audio Tag in HTML:

Embed Audio HTML: Though it is possible to embed audio inside HTML, yet only HTML 5 supports this feature; however, various browsers respond differently to audio feature because there is no consensus among the modern day web browsers for audio format.  The tag <audio></audio> is used to render voice in HTML. There are a number of formats supported by this HTML tag that include: mp3, Ogg, WAV etc. In my experience, mp3 is the safest format with the major web browsers; therefore, I would advise you to use mp3 format. Let us try to add an audio file on a sample webpage:

Code for adding audio onto a webpage:

Step 1: Let us begin with by calling the HTML 5 document:

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

 

Step 2: Let us now place the actual code inside the body of our web document.Highlighted above is the code for defining your webpage as an html 5 document.

 

<h1>Testing Audio in HTML 5</h1>

<audio controls = “controls”>

<source src = “sound.mp3” type = “audio/mpeg”>

</audio>

</body>

Play audio in HTML 5

Step 3: See the result of your code in your browser. If it displays the one like below, then your code is working pretty well.

Step 4: Let us understand the above code:

<audio controls= “controls”>, the highlighted portion is required to show the audio control buttons including play and voice controls for the end user. Without the control function, a user would not be able to play the video.  Unlike the above picture, a user would see the below blank screen without the option to play the audio.

Testing audio in HTML 5

The above HTML 5 audio feature is supported by all major browsers including Internet Explorer, Chrome, Firefox and Opera.

HTML 5 Audio supporting browsers

Leave a Reply