minzmusic.net

replacing the myspace music player

i spend the best part of yesterday working on my web 2.0 credibility. sites like myspace and soundcloud are nice to keep your fans informed, but it's quite a drag to keep everything up to date everywhere all the time. ideally, you would just have to update one site and have the update automagically mirrored on all other sites. so that's why i tried to replace the default myspace music player with soundcloud's. while in theory this should be easy, it made me feel like a hacker. delivery pizza and all. but the result makes me proud.

you will need: a myspace band page and a soundcloud account with some tracks on it. a myspace page is quite common to have, but soundcloud is a rather new phenomenon. if you need an introduction, check out one of my previous posts in which i talked about the advantages and disadvantages of soundcloud. most problems have been overcome since then, so soundcloud could be a winner. even if you don't intend to use soundcloud to manage your contacts, you could just use their superior audio player and make it available on other sites by means of the soundcloud audio player widget.

the resulting minz myspace page

to insert that widget into myspace, first create a soundcloud set with the tracks you want on myspace, click 'share' and grab the code. now insert that code into the 'bio' section of the 'musician details' on your myspace profile and you'll have a page with both the default myspace player and the soundcloud player. if, like me, you want to get rid of the myspace player, insert the following code as well:

<style type="text/css">
object {display: none;} div.player{display: block; height: 228px; width: 400px; position: absolute; op: 230px;} div.scplayer object {display: block; height: 228px; width: 400px;}
</style>

unfortunately, this code also removes the freshly added soundcloud player. so you also need to insert <div class="scplayer"> before the soundcloud code, and </div> after it. finally, you can set the width and height of the player to taste by adjusting them in the code above.

the results seem to work fine in both firefox and ie7, and on both windows and mac. of course, this might not work on your own myspace page, as there are too many variables. but probably, with a bit of fiddling, you can get this to work. if you like it quick and dirty, soundcloud also offers a way to easily share your soundcloud audio on myspace. it's as quick as clicking a link. the dirty part, though, is that it doesn't remove the default myspace player.

so there you go: an easy to update, nice looking and high-quality audio player on your myspace. and with a free soundcloud account, you can add up to 10 tracks, each with their own 'buy' button. so you can remove that beatport player from your myspace, too.

as you can see on my myspace, i've also added springwidget's rss reader, to feed my blog to it. getting it to work was a bit tricky, but very similar to the soundcloud widget. and now that i have it all set up, i can feed my blog and audio to every social networking site out there and keep everything up to date easily. or at least, that's the theory.

update: oliver chesler of 'wire to the ear' pointed out to me that safari for mac still shows the myspace player. the reason is a bug in safari that can't be worked around. it's a shame, but given the fact that only 3% of the browsing population currently uses safari, you shouldn't worry too much about it. i know i don't.

Creative Commons License


26/04/2009 | tags:



10 comments

nice job!

and the thx for the info

visitour - 28/04/2009

handy info.. nice one!!

chelo zambelli - 22/06/2009

Hi,
nice article.
Could you tell me how you made the about box being really at the top? For me there is still a gap above the box (20 px or something).

fladd

fladd - 18/08/2009

try to add this to musician details, between the <style> and </style> tags:

.note {bring the tables up more}
td.text table {position:relative; top: -25px;}
td.text table table {position:static;}

play around with the -25px until it works for you. i don't guarantee though that it works on your page, it's quite a hack.

minz - 26/08/2009

thanks for this. one question tho- i'm trying to get a twitter widget on my page and it won't load. might the soundcloud player extra code be blocking it? thanks in advance.

greg - 24/12/2009

i think it does. just try to add

<div class="twitterwidget">

before the twittercode, and

</div>

after it. that's the best i can think of.

minz - 25/12/2009

Hi, really nice -i gave it a try but unfortunately the "upcoming shows" section is now also gone -replaced it with a picture but it's really a pain in the ass editing -any ideas?

fabian - 18/02/2010

'm trying to get a photobucket to scroll on my page and it won't load. might the soundcloud player extra code be blocking it? Do I just add



before the photobucketcode, and



Does the same thing work for posting youtube videos

fanatic - 01/04/2010

How can I move the SC player on top?
Before the upcoming shows section?
It could work with position:absolute
But when I hide the Myspace Player the content mooves up.
Please help.
Thanks

elmuerto - 12/05/2010

sorry guys, i can't help you. i did some pragmatic hacking at the time to get this to work for me. no doubt my code does some weird things to other parts of your myspace page, but that's the way it is. please remember: i'm here to make music, not to fix myspace ;)

minz - 01/06/2010



email is required (only used for authentication)

  
 remember me




 



-->

back to top