html tutorial - Audio <audio>-tag in HTML - html5 - html code - html form



  • <audio> tag defines a music or other sound streams.
  • <audio> tag has supported file formats like mp3, wav, etc.
  • It supports Global and event attributes.
  • <audio> tag belongs to Flow Content category.

Syntax for <audio> tag:

<audio>Content here...</audio>

Differences between HTML 4.01 and HTML5:

HTML 4.01

  • HTML4 does not supports the <audio> tag.

HTML5

  • <audio> tag is new to HTMl5.

Sample Coding for <canvas> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy audio tag</title>
    </head>
    <body>
        <h2>Wikitechy Audio</h2>
        <audio controls>
            source src="wikitechy-audio.wav" type="audio/wav"
            source src="wikitechy-audio.mp3" type="audio/mp3"
        </audio>
    </body>
</html>

Code Explanation for <audio> tag:

code explanation for audio tag

  1. <audio> tag used to embed audio file.
  2. controls attribute used to specifies that audio controls should be displayed.
  3. <source> tag used to define the source of the audio file.
  4. “wikitchy-audio.wav” is the source file.
  5. type attribute used to define the media type.

Output of <audio> tag:

output for audio tag

  1. Here the audio file is displayed in the output.

Attribute:

Attribute Value HTML4 HTML5 Description
autoplay autoplay No Yes Specifies that the audio will start playing as soon as it is ready
controls controls No Yes Specifies that audio controls should be displayed (such as a play/pause button etc)
loop loop No Yes Specifies that the audio will start over again, every time it is finished
muted muted No Yes Specifies that the audio output should be muted
preload auto
metadata
none
No Yes Specifies if and how the author thinks the audio should be loaded when the page loads
src URL No Yes Specifies the URL of the audio file

Browser Support for <audio> tag:

Browser Mp3 wav ogg
Yes Yes No
Yes No Yes
Yes Yes Yes
Yes Yes No
Yes Yes Yes

Related Searches to audio tag in Html