music player tutorial.
so there are two things that i have been asked a lot
about with my site, first off my dropdown navigation. second, my music player... and today we are learning how to code it!
i found the tutorial years ago, but since then the site has gone under, i ask only for a credit link from you so that others
can learn this as well! so here we go! first
you will need to download and unzip: this folder
we will find the playlist.xspf file and edit it. after quickly looking over the file you can see making the tracklist is easy, between the location tags
you simply put the link to your .mp3s, in the image tags
you put the image you want displayed when each track is playing, used most commonly is album covers for each song, the image size for this needs to be 130x130
and the only format that will work is .jpg
. finally, in the annotation tags
you have your song titles. so simply change each of the details to the songs you would like to use add more tracks or remove some and then save it as playlist.xspf now
we will move on to the next step. place the following code wherever you want your music playlist to be displayed:
you will need to modify this file
in a few different places. wherever you see:http://LINKTOYOUR/playlist.xspf&autoplay=true&repeat_playlist=true&player_title=KICK&playlist_size=6
where it says http://LINKTOYOUR/playlist.xspf
you need to insert the link to your playlist.xspf file and
where it says playlist_size=6
you need to change the number to the number of songs you have in your playlist, if you have added or removed tracks in your playlist.xspf file you will need to modify this, if you have kept the number of tracks the same, you should not have to modify this number, however many songs you have in your playlist is the number you should put there. ex. if you have 12 songs in your playlist, you need to modify the number 6 to 12. now we upload it and test
it looks like we officially
have a cool playlist so turn the music up and give yourself a pat on the back!
if you would like to suggest a new tutorial or are having any
issues, feel free to contact me