HTML Guides for controls

The controls attribute on <audio> is a boolean attribute, so it takes no value: write controls, not controls="true".

A boolean attribute is on when it's present and off when it's absent. The HTML specification allows three forms: the bare name (controls), an empty value (controls=""), or the attribute's own name as the value (controls="controls"). Any other value is invalid, "true" included.

Browsers still show the player for controls="true", because they only check whether the attribute exists. For the same reason, controls="false" doesn't hide the controls. To hide the browser's controls, remove the attribute. The validator rejects controls="false" as a bad value too.

This markup often comes from a template or script that prints a boolean variable straight into the attribute. Output the attribute name when the value is true, and leave the attribute out when it's false.

Invalid example

<audio controls="true" src="episode.mp3">

<a href="episode.mp3">Download the episode</a>

</audio>

Valid example

<audio controls src="episode.mp3">

<a href="episode.mp3">Download the episode</a>

</audio>