Embedding Music with HTML Codes: Step by Step Guide for Adding Music to a Web Site

Embedding Music with HTML Codes: Step by Step Guide for Adding Music to a Web Site
Page content

Embedding Music - MIDIs and MP3s

If you’re looking to learn how to use your website to play music, HTML codes can tell browsers how to handle the songs you’d like to play. For this, there are two different formats of music you can use.

A MIDI file is comprised of digital musical instruments only (no voices or traditional instruments), and sounds quite a bit like a polyphonic ringtone. However, their simplicity means that they are fast loading and are easily embedded into the background of your website.

MP3s, on the other hand, are the format that most people associate with. They’re complex, and average 3-8 megabytes for a normal song, and cannot be embedded directly into the background of websites. They can, however be streamed on your page through a third-party Flash-based extension. This article will walk you through how to insert both MIDI files and MP3s into an HTML document.

MIDI File: Plays When Page Loads

If you’d like to insert a MIDI file that plays automatically when a page is loaded, keep in mind that there is no way to give the user the option to turn it off. This can get rather annoying for people who have their speakers up and aren’t expecting it, or for those who just aren’t into listening to embedded music. That being said, if you’re positive that you want to insert MIDIs that automatically play, here’s the code to do so:

Simply replace MySong.mid with the URL of your MIDI file. It’s also worth noting that the scrap of code above does not work with Netscape, but will work with IE, Opera, and Firefox.

The smarter option for embedding a MIDI file into a website is allowing a user the option of turning the music on by clicking a link. This way, if they want to hear your music, all they have to do is click a link, but if they don’t, they don’t have to worry about muting their speakers!

Play My Song!

If you’d rather have an image to click instead of a piece of text, simply add an image source as I’ve done below!

MP3 Streaming

Free Flash MP3 Player

MP3s are a little bit more difficult to work with. You can’t simply embed them straight into the background of your page. However, there are ways to work around this! Free Flash MP3 player - provided by Premium Beat - allows you to stream not only a single song or sound, but an entire playlist. Download and unzip your file somewhere easy to remember, like your desktop.

Creating a Playlist

Creating a playlist for streaming flash players is generally pretty easy, but you’ve got to make sure that you don’t mistype anything, otherwise your song will not work. If you’re comfortable coding HTML, the format will be incredibly easy to follow! Simply open playlist.xml in an HTML editor (I suggest something simple, like Notepad, which won’t add any extra formatting) and follow the format below. Every block of code that comes between is a single track in your playlist.

CantRepeat.mp3

If you shift pages and directories about a bit, you might want to use the absolute path to your music files.

https://www.yourdomainsite.com/CantRepeat.mp3

Use as many blocks to fill up your playlist as needed!

Embedding Free Flash MP3 Player into your site

sampleEmbedObject

To insert your Flash MP3 player into your website, open sampleEmbedCode.html in an HTML editor like Dreamweaver or Notepad, and copy the embed code and paste it into your site where you would like it to appear. You’ll want to pick an area where it will easily be seen, so viewers can turn it on and off and adjust the volume as needed.

Setting up Your File Paths

In order for the music to stream properly, you have to tell your embed code where you’re going to pull the music from. Change the playlistPath in the embed code to where you’ve uploaded playlist.xml.

so.addVariable(“https://yourdomain.com/music/", “playlist.xml”);

Image Credits

Music Note created by Amber Neely. All screenshots taken by Amber Neely and are intended for educational purposes only.