
Grooveshark's new Javascript/HTML interface - codejoust
http://listen.grooveshark.com/#/
======
codejoust
It looks like they're utilizing js templates and localization along with a lot
of jQuery and JMVC.

------
ralphc
Doesn't work on the Galaxy Tab. Tried Browser, Dolphin, Skyfire & Fennec. Best
I get is the spinning pinwheel after I pick a search.

------
Locke1689
Fantastic -- I'm a Grooveshark VIP member and have been since shortly after
launch. I still think it was one of the best investments I've made in the past
couple years -- it's completely changed how I listen to music (especially with
the mobile versions).

I wish you guys the best of luck and thank you sincerely for continuing to
innovate.

------
pvsnp
One thing I noticed is now the ad blocker (on Chrome) catches the ads and
doesn't show them. Since I don't have a VIP account with them and the ads
aren't as intrusive as Pandora/Last.fm services, I decided to whitelist
listen.grooveshark.com to show ads. It works beautifully though, Flash on
Linux was such a pain.

------
tech_and_beyond
I am a big big fan of grooveshark. I work in a user interface team for a large
blue chip company. The amount of work, time, dedication, motivation that goes
into developing an intuitive user interface is huge. This guys just make it
look as if it was a breeze.... If you could do a blog post as you have done on
the architecture part, it will be great :).

------
HaloZero
Question for the developers.

How was JVMC? Was it very useful using the MVC format in your JS, did you end
up using it mainly for classes or did you do the whole MVC format?

Why JMVC over something like Backbone?

A write up on this in a blog would be awesome.

Was Javascript templating useful? It seems to be me that it would be very slow
(though faster than doing async request to servers I suppose).

~~~
encoderer
Source? (EDIT: Nevermind, I see the GS devs on here mentioning it)

As a project lead at my last job I championed jmvc for a new project. We had
mostly good results but there was always a couple developers who were against
it (and who IMO worked to undermine it).

We were building a very ajax-heavy UI for an Ad network. Think.. Adwords UI
meets MailChimp UI.

In our case, my biggest worry was how easy it is to write spaghetti JS. A
classic example is a page with several JS includes and they all are binding to
the same event (or to different events on the same element). You're in one
file working and you have funny results and you only then discover the event
handlers in the other file and then you have to refactor the whole mess. We
actually had that a lot in a previous project.

Also, 2 things jmvc did that excited me:

1\. Easier JS unit tests. 2\. Fixtures! You can build and test the JS without
relying on the server to send you the json you need.

------
keyle
Wow they've done an awesome job. Another massive blow for Adobe, losing the
battle once again (and I'm a flash developer)

------
meese_
The Defacer Safari & Chrome extensions (<http://babelstudios.se/defacer/>,
[https://chrome.google.com/extensions/detail/ikfbfahhinbemoji...](https://chrome.google.com/extensions/detail/ikfbfahhinbemojiloekflkfeeplnibe))
seem to break this (just shows up a blank page)... any way to fix this?

------
decadentcactus
I visited Grooveshark just yesterday, and I just thought it was a flash
rewrite. I did like the theme a _lot_ , but the only sad part was my playlist
was gone >:( (didn't have an account, it was just saved as cookie or whatever)

------
kuldeep_kap
This an awesome step for Grooveshark. Now let the greasemonkey or chrome
extension customization scripts begin. Would love to see, what users come up
with. I already coded new ad remover for my self. Couple ideas I have are as
follows,

1\. Last.fm scrobbler 2\. Lyrics plugin (same as winamp has) 3\. put 'now
playing' list at the right sidebar 3\. make 'now playing' list thinner. etc.

~~~
sundarurfriend
> This an awesome step for Grooveshark. [...] I already coded new ad remover
> for my self.

Shhhh... Don't make them regret doing it. :)

------
lg
Never used GrooveShark before but this is pretty cool. Wonder why they don't
have playlist ratings though (as far as I can tell)? When I do a search for
playlists I'd like to see what other people thought of them before I click
through each one.

------
nik61
This is a totally opaque interface that hardly works at all as far as I can
see. Completely uninformative, dumb, not functional in any real way. What is
going on? Why do all these other think it is great? It is not.

------
n-named
You guys are my number one favorite. I hope you don't get shut down. <3

------
enanoretozon
I love it! I can finally use middle-click to open stuff on another tab.

------
VMG
So what is the plan for Grooveshark Desktop?

~~~
wanderr
It's getting cnverted too, but noy until we can port the API that allows
global keyboard shprtcut helpers.

------
simonista
Really weird scrolling on Safari 5.0.3 on snow leopard. The background
flickers through the search results. Otherwise really cool.

------
neuromancer2600
Congrats on the design! Got me going intuitively. And there's even some rare
songs up. Nice work!!

------
ubojan
I've spent a couple of minutes searching for 'My Music' and 'Favorites' lists.
Just click on your username and they are in menu bar left to the search field.
Beside that, great interface and fast loading.

~~~
ubojan
ooops, I used grooveshark ads-remover chrome extension, which was blocking
side menu

------
MykalM
you have just became my favorite website :)

~~~
jmtulloss
I would be interested why this is what did it for you? I work at Rdio, which
is a competitor that has been HTML/JS/CSS with a flash player since the
beginning. What about this makes you like Grooveshark more?

~~~
rorymarinich
Yay, customer surveys! I like those!

I actually have an Rdio account, because I have a curious bias towards web
sites with sexier names/subconsciously believe I am judged by the names of web
sites I use. When I joined I had the impression that Rdio would only let me
listen to unlimited songs if I paid you money. Now I see that's not the case,
so I'll give your service a go.

First thing I don't like is that you don't give me a big search bar. I'm not
paying you money. I don't want to log in. I even resent Grooveshark's making
me log in to share songs, that's how lazy I am. (I do have a Grooveshark
account, which I rarely use.) So the fact that your front page looks more like
a product than like an easy service, that scares me away.

I think the two most common-looking site designs are: search bars and product
pages. Product pages are universally ugly and I run away from them actively.
Search bars I will type in something and see if the engine meets my whims. So
Grooveshark's front page sells more.

Rdio fails the Cardiacs test: <http://www.rdio.com/#/search/cardiacs/> returns
nothing, whereas Grooveshark gives me almost their full catalogue. Cardiacs is
my general test of band obscurity: If you have them you're bound to have most
of what I want, and if you don't then I trust you less. (You both fail my
Victoria Pipe Police Band test, which is pretty sad, because I request my
fervent demand for pipe music be sated. >:( )

When I go to a band's page, I get something that looks like informational
bullshit. Which is nice — I use Last.fm for my band-related nonsense — but
when I want a music player I want small entries that show me as much music as
possible. If I search a band I want three albums on my screen simultaneously.
Grooveshark gives me a LOT of music, and fast.

But here's the clincher:

When I go to play music, you ask me to sign in or register. BAM! I'm looking
for a new site. I don't like giving out my email address. I don't like picking
new secure passwords. I will only do it if I think you're worth the effort.

Right now I use three sites to listen to music. I use Grooveshark, or I use
Bandcamp, or I use TheSixtyOne. Occasionally I use Pandora but that's WAY
rare. Grooveshark's for general music hunting; Bandcamp is for searching for
and buying music, and listening to musicians I know use it (like Sufjan
Stevens); TheSixtyOne is when I want to explore random music. Each one is
designed specifically to mimic my usage pattern. They look the way I want them
to look.

Rdio looks like a college design project. (I'm not saying it looks bad. I go
to a design college.) While it's pretty, it's not very _functional_ — you have
a lot of design choices that go against the way I'm trying to use the site.
Kind of like when search engines make gangly content-crammed designs that stop
me from actually finding what I'm searching for. I'm going to stick to the
stripped-down tool that does what I want when I want it.

If you want to compete with Grooveshark, go slimmer, more efficient, and
sexier. Make it easier for me to find the music I want than Grooveshark,
easier to share, easier to — anything. If you don't, I have no reason to even
_contemplate_ switching. The good news is that I'm not loyal to Grooveshark
beyond my affection for its design; because I don't have an account or use
more features, I'm not entrenched. If you do something convincing I'd consider
moving over.

Feel free to discuss this more with me, either here or in email. I love
discussing design philosophy.

------
quizbiz
How do they hide the source code if it's all Javascript/HTML?

~~~
aw3c2
Their backend (which you do not see) is much more important than the frontend.

------
jdbeast00
Is there any way to make a grooveshark desktop version that uses this same
html5 interface? I love how the next/prev buttons on my mac work with that
interface (using gs desktop helper)

~~~
cowpewter
Porting the new site to AIR (with the same support for the desktop helpers) is
on my todo list.

------
flexterra
awesome job

------
CopyrightTroll
I switched back to <http://retro.grooveshark.com> It's more refined, runs fine
on Windows, and it has more features. The Javascript version is too chunky for
my taste. I can't see the song titles, overlays don't work, I'm not getting
tips, etc.

------
sgt
Apologies for my ignorance, but I've been listening to a couple of songs now,
and I can't figure out how to purchase them?

~~~
cowpewter
It is a streaming only website. We do have links out to Amazon mp3 and
iTunes...if you right-click a song in the player, there should be a 'buy song'
option, or if you are viewing a list of songs, there is a dropdown arrow on
each row for options - 'buy song' is listed there as well.

~~~
vikramhaer
You should try and make it more obvious, I'm sure the additional revenue from
itunes/amazon referrals would help!

------
asnyder
Apparently the latest version of Opera isn't modern enough. I'm really sick of
projects blatantly not supporting Opera. There's nothing wrong with it.

Update: Come on there's no reason to downvote this. At least explain why
you're downvoting this, for example, Opera killed your puppy.

~~~
cowpewter
We _will_ support Opera, we just didn't have time to test it in Opera before
release and didn't want to claim it worked without that.

I've tried it in Opera, and it's perfectly usable apart from some weird
scrolling issues where you can scroll the whole site off the page, and
sometimes Opera doesn't seem to want to redraw some items in the songlists
without scrolling a bit.

Just click the "Let's take a chance" button when the browser compatibility
lightbox opens and the site will let you in.

~~~
asnyder
Fair enough, but the phrasing suggests your browser isn't modern enough,
rather than Grooveshark hasn't been tested to support it, which can be
somewhat frustrating to a user of the browser, which may in fact be modern and
up to date.

~~~
wanderr
Our copy writers don't always get the why's exactly correct for this stuff, so
I apologize for them for making it seem like Opera isn't modern. In reality,
our current temporary lack of support for Opera is entirely Internet
Explorer's fault. It took all our available resources to get the site working
reliably in IE there was none left for Opera. Which sucks because Opera is
/fast/ and standards compliant...but it has very few users.

~~~
bigOnotation
It doesn't quite sound like that's the intention here.

"We've tested the new Grooveshark in modern versions of Firefox, Chrome,
Internet Explorer, and Safari.

It looks like you aren't using one of these browsers."

I guess ask them, but to me that reads like "Recent versions of these browsers
have been tested. You aren't using something we have tested on."

Good job, though, Grooveshark folk! I love the updates so far.

------
bbulkow
Whatever you think of the user interface, please don't use Grooveshark. Their
business model is either illegal or immoral. You will get mail from copyright
owners telling you cease and desist from accounts that you've closed in the
past - Grooveshark will claim that you're sharing the music, and you have
legal responsibility, not them. Mails to close accounts go unanswered.

And if you work there - shame on you.

~~~
invisible
You are entitled to your opinion, but if you use Youtube you have no place to
talk (and Google seems to think Youtube is pretty legit). It's the same
business model, just a different market.

~~~
lftl
While I don't think YouTube was nearly as explicit about it before Google
owned it, it does at least now tell you on the upload page not to upload
anything to which you don't own the copyright. In a quick glance at
Grooveshark the only place I saw any mention of this issue was buried deep in
their TOS.

They in essence encourage you to upload copyrighted works so you can access
your music anywhere, and from a first glance at the interface it's not even
excessively clear that you're sharing your music with others by uploading (as
opposed to it being a private library).

This of course is all further complicated by the fact that they apparently
have licenses with some labels, and not others. I would presumably be able to
legally upload some music, but not all (I guess YouTube actually has the same
issue there).

Add to this the fact that the RIAA has shown it doesn't mind suing end users
at all, and I wouldn't upload anything to Grooveshark. Incidentally I also
wouldn't upload anything copyrighted to YouTube.

------
invisible
This is an amazing rewrite from the Flash version - well worth the time they
put into this one. They have some really dedicated staff members and some
great talent on the team.

~~~
zalew
Funny thing - everything works amazingly, until I turn Flashblock on
<http://i.imgur.com/HFe8h.png> then all my stuff disappears (favs, playlists)
and this js error hangs my firefox to death.

Besides that, it's awesome, even better than before.

~~~
david_p
Exelent UX, but the flashblock problem is anoying.. I think they sould put
some empty flash animation somewhere on the main page so that you could hit
"play" on flashblock.

~~~
zalew
You can 'allow flash for this site' anyways, I turned off now to see what
happens and oooops :)

------
mynameisraj
Does anybody know what this is written in/on, specifically? JavaScript/HTML
seems a bit vague to me.

~~~
codejoust
As far as I can tell, it's written with PHP serverside, Javascript (jQuery
JMVC) and HTML/CSS. The actual music player is a hidden flash widget, but the
song selection, playback, and entire interface is in HTML/CSS not Adobe flash
as previously. (And the adobe flash version had horrible performance on
linux).

~~~
cowpewter
Hi, I'm one of the developers. You are correct. We have a PHP backend,
actually the same one that we were using with the flash frontend, and are
using jQuery with JMVC, and slickgrid for the huge lists of things. The
invisible flash widget provides both music playback and serves as a proxy for
getting around some of javascript's crossdomain restrictions (like the fact
that you can't make https ajax requests on a page served on http) and talking
to third-party services like facebook and last.fm which have perfectly nice
crossdomain.xml files.

Feel free to ask me any questions, though I don't know details on a lot of the
deep workings of the backend - I'm an Actionscript/Javascript dev.

Oh and thank you so much for _not_ submitting this as 'Grooveshark switches to
HTML5'!! Because it's not. We're not doing anything you couldn't do years ago,
except maybe that JS performance wouldn't have been fast enough for such a
heavy app.

~~~
codejoust
No Problem. I think seen the widget before on make your own player page (which
I've used because the old flash frontend was so very unstable on linux). And -
the switches to HTML5 part - I would only post that if you somehow worked out
how to use the html5 <audio> tag, but that has many drawbacks. Thanks so much
for the work on the frontend - It's one of the few online music streaming
services now that is decently fast and doesn't eat resources on linux.

~~~
cowpewter
It's not the exact same widget, but it does use the same classes. All our
flash playback, in the old flash app, the new invisible player, the even
tinier invisible player on the widgets.grooveshark.com page, and the actual
widgets on said page are compiled with the same core playback classes.

------
pogos
Great work! Linux users now officially love you :-)

~~~
jamesbritt
Grooveshark has been working fine on Ubuntu for me. What were the issues
people reported?

edit: just tried the site in Firefox ; can't even get the sign-in form to
react. :(

Seems OK in Chrome, but at least the Flash version worked in FF for me.

~~~
cowpewter
If you're really having trouble, the flash version is still available at
<http://retro.grooveshark.com>

We tested pretty extensively in Firefox, but there's always things that can go
wrong. Also if you think you have any info that will help us fix it, hit up
the Contact Us link at the bottom of <http://help.grooveshark.com/>

~~~
jamesbritt
Well, if I run FF from a different account it seems OK, so my guess is that
the scripting is not playing well with Greasemonkey or Firebug or some other
add-on.

So, on the one had, the trouble is at my end, but on the other hand most sites
have no trouble with my add-on arrangements, so there's something that's at
least a little sensitive in the GS scripting.

~~~
jamesbritt
Follow up: Disabled add-ons to see if one was causing trouble, and it's
Flashblock 1.5.13. Usually it shows a placeholder you can click to allow the
Flash object to run, but it doesn't seem to show for me.

------
zhyder
How come the RIAA is okay with Grooveshark streaming any music at any time?
Pandora has many more restrictions in their free version to qualify for
"internet radio" licensing rates.

~~~
imtyler
I'm pretty sure there's a legal loophole occurring here. All of the music on
Grooveshark.com is uploaded by the users and Grooveshark is not responsible
for the content. If the song is copyright it's user who broke the law, not
Grooveshark. It's a similar concept to copyright videos on Youtube.

~~~
zhyder
You're talking about DMCA safe harbor provisions, which would only apply if
Grooveshark promptly took down content when requested by copyright owners.
Further, Grooveshark isn't even claiming the service is for "user generated
music". (YouTube is different on both those points.)

~~~
cowpewter
<http://grooveshark.com/dmca>

~~~
sudont
The only music I’ve seen taken down was from the Beatles.

~~~
zlapper
and Pink Floyd

~~~
achompas
can't find Smashing Pumpkins on there either

~~~
tonyarkles
Glad to see that I'm not the only one. I was very confused, I was in a weird
mood and was looking for both Pink Floyd and Smashing Pumpkins, but couldn't
find either of them. Now I know...

