\


Computer Literacy
Audio Project 2B: Webpage & Playlist


Part I: Setup & Playlist

1

Copy audio01.html from your audio01 folder to your audio02 folder.

Rename audio01.html to audio02.html

The web pages for the Audio projects will be very similar with only a few changes.
2

Copy xspf_player.swf from your audio01 folder to your audio02 folder.

 

3

Right click on the link for the XSPF Playlist and save the file to your audio02 folder.

Using Notepad, open playlist.xspf (you can also drag the playlist.xspf file into a blank Notepad document to open it).

XSPF Playlist

4

This is a template for a one song playlist.

At the top of the playlist, change the following:

  • <title> {Your Name}'s Playlist
  • <creator> {Your Name} [under name of the author]

Each <track> ... </track> block of code contains the information for one song. Since this project will have ten songs, copy and paste the <track> ... </track> block of code nine more times and save the playlist again.

For each of the ten tracks, add the following information to the code:

  • <location> name of the mp3 file
  • <creator> Name of the artist or group
  • <album> Name of the album
  • <title> TName of the song
  • <image> Album cover art

Save the file again as playlist.xspf (not playlist.xpsf.txt or playlist.xpsf.html) in your audio02 folder.

<track>
   <location>mp3name.mp3</location>
   <creator>Artist Name</creator>
   <album>Album Name</album>
   <title>Song Title</title>
   <image>albumart.jpg</image>
</track>



Part II: Web Page

1

Open audio02.html in Notepad and make the following changes:

<title>: Audio Project #2
background-color: #<same color as your title canvas>;

Everything else can stay the same.

 
2

Save your audio02.html file.

Check to make sure the songs play and the album art is displayed when you click each song link.

 

 

3 Add a link to your index.html page under Audio Projects Audio Project 2: 10 Song Playlist