Code Example

<h3>Flamingo Sounds</h3>
<audio controls id="audio-example">
<!-- One or more source files, each referencing the same audio but in a different file format.
The browser will choose the first file which it is able to play. -->
<source src="/wp-content/uploads/flamingos.ogg">
<source src="/wp-content/uploads/flamingos.mp3">
You will see this text if native audio playback is not supported.
<!-- You could use this fall-back feature to insert a JavaScript-based audio player. -->
</audio>
<small>Audio by <a href="https://soundcloud.com/beeldengeluid">Beeld en Geluid</a> [<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>], <a href="https://commons.wikimedia.org/wiki/File%3AArtis%2C_enkele_flamingo&#039;s_-_SoundCloud_-_Beeld_en_Geluid.ogg">via Wikimedia Commons</a></small>
<style>
#audio-example {
display: block;
}
</style>

Flamingo Sounds

Audio Syntax

The <audio> element defines an in-browser audio player. The audio player can provide a single piece of audio content. To specify the source file of the audio content, use one or more <source> elements inside the <audio> element. All <source> files should contain the same audio content, but in different file formats. The browser will select the first file format that it is able to play. (So order them according to your preference.) If you are not going to provide multiple source file formats, you may indicate the source file in the src attribute, instead of in a separate <source> element.

<audio src="/wp-content/uploads/flamingos.mp3" controls>

Styling the Audio Player

The design and styling of the audio player is left up to the browser implementation (subject to some amount of CSS styling). For the most part, the best practice is usually to leave the styling of the audio player alone, letting it be controlled by the browser. This ensures a familiar look and feel for the user.

Block display and sizing

Two CSS styles you may want to consider specifying for the <audio> element are display and width. The default styling for the <audio> element is inline. This can cause some unfortunate collisions:

<audio controls> <!-- One or more source files, each referencing the same audio but in a different file format. The browser will choose the first file which it is able to play. --> <source src="/wp-content/uploads/flamingos.ogg"> <source src="/wp-content/uploads/flamingos.mp3"> You will see this text if native audio playback is not supported. <!-- You could use this fall-back feature to insert a JavaScript-based audio player. --> </audio> <small>Audio by <a href="https://soundcloud.com/beeldengeluid">Beeld en Geluid</a> [<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>], <a href="https://commons.wikimedia.org/wiki/File%3AArtis%2C_enkele_flamingo's_-_SoundCloud_-_Beeld_en_Geluid.ogg">via Wikimedia Commons</a></small>

Typically, what you actually want in a page design is for the <audio> element to display as a block element.

#audio-block-example { display: block; }

<audio controls id="audio-block-example"> <!-- One or more source files, each referencing the same audio but in a different file format. The browser will choose the first file which it is able to play. --> <source src="/wp-content/uploads/flamingos.ogg"> <source src="/wp-content/uploads/flamingos.mp3"> You will see this text if native audio playback is not supported. <!-- You could use this fall-back feature to insert a JavaScript-based audio player. --> </audio> <small>Audio by <a href="https://soundcloud.com/beeldengeluid">Beeld en Geluid</a> [<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>], <a href="https://commons.wikimedia.org/wiki/File%3AArtis%2C_enkele_flamingo's_-_SoundCloud_-_Beeld_en_Geluid.ogg">via Wikimedia Commons</a></small>

Finally, you may wish to specify the width of the <audio> element, so that it fits your overall layout better. For most responsive layouts, width: 100% works well, especially if you are using the same width styling on other similar elements.

Protip: Different browsers will display the <audio> element differently. While you shouldn’t try to fight this, you definitely want to check how things look on a handful of commonly used browsers (including mobile). Besides display styling, different browsers handle margin and height a bit differently, and this can lead to ugly results if you don’t check. In particular, setting height: auto; on an <audio> element will break your spacing on some browsers, but not on others.

Audio File Formats

The most well-supported audio format is .mp3, which is recognized by all major browsers which recognize the <audio> element. After that, the second-most well-supported format is .wav, which is supported by most browsers still in active development (that is, not Internet Explorer). Other formats such as .ogg and .acc are sporadically supported. If you wish to use one of these formats, you should provide a more well supported alternative. (The examples above use two <source> elements for demonstration purposes. In practical use, there is no real reason to provide anything other than an .mp3 file, which virtually all users will be able to play.)