HTML tags | audio

It is used to embed sound content in a document. To do this, several sources are defined inside using <source> and the browser will choose the first one it can use. The text contained within <audio> will serve as an alternative to display in case the browser cannot use any of the <source>.

It has several attributes:

• autoplay: is a Boolean value that specifies whether the audio starts playing as soon as possible without waiting for the data to finish loading. Be careful when using this attribute as videos or audios that are played automatically can be annoying for many people. If the autoplay function is to be offered, it is best to request that the user specifically activate it.
• controls: if present, the browser will show the user the controls for play, stop, volume, search...
• crossorigin: is an enumerated attribute that indicates whether to use CORS to get the corresponding audio. CORS-enabled resources can be reused in the <canvas> element without being corrupted. When not present, the audio is retrieved without a CORS request (that is, without sending the Origin: HTTP header), preventing its use without corrupting on <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous had been used. The allowed values ​​are:
  • anonymous: sends a cross-origin request without a credential, that is, sends the Origin: HTTP header without a cookie, X.509 certificate or without performing HTTP Basic authentication. If the server does not provide credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the resource will be corrupted and its use restricted.
  • use-credentials: send a cross-origin request with a credential, that is, send the Origin: HTTP header with a cookie, a certificate, or by performing HTTP Basic authentication. If the server does not provide credentials to the origin site (via the Access-Control-Allow-Credentials: HTTP header), the resource will be corrupted and its use restricted.
• currentTime: returns a two-digit floating point indicating the current playback position specified in seconds. If the audio has not yet started to play, the time interval at which it will begin is returned. Assigning a value to currentTime sets the current playback position to that value and searches the audio at that position if it is loaded. If streaming, the browser may not be able to get certain parts of the audio if the data has already expired in the buffer. Other audios may have a timeline that doesn't start at 0 seconds, so setting currentTime to a previous value would fail. The getStartDate() method can be used to determine the starting point of the timeline.
• disableRemotePlayback: it is a Boolean value that disables the remote playback capability on devices connected through wired (HDMI, DVI...) and wireless (Miracast, Chromecast, DLNA, AirPlay...) technologies. In Safari, x-webkit-airplay="deny" can be used as an alternative.
• duration: it is a read-only attribute with a two-digit floating point value that indicates the total duration of the audio in seconds. If an element is not present or it is invalid, the returned value is NaN. If the end of the audio is unknown (for example streaming, radio, audios from WebRTV...) the returned value is +Infinity.
• loop: this is a Booolean value that, if specified, causes the audio to automatically replay from the beginning after completion.
• muted: a Boolean value that indicates whether the audio will be initially muted. Its default value is false.
• preload: it is an enumerated value that indicates to the browser what content preloaded before playback can lead to a better user experience, although the browser is not obliged to follow it as it is only an indication. The autoplay attribute prevails over the preload attribute, since if autoplay is specified the browser obviously needs to start downloading the audio in order to play it. It can contain one of the following values, the default value being able to vary in each browser (the specification advises that it be metadata):
  • none: the audio does not have to be preloaded.
  • metadata: only the audio metadata (for example, its duration) needs to be preloaded.
  • auto: the entire audio must be preloaded, even if the user may not be able to use it.
  • empty string: synonym of the value auto.
• src: the URL of the audio. It is optional, you can use the <source> element inside the <audio> element instead to specify the audio to embed.

The <audio> element does not have an intrinsic visual appearance unless the controls attribute is specified, in which case the default browser controls are displayed. These controls can be styled with CSS but only by understanding the entire block as a single unit, that is, setting margin, padding, border, border-radius, etc. It is not possible to style each of the individual components within the audio player (button size, font...) and the controls vary by browser.

Dialogue audios must provide subtitles and transcripts that accurately describe their content. Closed captions allow hearing impaired users to understand audio content as it plays, while transcripts allow people who need additional time to review audio content at a pace and format that is comfortable for them.

The <audio> element does not allow embedding subtitles using WebVTT, so if you want to use this technology it is necessary to embed the audio using a <video> element, which does support it. Another option is to find a library or framework that provides the same functionality.

If automatic captioning services are used, it is important to review the generated content to make sure it accurately represents the source audio.

In addition to spoken dialogue, captions and transcripts should also identify music and sound effects that convey important information, such as emotion and tone.

• Type: inline
• Self-closing: No
• Semantic value: No

Definition and example | Support