edwardrock.com - Music Player how-to

Music Player how-to

Ive been getting a lot of questions on how the music player on my site works. As you might have guessed (from listening to my music blog ) I love mash-ups, I find it fascinating how you can take two/three/four/however many songs and put them together to make something unique. That was the same approach I took to "mashing" the music player on my site together. The first step I took though was figuring out exactly what I did and didnt want. What I didnt want was a bulk flash player/play-list that ran off xml.There are a bunch out there already, like the XSPF Player (which I have pushed/pulled apart to make this with)

click continue below to read more and see a working examples of the player.

This text is replaced by the Flash movie.

I have nothing against that player (more of a music jukebox), but it was just not what I was looking for. I wanted something that was super small in file-size, and that could link up to ANY song I posted on my site. There are players out there right now (mostly on music blogs) that allow you to post a small player that streams in the song, and you can post it as many times as you wanted (the Audio Player Word-press plug-in works amazing). I would have used that, but I wanted something that would also show album artwork, so I turned to the one place I always turn to when I need help/suggestion.

Yayhooray!

After a lot of creative searching (since the search is broken..only title search works, I guess the Jake's don't love us anymore) I came across the amazing niftyPlayer (built by tvst) which looked perfect...except it didn't have the ability to link in album artwork, or display the song name. It was a start, all I needed to do was figure out how to add in those two other options I wanted and I was set. Javascript to the rescue!! Once I figured out how to get it to swap out an image

function replaceimg(n, s) {document.images[n].src=s;}

and replace some text

function setTitle(str) { document.getElementById("musictitle").innerHTML = str; }

all i needed to do now was make it so i could easily upload music/album artwork (re-size the artwork to 50px x 50px). Thanks to expression engine, that was easy. Simple right?. Thanks to everyone that helped with this!!

Update

I've uploaded an example of the player I use here on my site. click here for the zip file

filed under:Site News Personal Projects ^ top

Oct
19

posted by Ed at 10:20 AM

So you tweaked the XPSF player, sorry, but i’m not into java or programming, but can you please describe the howto more?
Thanks

by milo on Wed, October 25, 2006 - 11:27pm

I was wondering if you could put the files online to see how it kinda works, or mail them or so. I really like this player but I would like to change it too, so I hope you could somehow show me the files =)

by Susan on Fri, October 27, 2006 - 1:43am

milo & Susan: There are 2 different players that I am talking about in this post. I can see how I might have made that confusing. the first player that you see is a “tweaked” version of the XSPF player, the reason I tweaked it was to edit the colors and look, other than that I did nothing different. If that is what you are looking for, then download the extended version of the XSPF website. From there, its just a matter of editing the movieclips.

As for the player that is here on the site, it is a mix of a couple of different sources, which I linked to in the post.

Ill see what I can do as to putting together a zip file of all the elements.

by Ed on Fri, October 27, 2006 - 4:03pm

Oh, ty, I got it =)
Didn’t see the link to the music player’s flash file on the site.

by Susan on Tue, October 31, 2006 - 8:46am

"Ill see what I can do as to putting together a zip file of all the elements.”
That would be very nice, as you did a very good job.

by milo on Thu, November 02, 2006 - 1:15am

I uploaded the zip file, see the last line of this post for the link.

by Ed on Mon, November 06, 2006 - 5:32pm

Ahh, thank you Ed, looks good, so i need to place the two .js scripts in my .js folder, ad the sript code to the header, but do i need the meta charset ascii? As i’m using utf 8.

by milo on Mon, November 06, 2006 - 11:35pm

you do not need the charset, i just left that in from the code i copied. good luck and let me know if you need any help!

by Ed on Mon, November 06, 2006 - 11:51pm

I downloaded your folder musicplayer_example. Player.htm instructs “Select a song from the right,” and clicking on the only link there places an album cover and replaces the first line with the name of the sound file. That illustrates the Javascript for image and text replacement, but the sound file that plays is the same whether one selects the link on the right or not. I have tried adding a link for a second song (with new variables inserted), but the player stubbornly plays the Betty file. Would you please post an example where there are two links and the player plays whichever song is selected?
Thanks!
Chris

by Chris von Rosenvinge on Mon, July 30, 2007 - 10:18am

It turns out that the trouble I was having (see comment above) was only that I was trying to run the sound player on my local computer, not over the Internet. Doing that runs afoul of the security measures new in Flash 8. Flash 8 now won’t allow Javascript to load a local file into a .swf file without proper permission. Confusingly, the error message one gets refers to accessing files over the Internet, but it applies to local files.

by Chris von Rosenvinge on Tue, July 31, 2007 - 10:36am