Quackit Logo

HTML Resources

HTML Home
HTML Tutorial
HTML Codes
HTML Templates
HTML 4 Tags
HTML 5 Tags

HTML 5 Tags

FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

HTML 5 <audio> Tag

Print Version
Related:
• HTML <embed> Tag
• HTML <video> Tag
• HTML <source> Tag

The HTML <audio> tag is used to specify audio on an HTML document.

For example, you could embed a music file on your web page for your visitors to listen to.

The <audio> tag was introduced in HTML 5.

Any content between the opening and closing <audio> tags is fallback content. This content is displayed only by browsers that don't support the <audio> tag.

Example

Modify the code below, then click "Update". See below for attributes.

Source CodeResult

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

AttributeDescription
srcSpecifies the location of the audio file. Its value must be the URI of an audio file.
autoplaySpecifies whether or not to start playing the audio as soon as the object has loaded.

This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either autoplay or autoplay="autoplay").

Possible values:

  • [Empty string]
  • autoplay
startSpecifies where to start playing the audio. This is expressed as an offset value. The default value is 0 (the beginning of the file).

Possible values:

  • [numeric value]
loopstartUsed for looping over a section of the audio file. Specifies where to start the loop.

Possible values:

  • [numeric value]
loopendUsed for looping over a section of the audio file. Specifies where to end the loop (before starting again from the point specified in loopstart).

Possible values:

  • [numeric value]
endSpecifies where playback should end (i.e. when the clip should stop playing). By default, the audio will play until the end.

Possible values:

  • [numeric value]
playcountSpecifies how many times the clip should play. The default is 1.

Possible values:

  • [numeric value]
controlsSpecifies whether or not to display audio controls (such as a play/pause button etc).

This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either controls or controls="controls").

Possible values:

  • [Empty string]
  • controls

Global Attributes

The following attributes are standard across all HTML 5 tags.

class id style
contenteditable irrelevant tabindex
contextmenu lang template
dir ref title
draggable registrationmark  

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

onabort ondragover onmousemove
onbeforeunload ondragstart onmouseout
onblur ondrop onmouseover
onchange onerror onmouseup
onclick onfocus onmousewheel
oncontextmenu onkeydown onresize
ondblclick onkeypress onscroll
ondrag onkeyup onselect
ondragend onload onstorage
ondragenter onmessage onsubmit
ondragleave onmousedown onunload

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Also see the HTML 4.01 tags


Enjoy this website?

  1. Link to this page (copy/paste into your own website or blog):
  2. Add this page to your favorite social bookmarks sites:
               
  3. Add this page to your Favorites

Oh, and thank you for supporting Quackit!

Need Content for your Website?

Get unique, quality digital content for your website. You can even earn money by reselling it!

Includes:

  • Over 29,000 Ebooks
  • Over 7,000 Website templates
  • Over 11,000 Fonts
  • Over 39,000 Logos
  • Over 1,000 Cell Phone Games
  • Over 3,000 Cell Phone Images
  • Over 21,000 Ring Tones
  • ...and much more!
Get your 10GB webmaster package now!