HTML <audio> Tag

Samantha Ming
The Startup
Published in
4 min readMar 11, 2020

--

Super simple to add and play audio files on your site. No more fussing with embedding a Flash file or whatever the old way was 😂 Simplify and move forward with HTML5 <audio> tag, yay 🎉

<audio controls>
<source src="sound.ogg" type="audio/ogg" />
<source src="sound.mp3" type="audio/mpeg" />
Your browser does not support the audio tag.
</audio>

Attributes

controls

This is a boolean attribute that specifies whether or not to display the audio controls (ie. start/pause button, scroll, volume).

<audio controls></audio>
<!-- OR -->
<audio controls="true"></audio>

Note: If it’s missing, the audio file will not be displayed. Typically, you should always include this. Unless you want to create your own control panel using JavaScript

autoplay

This is a boolean attribute that plays the audio file automatically after the page loads.

<audio autoplay></audio>
<!-- OR -->
<audio autoplay="true"></audio>

Note: this feature might not work due to Chrome’s autoplay policy change

muted

This is a boolean attribute that specifies whether the audio will be initially silenced. The default is false or un-muted.

--

--

Samantha Ming
The Startup

Frontend Developer sharing weekly JS, HTML, CSS code tidbits🔥 Discover them all on samanthaming.com 💛