Up Next
Up Next

HTML Code for Adding Music

Charlie R. Claywell
Woman listening to a website's music

If you want a quick and easy way to add music to your website, using HTML coding is one way to accomplish it as long as you are aware of the limitations. Since all browsers do not recognize the same audio formats and older browsers don't recognize HTML5 improvements, you will need to know how to accommodate these browser issues in order to accomplish your goal.

Using HTML Code for Adding Music Via a Text Editor

If you code your website the long way and use a text editor, such as Notepad, you'll need to know more code than if you were using HTML editors, such as Dreamweaver. Assuming that you already have a working knowledge of basic HTML code, you will want to take the following steps to easily add music to any page of your website:

  1. First, decide if you want the music to play when the web page loads or only when the visitor clicks on a link.

  2. To accommodate most browsers and comply with HTML5 standards, you need to create two audio files: a .mp3 and an .ogg. The mp3 version is recognized by nearly all browsers, whereas the .ogg version is for older versions of Firefox and Opera.

  3. Upload the music files to your server via a program, such as FileZilla, or through the Control Panel of your site. Most control panels have a feature called File Manager that allows you to upload files, extract zipped folders, and even edit files. It's a good idea to have a specific folder where you keep music files. You can simply title this "music" or "audio" if you like.

  4. Once you've uploaded the music, you are ready to deal with the HTML code.

How to Embed Music

There are a couple different methods you can use to embed the music, depending upon whether you've decided to have the music start on page load, start if the user initiates it, or start only when the visitor clicks on a link.

Basic Code (Non-HTML5)

These methods were used before HTML5's introduction of the <audio> tag. If your page is not HTML5 compliant, you can use these options.

  • <embed> method: This HTML tag is used for a non-HTML element. Using this code will allow the music file to play when the page is loaded. The tag is placed inside the <body> tag of your page's HTML.
  • <embed height="50" width="100" src="YourMusicFile.mp3">
  • <object> method: This HTML tag can also be used as a container for a non-HTML element. Using this code lets the music file play when the page is loaded. Just like the <embed> tag, this one is placed inside your page's HTML.
  • <object height="50" width="100" data=" YourMusicFile.mp3"></object>

One potential problem with using either of these tags is that the music may not play in certain situations since different browsers support different audio formats. For example, if a user's browser does not support the file, such as an mp3 file, a plug-in is required for the music to work. If that plug-in is not installed on the user's machine, the audio will not play.

HTML5 <audio> Tag

The <audio> tag was introduced with HTML5, and it defines music or other audio files. Using this tag inside your HTML looks like this:

<audio controls>

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

<source src="YourMusicFile.ogg" type="audio/ogg">

<p>Your browser does not support this audio format.</p>

</audio>

You need to include both file formats to accommodate a larger spectrum of browsers. The <audio> tag is recognized and works in all modern browsers. However, since older browsers do not recognize the <audio> tag, a user would see "Your browser does not support this audio format" in those browsers.

Blend the Old with the New

By using the <audio> and the <embed> tags together, your music will play in the broadest range of browsers. By incorporating the .mp3 and .ogg files, you should reach the lion share of users. The only weakness of this method is the <embed> tag does not 'degrade,' so an error message like "Your browser does not support this audio format" will not display in the browser window.

<audio controls>

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

<source src=" YourMusicFile.ogg" type="audio/ogg">

<embed height="50" width="100" src=" YourMusicFile.mp3">

</audio>

Options Inside <audio> Tag

You control when the music is activated by added or omitting one or more attributes.

  • Play on load: If you want the music to play when the page loads add the attribute autoplay.

<audio controls autoplay>

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

<source src=" YourMusicFile.ogg" type="audio/ogg">

<embed height="50" width="100" src=" YourMusicFile.mp3">

</audio>

  • Play/Stop/Pause buttons: To display the control buttons include the attribute controls.
  • Endless Loop: If you want the music to loop endlessly, include the attribute loop.
  • Muted: To force the user to unmute the sound to hear it, include the attribute muted.

Displaying Musical Notes on your page

There may be times when displaying the musical notes on your page is a very good idea. For example, if you are teaching guitar riffs, your page may include a video demonstrating how to finger the notes as well as the 'sheet music' that teaches the visitor how to read music. Several ways exists to display musical notes in HTML, and here are three of them.

Use the HTML Code for the Note

html code for music notes

Create an Image from a Font

Use a font that includes musical notes or a font that focuses solely on notes for its characters.

Use a Program

Compiler programs like VexFlow do all the heavy lifting by allowing you to write the notes in letter format (a, b, c, etc.), and then the program compiles your work and outputs an image file that you can display on your web page. Lilypond is another program-based option.

Best Practices

Taste in music is highly personal, so what you think sounds great may seem painful to someone else. Since musical taste is so subjective, it's generally best to give the user as much control over the music as possible. So even though you have the ability to start the music when the page loads or to loop the audio endlessly, giving users controls to do it themselves may keep them on the page longer, especially if the music is background music that adds little, if anything, to the content. Placing music on the page should be about enhancing the user experience.

Was this page useful?
HTML Code for Adding Music