Loading...

With HTML5, there is now a built-in way to play audio on all browsers.

Before the days of HTML5, plugins needed to be installed on a browser to play audio. There was no standard support between browsers for an audio player. Thankfully, HTML5 helped to simplify and standardize the process.

audio concept

Audio files are added to your web page using the <audio> tag. This lets the browser know that audio will be embedded on the page and that it should prepare an audio player.

<audio></audio>

To set the audio file's path, another tag called <source/> is needed. This tag is nested within the <audio> tag and takes on the src and type attributes. As with other tags with these attributes, src is where you set the path of the audio file and the file type so that the browser knows what kind of file to expect.

<audio>
  <source src="file.mp3" type="audio/mpeg" />
</audio>

For browser optimized compatibility, you can stack multiple file types of the same sound or song by setting up additional <source> tags that point to the different file paths.

<audio>
  <source src="file.mp3" type="audio/mpeg" />
  <source src="file.ogg" type="audio/ogg" />
</audio>

Be sure this text is after your <source> tags and is in a plain text format. This will appear if a browser doesn't support the audio files you have linked so that the viewer knows there is a compatibility issue.

<audio>
  <source src="file.mp3" type="audio/mpeg" />
  <source src="file.ogg" type="audio/ogg" />
  This browser does not support the linked audio file.
</audio>

Question

How many audio files can you link in an audio-tag?

As many as you want! Since the browser parses content from top to bottom, it will read through all the source files linked in an audio-tag, stopping at the first compatible file type. If there is no compatible or viable audio file, the browser will display the text you’ve provided as a fallback.