<audio>

Draft

Definition

The <audio> element provides a way to embed sound in a web page. You can use it to play audio files, such as MP3s, WAVs and OGGs.

<audio controls>
  <source src="https://example.com/example.mp3" type="audio/mpeg" />
  <source src="https://example.com/example.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

Attributes

attribute	description
`autoplay`	If present, the audio will automatically play as soon as it can do so without stopping.
`controls`	If present, the browser will provide controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
`crossorigin`	This attribute is a CORS setting. It allows you to define whether or not the browser should send cookies along with the request for the audio file.
`loop`	If present, the audio will start over as soon as it ends.
`muted`	If present, the audio will be initially silenced. The user will be able to unmute it.
`preload`	Indicates whether the audio should be loaded when the page loads. Possible values are `auto`, `metadata` and `none`. The default value is `auto`.
`src`	The URL of the audio file to embed.

And within the tag, you can use the following attributes:

attribute	description
`type`	The MIME type of the audio file. This is a required attribute if the `src` attribute is present.
`src`	The URL of the audio file to embed. This is a required attribute if the `type` attribute is present.
`srcset`	A list of one or more strings separated by commas. Each string is composed of: a URL, optionally followed by whitespace and a media condition that must be met for the URL to be used.
`sizes`	A list of one or more strings separated by commas. Each string is composed of: a media condition that must be met for the image to be used, optionally followed by whitespace and a source size value.
`media`	A media query. If the query does not match the current environment, the resource will not be used.
`height`	The height of the image in pixels. Use the integer without a unit.
`width`	The width of the image in pixels. Use the integer without a unit.

<audio controls>
  <source
    src="https://example.com/example.mp3"
    type="audio/mpeg"
    srcset="https://example.com/example-320.mp3 320w, https://example.com/example-640.mp3 640w"
    sizes="(max-width: 320px) 280px, 640px"
    media="(min-width: 500px)"
    height="100"
    width="100"
  />

  <source
    src="https://example.com/example.ogg"
    type="audio/ogg"
    srcset="https://example.com/example-320.ogg 320w, https://example.com/example-640.ogg 640w"
    sizes="(max-width: 320px) 280px, 640px"
    media="(min-width: 500px)"
    height="100"
    width="100"
  />

  Your browser does not support the audio element.
</audio>