Last week we posted a fun collection of Halloween MP3s which received a tremendous amount of web traffic. Many people asked about the embedded MP3 player we used to let visitors to listen to songs from their browsers.
For this week’s creative tip, we decided to provide a short tutorial on how to setup and use a free Flash-based music player developed by Fabricio Zuardi.
To demonstrate that player in action we’d like to feature the work of Creativetechs’ newest Mac IT consultant, Dave Corter, who in addition to being an excellent Mac engineer has also published several albums of Didgeridoo music. Click on a couple titles above to give them a listen, or scroll down for a tutorial on how to embed your own music player.
For Web-Savvy Designers: Visit SourceForge.net
For the web developers in our audience, you can skip our simplified tutorial and go right to the source. This Music Player was developed by Fabricio Zuardi and is freely available on the SourceForge site:
Fabricio Zuardi’s Music Player on SourceForge.net
For the less Web-Savvy: A Simple Tutorial.
For our readers who are less comfortable editing HTML, we’ve tried to simplify the process as much as possible. This tutorial will walk you through the basics of uploading a player with three placeholder MP3 files that you can replace or edit with your own music:
Note: We’ve tried to provide a good basic tutorial, however this technique does require a medium-level knowledge of HTML and web publishing to accomplish. You’ll need to be comfortable with uploading and finding files on your website, as well as making minor changes to HTML and text documents.
Step 1: Download and decompress this folder of files.
At the simplest, to get your web music player running, you’ll need to upload a directory to your website that contains your music and the Flash music player. We’ve prepared folder with the files you’ll need here:
When decompressed, you’ll find a folder that contains six files:
song1.mp3, song2.mp3, song3.mp3 — We’ve included three MP3 files as placeholders. You can include as many MP3 files as you wish in this folder. Your song names will vary, however to keep this simple, don’t use spaces when naming your MP3 files.
coverart.jpg — This is a thumbnail of the album cover you wish to display in your player. You can use the same art for each song, or you can include different album covers for individual songs.
xspf_player.swf — This Flash object becomes your embedded MP3 player. You do not need to edit it.
playlist.xspf — This text document is an index of all your MP3 files, including links to album artwork and song names. You must edit this file in Step 3.
Step 2: Add MP3 files and upload this folder to your website.
Add additional MP3s you wish to play into the folder you just decompressed. Upload that entire folder to a new directory on your website:
https://www.yoursite.com/folder/MusicPlayerExample
The name of that directory can be anything you like, but you’ll need to know it to access those files in a moment. If your web host allows it, you may be able to see the files by viewing that URL in a web browser as shown here:
Note: If you don’t know how to upload or find files on your website, you’ll probably need additional help to complete this project.
Step 3: Edit the playlist.xspf file.
The playlist.xspf is a text file that contains an index of the songs you wish to play in your music player. Open this file in a text editor, or in Dreamweaver, and change the areas we’ve highlighted below:
While it can look intimidating at first, you’ll see there is a simple repeating pattern. You can follow this pattern to add as many songs as you wish. Each song in your play list has three details for you to fill in:
Location (Shown in Yellow) — Enter a URL for each MP3 we uploaded in the previous step. (Note: Test the URL by trying it first in your web browser which should play it for you if you’ve go everything correct).
Image (Shown in Blue) — This is the URL for your cover art image. In our example we’ve only included a single cover, however you could include a different image for each song if you wish.
Annotation (Shown in Green) — This is where you type the name of each song. This name is displayed in the music player’s list.
Step 4: Re-Upload the playlist.xspf to your website.
Once you’ve edited the playlist file, re-upload the file to your website, replacing the original one we uploaded in Step 2.
Step 5: Embed a Music Player link in your Blog or Website.
The final step is to embed a link in you blog or website. While there are a number techniques available for this step, the easiest is to add the following code to your HTML or blog post:
<object type="application/x-shockwave-flash" width="400" height="170"
data="https://yoursite.com/xspf_player.swf?playlist_url=https://yoursite.com/playlist.xspf">
<param name="movie"
value="https://yoursite.com/xspf_player.swf?playlist_url=https://yoursite.com/playlist.xspf" />
</object>The areas in Red should be replaced with links to the location of your xspf_player.swf and the playlist.xspf file — both of which should be in the folder you uploaded back in Step 2. And yes, you must type this information in twice (this is necessary for compatibility with a variety of browsers).
You can make your music player as large as you wish, although the minimum size appears to be 400 pixels wide by 153 pixels tall.
Hopefully if you’ve done everything correctly, you’ll find yourself the proud owner of a website or blog with a newly embedded MP3 player.
Enjoy.
