Pin Me

Adding Music with HTML Codes

written by: Amber Neely•edited by: Michele McDonough•updated: 4/22/2012

These days, it isn't hard to use a website to play music. HTML codes can be used to embed both MIDI files, as well as stream MP3s with little effort. This article will walk you through the process of embedding MIDIs into your website, or how to stream MP3s with a free Flash-based player. Rock on!

  • slide 1 of 8

    Embedding Music - MIDIs and MP3s

    Music Note 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.

  • slide 2 of 8

    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:

    <bgsound src="MySong.mid" loop="infinite">

    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.

  • slide 3 of 8

    MIDI File: Plays on a Link Click

    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!

    <a href="MySong.mid">Play My Song!</a>

    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!

    <a href="MySong.mid"><img src="record.gif"></a>

  • slide 4 of 8

    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.

  • slide 5 of 8

    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 <track></track> is a single track in your playlist.



    <title>Can't Repeat - The Offspring</title>


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



    <title>Can't Repeat - The Offspring</title>


    Use as many <track> blocks to fill up your playlist as needed!

  • slide 6 of 8

    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.

  • slide 7 of 8

    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("", "playlist.xml");

  • slide 8 of 8

    Image Credits

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