2. Source

The <audio> element takes a source attribute (src=""), which accepts a URL (relative or absolute) to a single audio file.

As with video, it is always recommended you have at least two versions of an audio file, and should use the <source> element instead.


66% Complete (success)

<audio src="#" preload controls ></audio>


You can use multiple source elements, which specifies to the browser the audio that is available in multiple formats. This is the <source > element, and again, it is used instead of the src="" attribute of an <audio> element.

66% Complete (success)

<audio preload controls>
<source src="#" type="">
<source src="#" type="">


When using more than just .mp3 you should include multiple versions of the file, with decreasing preference. This allows the browser to then use the file format that it supports.

The <source> element is an empty element, and accepts the src="" attribute to provide the URL to the browser. Use the type="" attribute to include the MIME type, which allows the browser to instantly know if it can play that file.

Here are the types (and codecs when applicable) for the more popular audio filetypes:

  • MP3 - type="audio/mpeg"
  • WAV - type="audio/wav"
  • OGG -type="audio/ogg; codecs=vorbis"