• Tech
  • Forums
  • Jobs
  • Books
  • Events
  • Videos
  • Live
    • Interviews
    • Certification
    • Training
    • Career
    • Members
    • News
    • Blogs
  • An Article
  • A Blog
  • A Video
  • An Ebook
  • An Interview Question
  • Feed
  • Dashboard
  • Wallet
  • Learn
  • Achievements
  • Network
  • Rewards
  • SharpGPT
  • Premium
  • Register
  • Login
HTML 5

Audio Tag in HTML5

  • WhatsApp
  • Valon Ademi
  • 13y
  • 9.9k
  • 0
  • 0
    • 100
  • Article
Audio Tag.zip

The Audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, wav, and .ogg. I have used five types of sound formats to show which formats are compatible for browsers. A WAV file is a common sound that is supported by most browser versions.

Syntax

<audio src="URL" controls>  </audio>

Syntax for more than one audio format

<audio controls="controls" autoplay   loop>
        <source src="URL1" type="audio/mp3" />
        <source src="URL2" type="audio/wma" />
        <source src="URL3" type="audio/x-wav" />
</audio>
 

New Element-Specific Attributes
autobuffer This Boolean attribute indicates whether or not the browser should begin
buffering audio right away.
autoplay This is Boolean attribute indicate  whether or not the file should start playing audio as soon as it can.
loop This Boolean attribute indicates whether or not apply repetition on playing audio.
src This attribute is used to specify the URL (location of the audio file) of the audio to show.
controls This Boolean attribute specify whether or not the browser should display audio controls (such as play/pause, volume and seek).
HTML5 Event Attributes
onabort onblur oncanplay oncanplaythrough
onchange onclick oncontextmenu ondblclick
ondrag ondragend ondragenter ondragleave
ondragover ondragstart ondrop ondurationchange
onemptied onended onerror onfocus
onformchange onforminput oninput oninvalid
onkeydown onkeypress onkeyup onload
onloadeddata onloadedmetadata onloadstart onmousedown
onmousemove onmouseout onmouseover onmouseup
onmousewheel onpause onplay onplaying
onprogress onratechange onreadystatechange onscroll
onseeked onseeking onselect onshow
onstalled onsubmit onsuspend ontimeupdate
onvolumechange onwaiting    

HTMLPage2.htm

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>
        mp3</p>
    <audio src="sound/cartoonimpact.mp3" controls>
    </audio>
    <br />
    <p>
        aac</p>
    <audio src="sound/cartoonimpact.aac" controls>
    </audio>
    <br />
    <p>
        wma</p>
    <audio src="sound/cartoonimpact.wma" controls>
    </audio>
    <br />
       <p>
        wav</p>
    <audio src="sound/cartoonimpactwav.wav" controls>
    </audio> 
   <br />
    <p>
        ogg</p>
    <audio src="sound/cartoonOGG.ogg" controls>
    </audio>
    <br />
    <p>
        All in one</p>
    <audio controls="controls" autoplay>
        <source src="sound/cartoonimpact.mp3" type="audio/mp3" />
        <source src="sound/cartoonOGG.ogg" type="audio/ogg" />
        <source src="sound/cartoonimpact.aac" type="audio/aac" />
        <source src="sound/cartoonimpact.wma" type="audio/wma" />
        <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
    </audio>
</body>
</html>
 

Output

Chrome 

Audio tag

Fire Fox


Audio tag

Internet Explorer

Audio tag
 

You can use the loop attribute to play sound repeatedly.

 loop.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <audio controls="controls" autoplay loop>
        <source src="sound/cartoonimpact.mp3" type="audio/mp3" />
        <source src="sound/cartoonOGG.ogg" type="audio/ogg" />
        <source src="sound/cartoonimpact.aac" type="audio/aac" />
        <source src="sound/cartoonimpact.wma" type="audio/wma" />
        <source src="sound/cartoonimpactwav.wav" type="audio/x-wav" />
    </audio>
</body>
</html>

Output

Audio tag

You can play sound in the background of the page using the following code.

 <audio>
<bgsound src="sound/cartoonimpactwav.wav">
</audio>

  • Audio tag
  • Audio tag in HTML.
  • Audio tag in HTML5
  • CSS
  • HTML5
  • JavaScript
  • learn HTML5
Up Next
    Ebook Download
    View all
    C# Corner Ebook
    Grid structure in css
    Read by 1 people
    Download Now!
    Learn
    View all
    Learn Image
    Learn HTML 5, HTML 5
    Leaderboard
    View all
    Jemmy Jackson James

    Jemmy Jackson James
    +0
    Mahesh Chand

    Mahesh Chand
    +0
    Shivam Payasi

    Shivam Payasi
    +0
    View all
    Yesterday's leader
    Jemmy Jackson James  
    Jemmy Jackson James
    C#, .NET, Android, Apache, Azure, AWS, GCP
    Bengaluru (India)
    9
    4.6k
    19k
    10
    Member of the month
    Rinki  
    Rinki
    Chennai (India)
    15
    5.3k
    14.8k
    50
    Speaker of the month
    Shivam Payasi  
    Shivam Payasi
    C#, .NET
    Chitrakoot (India)
    8
    21k
    19.7k
    10
    Upcoming events
    View all
    • The Cloud Show with Magnus Mårtensson ft. Oscar Garcia Colon - Ep: 45
    • Bhubaneswar Chapter
    • Building Websites with Microsoft Power Pages: Exploring WebPage, WebTemplate, and Page Templates - Microsoft Business Application Ep. 25
    Suggested for you
    View all
    Ben Chris Ben Chris
    Follow
    Rinki Rinki
    Follow
    Alistair Cook Alistair Cook
    Follow
    Nilesh Jadav Nilesh Jadav
    Follow
    Daisy Princess Daisy Princess
    Follow

    CSharpBot

    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    Sign-Up Now

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    Sign-Up Now

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    Sign-Up Now

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs
    About Us Contact Us Privacy Policy Terms Media Kit Partners C# Tutorials Consultants Ideas Report A Bug FAQs Certifications Sitemap Stories CSharp TV DB Talks Let's React Web3 Universe Interviews.help Jumpstart Blockchain Build with JavaScript

    ©2024 C# Corner.

    All contents are copyright of their authors.