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.
You can add HTML music code to your website by using the HTML5
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.
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.
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.
You can embed a music file into your page using the following HTML code:
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.
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:
<audio> tag, you can add the
preload attribute. Possible values are
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.
<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:
<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:
||Listen to a sample of Lost Mojo|
This obviously assumes that the music file is in the specified location.