HTML Music Codes

This page demonstrates how to add HTML music codes to your website. It also outlines various options available to you so that you can ensure your users area able to hear your audio.

HTML5 <audio> Element

You can add HTML music code to your website by using the HTML5 <audio> tag.

This element was only first introduced in HTML5 which at the time of writing, was still under development, so be sure to check your music code in different browsers. While most (if not all) major browsers support the actual <audio> element, there is varying support for different file formats.

CodeResult

In the above example, we have nested the <embed> element inside the <audio> element. This is to maximize browser compatibility. By doing this, if a browser doesn't support the <audio> element, it will display the "fallback content", which is located within the element. In this case, our fallback content is the <embed> element, which plays the same music file.

More detail on this technique below.

HTML <embed> Element

Before the <audio> element was introduced to HTML, many webmasters added music codes to their website by using the <embed> tag.

Even though this element has been around for a long time, it wasn't actually part of the HTML specification until HTML5 (which at the time of writing, is still under development). Having said that, it is still widely supported.

Example

You can embed a music file into your page using the following HTML code:

CodeResult

This code will present a music console with the appropriate controls. If you don't see any music controls and don't hear any music, you may need to download a plugin for your browser.

Nesting <embed> Inside <audio>

So, for maximum browser compatibility, you can nest the <embed> element inside the <audio> tag, and it would look something like this (the same as our code above):

CodeResult

Need to create a music playlist?

You can make your music player loop through more than one song using a music playlist.

How to preload a sound file

You can preload music files so that the music file is loaded in the background before the user clicks on the "Play" button. You can preload using the following technique:

On the <audio> tag, you can add the preload attribute. Possible values are none, metadata, and auto. By specifying auto, the audio/music should start downloading in the background as soon as the page has loaded. By specifying metadata, it will only download related metadata, such as the first keyframe, duration, size etc.

Example:

Copy to Clipboard
<audio src="/music/good_enough.mp3" 
	preload="auto" 
	controls>

You can also preload when using the <embed> tag. To do this, use the following code:

Copy to Clipboard
<embed 
src="/music/good_enough.mp3"
loop="false"
autostart="false"
hidden="true"
mastersound />

This embeds the sound, but the 'autostart' feature is off (you don't want to annoy the user now, do you?) and the 'hidden' feature is true, so the user doesn't see a console upon entering your webpage.

How to link to a music file

You can also link to a music file using the <a href= tag. All you need to do is write something like this:

CodeResult

Listen to a sample of Lost Mojo

This obviously assumes that the music file is in the specified location.

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo