Add Audio tag in HTML5

Html5 audio tag will allow you to embed any audio clip in your webpage with just one line code, We often hear music online, simply by clicking start button on web page, here we learn how to add audio clip in html page.

HTML5 Audio Tag Example

If you want to add one audio clip in your webpage, Here is the syntax for adding single audio file in html page.

<audio src="~/sound/file1.mp3" controls="controls" />

In case, you want to add many audio files that keep on playing in loop, here is the syntax for adding multiple audio files in webpage.

   
<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="~/sound/file1.mp3">
    <source src="~/sound/file2.mp3">
</audio>

html audio tag attributes

Here are few important attributes for audio

  • audio src

    this property is for setting up the file source, like source src="~/suound/file1.mp3"

  • autoplay

    autoplay="autoplay" This Boolean attribute specifies that if the audio will automatically start playing, the value is "autoplay" which means "true".

  • controls

    controls="controls" , Indicates browsers will display the control, that will allow the user to control audio play/pause, volume etc.

  • loop

    loop="loop" Indicates that audio will automatically start over again.

  • muted

    muted="muted" , if the property value set to muted then, then the audio will be muted when loaded for the first time.

HTML5 is very demmanding skill for Web Designer, the newer version of html has introduced many new tags that helps creating rich experiences while user browsing any webpage on different devices.

You may be interested in reading following articles:
 
Audio Tag in HTML5
Web Designing Tutorials
HTML5 Tags Examples | Join Web Design Course