Grooveshark has a large collection of songs and classical music. You can insert a single song, or create and insert a playlist. The embed codes they provide cannot be used directly in a wordpress.com blog, but they can be converted into a working shortcode (see here for general background).
A. Single song
Example:
Search for the song you want. To get to the embed code when the list of results is fetched, click on the title of the song, click “Share Song”, click “Widget” – or click the checkmark next to the song title, hover over “Share Song”, click “Widget”.
Copy the embed code. It will look like this:
Copy the part I have highlighted and turn it into a shortcode this way:
Paste into HTML post/page editor, or in a text widget for your sidebar.
Width can be changed. You can also change the player skin by replacing style=metal with style=wood or style=water or style=grass:
Note: You can insert several songs instead of one, by pasting several song ID numbers together (separated by commas). But the player won’t display all the titles together, so you’ll have to type them in the post. So better use a playlist in that case.
B. Playlist
Example:
To create and save playlists, you need to have a Grooveshark account.
After you create and save a playlist, click “Share Playlist”, click “Widget”, select a basic color scheme, copy the embed code.
Turn it into a shortcode as shown above, only use widget.swf instead of songWidget.swf – plus the height will be different, of course.
Width can be changed. Optimum height depends on the number of songs; but you can limit the length of a very long playlist (in that case you get a scrollbar, as in the image below).
If you want to fully customize the colors, you need to change the hex numbers manually. Here’s which part of the variables corresponds to which area(s) of the playlist player (“…h”= same item when hovering over):
https://wpbtips.wordpress.com/
Another great post Panos! I’ll be experimenting with this one very soon.
BTW, love the new look!
Thanks, and thanks!
Hi Panos! Very interesting…
I’ve put a link on my blog.
Wish you a nice day. lil.
:-s
Comment ça “false gravatar profile”?
Encore une nouvelle “grande merveille”?
Bref, c’était la vilaine souris. Bonne journée ;-)
Hi Panos,
Thanks for reporting this beautiful site and thanks for the explanations to fit into wordpress.com. !
Dear greetings.
Franco.
Hi guys, and thanks!
(@lilmaouz: I enjoyed the “Si vous n’osez pas” notice!)
wonderful! thx a lot
Hi Panos !
Thanks for this tips !! I could add a music to my home page this way.
I didn’t know Grooveshark, I knew Spotify wich is quite similar and Deezer for some french plateform but not this one.
I’m glad you wrote about it !
And thanks for introducing me to Spotify and Deezer, which I didn’t know! Problem is, Spotify says not available in my country yet, and Deezer doesn’t seem to offer a way to insert songs in your blog…
Deezer is convenient where you are blogging on “Over-Blog”, you can add a player this way but most of time I don’t use it. I don’t like the library much and I can’t find what I’m looking for most of time… I do not listen a lot of pop music that must be the reason !
Spotify looks a lot like Grooveshark in many way ! Except that you have to download the software on your computer and sign it to listen music. I know that it’s not available every where and I think this is a shame… If I could say !
Where are you coming from ?
Greece.
That’s too bad that Spotify isn’t available in Greece! I do hope it will change soon !
Hello Panos!
I arrived here through English Thoughts’ blog. I have thought about his idea of music in the background, when somebody peeps into my blog, but never did any investigations on how to go about it. This could be the start.
I have not followed your instructions yet, so my questions below could be silly. Assuming, I have followed the instructions above and I see a ‘PLAY’ button to click for the music to play, what I would like to find out is –
* Is there a way the music can play automatically when somebody browses through a blog? Of course there can be a ‘Stop’ button somewhere if somebody does not want to listen to music.
* When I click on a post and it takes me to another page, the music stops. In other words, it plays only when I am on the home page and not otherwise. Is there a way to let is play, no matter which page I am on??
* Is this feature only relevant to ‘The Morning After’ theme?
Thank you for clarifying.
Hi,
a) Music that starts automatically when one visits your blog is possible but not recommended: many users prefer to, or have to, browse in silence, or while listening to the music they prefer. Imposing some music to them guarantees they’ll rush away faster than any stop button and never visit your blog again.
b) Yes, music that continues to play when a different page loads is not possible in a wp.com blog.
c) Inserting an audio player is like inserting a video or an image: nothing to do with which theme you’re using.
Thank you Panos!
In fact, I never thought of it as imposing some music on visitors. But what you have said, does make sense to me. What I find soothing, may not be so for others. And the risk of losing the few visitors I have right now, is high! Thanks for making me see that point. Appreciate your feedback. Take care.
Oh nice music choices. Thanks!
Alice:
We are going to inter my parents’ ashes this week, and that song reminds me of how my mother would describe her bad hair days.
Tom Waits is perhaps an acquired taste, but one of mine.
dunno why that video didn’t work
maybe this:
Tom is my favorite songwriter and performer – if I start posting songs of his there’ll be no end!
Amazing lyrics too. One of my (many) favorites:
“and the things you can’t remember tell the things you can’t forget”…
Beautiful lyrics.
So no end to your favorites? That would be very fine…
We siblings, and our nieces/children, interred my parents’ ashes this past week, way up north. Out of context, those words are appropriate for the experience.
Also. My husband found a book in my parents’ house about the 1939 Winter War in Karelia, a book I gave to my father some years ago. My grandfather abandoning my (child) father to fight the Russians, brave but pointless. My aunt escaping to Estonia to marry an alcoholic British airman to escape. Other sad things…
“and the things you can’t remember tell the things you can’t forget”…
So here’s a sad song that pretends it isn’t…
Ah and oh! That clarinet calling us to dance, to remember love, experience our passion
wonderful, yes?
again—
if only:
it could be a honeymoon, golden silver—green, again,
sans regret.
I’d not heard that song before.
In retrospect, (the Alzheimers and all), I think my father was a lost little boy all his life. Such unimaginable and unforgivable things do happen,
I recently migrated my blog from Blogger to WordPress and just realized the embed code for some media (Grooveshark, TED talks) was no longer working. Thanks very much for your instructions – crystal clear and quite effective!
You’re welcome! WordPress.com doesn’t allow us to use javascript, iframes or flash embed codes, but at least flash can be embedded via the gigya shortcode (although WP doesn’t officially acknowledge that).
my Grooveshark player and other teachings of sir panos. http://orangekamote.wordpress.com/. thank you sir! (“‘(^,….,^)”‘)
What code should I use to make it play automatically? or is that not possible? :-/
No, and you shouldn’t be looking for this. Copying from another post of mine:
Many users like to –or have to– browse in silence, or while listening to the music they prefer; imposing some music to your visitors is a guaranteed way to lose some of them.
I’m having some problems with the grooveshark embed code. When I copy the code from grooveshark I can not figure out how to make it a shortcode. Here is what I’m working with:
The code I copy from grooveshark:
[Code relic removed – P.]
My attempt at making it a short code:
[gigya src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250" height="40" "flashvars" value="hostname=cowbell.grooveshark.com&songIDs=28906696&style=metal&p=0" allowScriptAccess="always" wmode="window"]
My attempt gives me a widget that says no song found.
Thanks in advance for the help.
a) You can’t display code by simply pasting it in a comment – see point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
b) Check my post more carefully. You’ve written this in the shortcode:
“flashvars” value=”ETC ETC
Should be:
flashvars=”ETC ETC
Awesome thanks! keep up the great tutorials.
You’re welcome! I try…
Help after I do it mine says no song found!
@MindlyParkdonme
“flashvars” value=”ETC ETC
Should be:
flashvars=”ETC ETC
@KPM: I can’t help if I can’t see the problem. Either try again so I can check your post, or show me the code you tried to use – see here how (point 4):
https://wpbtips.wordpress.com/comment-guidelines/
Hi, Panos! Me again^^;;
Now I’m trying to put a simple player in my blog and this player you talk about here seems perfect to me. So I’ve created an account, a playlist and tried to make a widget… but probably they changed something ’cause the code isn’t similar to the code I see here… i.e. it doesn’t have an “embed src…” part, so I don’t know what should I do.
I put the code I’d like to use in this link http://textsnip.com/43a739
Can you please see if it’s still usable and eventually make a code with shortcode out of it?
p.s. Sorry (and thank you), I swear it’s the last widget I bother you with^^
Shortcode here:
http://textsnip.com/43034f
Thanks for letting me know – got to update the post now…
Thank you a lot for the widget (and “dou itashimashite” for the other thing) ^__^
Panos you do a great job with this blog. I’ve been sing the gigya embed code for a while now, but for whatever reason I can’t convert this code. Any help would be much appreciated.
http://textsnip.com/640f39
Shortcode here:
http://textsnip.com/761cee
Technique explained here:
https://wpbtips.wordpress.com/2010/07/22/gigya-shortcode-3-widgets/
@Panos you are the man. Thank you!
Thanks a bunch. You should add a note at the top of your post indicating the Dec. Update and provide an updated example for the playlist option to make it easier. I used your directions here on my WP blog HeyJono
[Link removed – P.]
You’re welcome.
I am pointing to the Update at the right spot – doesn’t have to be at the beginning as well. And the model code and shortcode I’m giving in the Update are the same for single songs and playlists.
I removed your link, as it was a link to a preview page: other bloggers cannot access your dashboard.
If there are multiple players per page, is there a way to get one to stop when another starts? There must be some code for that.
For a wp.COM blog, most definitely no. Possibly yes via javascript in a wp.ORG blog – re which see point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
Thank you, thank you, thank you!!
Hi Panos,
great blog!
I’m going to ask you something about a wp.com blog.
On July 8, 2011 when “knot2share” asked you “Is there a way the music can play automatically when somebody browses through a blog?” you told him/her “a) Music that starts automatically when one visits your blog is possible but not recommended”
and this answer were encouraging… :)
On October 25, 2011 when “bravobellydance” asked you “What code should I use to make it play automatically? or is that not possible?” you told him/her “No, and you shouldn’t be looking for this”
and this answer weren’t encouraging at all!!! :(
Do you know if there is any parameter to insert to the “flashvars” of the Grooveshark widget? If so, can you tell me which is and how to set it?
Thanks in advance!
Hey Panos,
I’ve found it by myself!!!!
The parameter to modify to enable the autoplay feature is ‘p’ and must be set as follow:
– 0 (default – disable autoplay)
– 1 (enable autoplay)
Hi,
Yup, that’s it, but once again I’ll advise against it. Apart from what I’ve already said in previous comments, think of how annoying it is when I visit your blog, your music starts, then I click to view another post and the music starts again, and then I click on a category and the music starts again.
Panos, you’re right. It could be really annoying that when someone visit a blog, the music starts and starts again, but if you’re creating a blog for someone who asks for having music, you try to make it possible. That’s all!
Thanks for your response
Hey, thanks for the post… really helpful in getting grooveshark to work on my blog… however I tried your advice in changing the hex numbers myself to get the exact color scheme I was after and now the songs playlist skips to the 4th song when I hit play… (I haven’t posted it yet, I want to work the bugs out before I put it up)… Is this normal? what am I doing wrong?
Thanks in advance for the hopeful help
tonaldiscord.wordpress.com
Hi,
I can’t tell what’s wrong if I can’t see it! You should either post it or show me the shortcode. For the latter, use Textsnip – see point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
I think I figured it out (though I dno’t know why this would make a difference)… when I change the variables within the wordpress editor it acts wierd, but if I change the variables in a text document then move it over it seems to work fine… also I’ve been changing all the hex codes to lower case… again don’t know how that would make a difference, but apparently it does.
http://tonaldiscord.wordpress.com
Hi again Panos, just wondered if you’d be able to help with this problem I’m about to highlight in the next comment.
You see the problem is, when I comment using my Facebook (or Twiter) login, and then update my profile, the earlier comment isn’t updated.
So despite having used the same log in details for these 3 comments, it looks like 3 different people have commented – at first glance at least. Sorry for having posted this in your excellent Grooveshark post, I’m fine with you deleting these 3 comments – partly came here to see if i was able to replicate this problem elsewhere
@ZDUECK: None of the two should make any difference. What does “acts weird” mean exactly?
@SIMON: I’m seeing the same avatar on all three.
Thank you so, so much for posting about the Grooveshark issue. Even though I am following your directions, I’m doing something wrong. Would it be okay for me to post my code here for feedback? (I have no idea how to use text snip.)
Thanks! I may have found you in order to figure out this issue, but I am following your blog because you are wonderful at explaining complex (to me) ideas in a clear fashion. That’s such a gift.
You’re welcome and thanks!
No you can’t post the code here, because it won’t show up correctly. Textsnip is very easy to use (once you sign up): you just paste the code in the box, click Get my URL, copy the URL, paste it here.
If you don’t want to sign up with them, you can use the other way I’m suggesting in my comment guidelines: the sourcecode shortcode. Or, roundabout way: paste the code in a Word file, upload that file to your blog via Media > Add New, copy the file URL, paste it here.
I am learning all kinds of new things from you today (and yesterday)!
Okay, hopefully I did this correctly:
http://textsnip.com/5e4fcd
This is the original source code for the playlist.
And…
http://textsnip.com/ee1126
This is what I get when I follow your directions? I’m doing something wrong– I just don’t know what, exactly.
Correct shortcode here:
http://textsnip.com/258f46
AH! Now, I understand! (I’m really slow sometimes.) Thank you so, so much for helping learn this new thing, and for introducing me to textsnip, as well as taking time out to show me where I had stepped off in the wrong direction!
Thank you! A thousand times, thank you!
Because of my technological snafu, I pushed back the post in which the Grooveshark playlist was going to appear, but I will be adding an annotation at the bottom that day with a link to your blog. That feature will run two weeks from today. (Most of my current readers are also WordPress bloggers– I know they’re gonna want to stop by and say howdy!)
Meanwhile, thank you so much! You are a wonder!
Panos – your post is a great pearl.
Do you know were I can get a list of all blogs that use audio/background music within them ? Do you know how many of these exists ?
Erezp
Thanks!
I don’t think such a list can exist. Why are you interested in this?
Thanks Panos!
Hi,
First of all, thank you for your tips. Thanks to you I can use Youtube on my WP. I’m french so excuse me for my miserable english. I try to put a grooveshark playlist on my blog but it doesn’t work. I can only see the first song playing. Could you help me ?
Here’s the code:
http://grooveshark.com/widget.swf
I don’t know what i’m doing wrong :(
When I click on “Share” there is no option to click on “Widget” after. Do I have to have something installed in my wordpress to get that or can I just grab the embed code from the grooveshark site itself. When I do I don’t see the word “embed” in the code neither.
http://textsnip.com/8c49ea this is my code
@NR:
I’m not seeing anything miserable in your English!
To show me code you need to use Textsnip – see point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
@ST:
The embed code doesn’t have to include the word “embed”.
Correct shortcode here:
http://textsnip.com/199594
Thanks for your help Panos. It’s exactly what i’ve done but it didn’t work. I managed to post it finally but after hours and hours, I found out that it worked only if I replaced the colour code (all the numbers) by &styleCOLOUR (I chose metal)
Ah sorry: I’m so used to doing this that I neglected to test it before converting it. It will work (with the colors and everything) if instead of this:
songWidget.swf
you write this:
widget.swf
Hey,
Thanks for the fast response, however, the code didn’t work exactly. The player wasn’t working but a box did appear. It was very broken.
Perhaps there’s a misunderstanding. I’m talking about this shortcode:
http://textsnip.com/6bc715
Works fine in my tests blog.
It works! I’m not sure what’s different from the other snippet. How did you get this? I have to do another playlist and would like to know how to do it on my own.
ah I see…it’s all in the playlist ID. Using your snippet I can just change the playlist ID based on whatever it says in the embed code. Thanks!
Yup, once you’ve got a working model you save it in a text file and use it again, just by changing the playlist ID number (plus maybe the number for the height or the colors).
Hi, there. Would you mind explaining in more detail the step you wrote with this?
Copy the part I have highlighted and turn it into a shortcode this way:
[gigya RED PART HERE ]
I can’t tell which part is highlighted (both are red). I don’t know what a gigya is. Any chance you could break this step into the smaller steps you took and show us the completed code you wrote? Thanks!
Hi,
First, the red part is the part I had highlighted in red – all of it. Second, you didn’t notice that I’m pointing to an update. So forget that section and check the section under “Update Dec. 2011”.
Thanks Panos. I found this page really helpful. One question, though. I like those smaller skins a lot better (like metal, water, etc.), but they don’t have a volume control. If someone has their main computer volume turned all the way up when they play the song, it’s way too loud. Do you know of a work around to this problem?
On a side note, I just read an article that said GrooveShark is currently being sued, so all this might be for naught anyway.
You can’t do anything, since the player and the code don’t include volume controls.
And that’s one of the reasons why one shouldn’t use autoplay when inserting audio.
Re your sidenote, I’m adding this link:
http://en.wikipedia.org/wiki/Grooveshark#Licensing_and_criticism
Let’s see what happens.
HI – I read the post, but I’m still having trouble understanding what part of the code to past into the text widget box. I posted my code below. Could you help me figure this out?
thanks
Liz
[Code relic and redundant comments removed – P.]
a) You need to correct your usename link: it links to your gravatar profile instead of your blog.
b) See point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
http://dev.s-trip.com/live/must-listen-–-punta-cana-party-package-–-dada-life/
Hi, the code is not working. It worked on our old wordpress blog but not on our new one. Not sure if it matters but we are using 3.2.1.
Hi,
Yes it matters. See point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
Please: http://inemptybuildings.wordpress.com/ how to align maps w/out upgrade?
PS thought of you while sending :
this afternoon
ME:
When using a featured image from a url, there is a button that says: “insert into post”. There is no option to “use as featured image”.
Since you asked, whats on my mind, it’s this: “I hope that someone will read, understand and answer me helpfully this time.”
You see, whenever I ask for help, the happiness engineer invariably has not understood my question. It appears s/he scans over my problem, and assumes s/he undersands it. Therefore the answer is not helpful.
Is there some way I can phrase my help requests so that you unserstand them?
I thought about rephrashing my question in two or three different ways, but maybe that’ll come across as confusing, and its certainly time consuming for me.
I also thought about saying it with images, and I do often add links to screenshots, but this process is laborouious.
I also thought about starting requests with a phrase like: ‘Please read my problem and ensure you understand it before you reply.’ It sounds presumptious though, don’t you think.. Not the tone I want to be using when asking for help…
Maybe you could offer a basic help and a more advanced help, Something like:
“How tricky do you think your problem is out of 3?”
What do you suggest I do to get better help?
Simon.
Ah ha, I’m getting somewhere with tables thanks to this:
https://wpbtips.wordpress.com/2009/04/06/positioning-shortcode-objects-pt-1/
“Invariably” is an exaggeration, but it happens. Enjoy:
https://wpbtips.wordpress.com/2010/09/20/for-amusement-only/
As for your questions,
1) You can’t set an image as a featured image if it’s not uploaded from your computer to your blog.
2) The default alignment of a Google map embedded in a post is none (positioned left, no text wrap). If you want it left-aligned (positioned left but with text-wrap), you can do it this way:
<div style="float:left;">
MAP SHORTCODE HERE
</div>
For right alignment you obviously replace float:left with float:right.
If the text you wish to display next to the map is shorter than the map, paste this at the point where you want the wrap-around effect to stop:
<br style="clear:both;" />
Or do you want center alignment?
PS Please paste your questions under relevant posts, so that they can be of use to others as well.
Reblogged this on KnowUrPC | ConoceTuPC and commented:
¿Por qué Grooveshark ya no es soportado por WordPress.com? Muy buena pregunta, pero aquí está la solución.
Sé que el que esté en inglés no funciona mucho, pero haré mi esfuerzo por traducirlo pronto. I promise.
Hi @Panos!
I just rebloggled this post ’cause I thought it’s awesome. Sadly, my blog has spanish-speaker readers… so I’d like to translate your post to my readers.
I’ll wait for your answer :D
Hi,
Yes you can. I don’t allow re-posting complete articles, but a translation is a different thing.