Log in Sign Up

Managing an MP3 Playlist

If you're looking for how to make music play in the background on your website, you need to have your head examined. Don't do it. I don't care how lovely or cool or awesome the music is, playing it without my permission is unacceptable, and grounds for hitting "back" and never returning.

That said, there are legitimate reasons to add the ability to listen to audio right from your site, so that's what this HowTo is about. You're building a site for a band, and they want to put up some demo tracks, or you have a series of lectures you want to allow people to listen to and download. This HowTo will let you accomplish this in only a couple of lines of HTML!

Getting Started

I downloaded a free template from websitetemplates.org, and on the bottom of the page there is an unordered list of links that are intended to be samples of music to be downloaded (see the image on the right). We're going to turn this into a playlist of MP3 files that can be managed right from the browser.

To start out with, it just has a bunch of list items with placeholder text with href="#", the staple of any fine web template (don't get me started...). But it looks nice, and provides us with the basics.

First of all, let's just strip this list down to a single list item. You'll end up with something like this:

<ul>
  <li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>

We're going to first use MagicRepeat to allow the content manager (that would be the person responsible for keeping the site updated) to add new links.

New list items with MagicRepeat

Adding MagicRepeat to List Items

MagicRepeat will allow the content manager to create, delete, and sort these list items. To add MagicRepeat, we just add the <magicrepeat> tags around the list item (the thing we want to repeat), not forgetting to also name the MagicRepeat:

<ul>
  <magicrepeat me_name="samples">
    <li><a href="index.html">Lorem ipsum dolor sit</a></li>
  </magicrepeat>
</ul>

Now, if we're logged in to the site we'll see the usual MagicRepeat controls appear. I hit "new" a few times, and now I end up with something that looks like the image there on the right. The content manager can now "repeat" and manage multiple list items just by clicking on the appropriate buttons.

Managing the Links and Adding the Player

MagicEdit provides a powerful link management interface that not only lets the content manager update links to other pages on the Web, but also link to files that are uploaded right from the website. We're going to use this feature to manage the MP3 files that make up our sample playlist.

To add the link management capability, just add the magicedit attribute to the anchor tag, and as always, remember to name the link using me_name:

<ul>
  <magicrepeat me_name="samples">
    <li><a href="index.html magicedit me_name="sample">Lorem ipsum dolor sit</a></li>
  </magicrepeat>
</ul>

That's really all that you need to do from the code side. But to make it easy to play the MP3 files right from the browser without downloading them first we'll just add the Yahoo Media Player to the page. This is some JavaScript that looks for MP3 files on the page and dynamically adds the player to the site. Just add the following line to the head of your page:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">< /script>
With Edit Buttons

The Results

We're done! Now, each link will get a little edit button next to it that lets the content manager manage the files and links. Saving the file up to the server and refreshing the page shows us something like the image on the right.

Clicking on the "edit" button next to each link will open up the link management panel. This panel lets the content manager upload a file or link to another page (on this site or elsewhere), as well as edit the text that is being linked.

The link editor (click image to enlarge)

I'll just put on my content manager hat and upload a few MP3 files so we can see how the player works, too. I just click edit next to each link, then select the file I want to upload, then type in the name of the song in the link text field. That's about it!

After finishing adding all the files and logging out, here is the final result. I've expanded the Yahoo Media Player so you can see that it has created the playlist of all of the files, but the player can be hidden away with just a click.

The final results

Now you have everything you need to add an easily managed MP3 playlist to your site!

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top