`<audio controls> HTML Attribute`

In HTML Attributes, New

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Attribute of: New Audio HTML Element: Master It Out Now With Our Code Example
What does <audio controls> HTML Attribute do?: Toggles the display of audio playback controls.

Contents

1 Code Example
- 1.1 With Controls
- 1.2 Without Controls
2 Usage Suggestion

Code Example

<h3>With Controls </h3>
<audio controls id="audio-example-controls" class="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>

<h3>Without Controls </h3>
<audio id="audio-example-no-controls" class="audio-example" src="/wp-content/uploads/flamenco.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 JCZA [<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>] , via <a href="https://commons.wikimedia.org/wiki/File:JCZA_-_JCzarnecki-Flamenco.ogg">Wikimedia Commons</a></small>



<style>
.audio-example {
display: block;
}
</style>

With Controls

Audio by Beeld en Geluid [CC BY-SA 3.0], via Wikimedia Commons

Without Controls

Audio by JCZA [CC BY-SA 3.0] , via Wikimedia Commons

Usage Suggestion

Under most normal circumstances, including the controls attribute should be a matter of course. The exception to this might be if you are going to create your own playback control panel using JavaScript. It would be extremely inconsiderate to your users to use the autoplay attribute while excluding the controls attribute.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.