search

radiant-player / radiant-player-mac

:notes: Turn Google Play Music into a separate, beautiful application that integrates with your Mac.
http://radiant-player.github.io/radiant-player-mac/
MIT License
3k stars 263 forks source link

Lyrics work in progress #536

Open BarakaAka1Only opened 8 years ago

BarakaAka1Only commented 8 years ago

I've seen this post: https://github.com/radiant-player/radiant-player-mac/issues/267

And i wanted to try to implement this i am not a full ended coder when it comes to making os x applications but i do know my way around js, css etc

So I went ahead and played around with the source code and Google and got this:

now this is a work in progress nothing fancy, what it's using at the moment is Google Lyrics.

Google Lyrics are Lyrics that Google put up themselves inside the play store when viewing music. It obtains it by the song data-id and matches it as if you were previewing the song and what not

For an example: Google something like "ariana grande almost is never enough lyrics" and you will see the lyrics with a link to see the full lyrics

Google doesn't have every single song with lyrics its "random?" either it has it or not simple as that.

I tried to implement other services like AZ Lyrics and i couldn't because since the WebView is on https:// (https://play.google.com/music/) i couldn't get past the header access-control-allow-origin so that was a bust which is why i am using Google Lyrics.

What it is using:

jQuery ( i know not the best thing but it works couldn't get past the finding of selectors without it ) Github Fetch and my own spin to get the lyrics ;)

But again this was just a test / random thing but it works :)

If you guys want to give it a shot here you go:

https://www.dropbox.com/s/rhorpgmvit8gc2v/Baraka%20Lyrics%20Radiant%20Player.app.zip?dl=0

Let me know what you guys think and again this is just a test / work in progress nothing official i suppose?

Note: There will be times when the button will not show, its because the dataid in the url was not found therefore there is a "404" but keep trying other songs it will show up with available or not

BarakaAka1Only commented 8 years ago

UPDATE

So i wanted to move away from jQuery (shouldn't haven't used it in the first place =\ ) so i completely revamped it using native javascript fully!

Change Log:

You can download the updated version here: https://www.dropbox.com/s/qrd3m38c0nz2kda/Baraka%20Lyrics%20v2%20Radiant%20Player.app.zip?dl=0

Let me know what you guys think :)

chrismou commented 8 years ago

Cheers dude, screenshots look good. I'll check it out properly this evening.

Might be we can do something with the styling to look a bit more like the theme, but functionality wise it looks great.

chrismou commented 8 years ago

Have you put this through as a pull request?

BarakaAka1Only commented 8 years ago

@chrismou thank you :)

Well at the moment this was just a random thing showing that it could be done well at least using Google (as i explained above). As for the styling yes it could be better, i at least added a material style like on it so it matches at least throughout. Everything there is added in the main js, meaning i didn't have to edit anything else.

I haven't yet put it as a pull request as i wanted to further work on it more to come up with something that is solid (not saying what i have not isn't solid as it is for now) but if all goes good with it i'll go ahead and do a pull request :)

chrismou commented 8 years ago

Just had a quick of the download then - clicked through about 20 songs and all of them came up as Lyrics Not Available.

Even tried the Shawn Mendez song in your screenshot - nothing came up. Could it be Google lyrics are limited by country?

Also tiny note - once the "lyrics not available" button appears, it doesn't disapear, even if you stop the song and navigate away. Assuming you're controlling this all in JS, you might be able to hook into .on('change:playback') in gmusic.js to catch the state change and hide the button (https://github.com/gmusic-utils/gmusic.js/blob/master/README.md#onchangeplayback)

BarakaAka1Only commented 8 years ago

Very interesting, not sure if it is limited, Here is the main link to the song / lyrics (Shawn Mendez)

https://play.google.com/music/preview/Ts756y2nntfdp4dnakkc2xtmuj4?lyrics=1

If you are able to see that then it should have worked.

Thank you for that link, right now it's using .on('change:song') i'll be sure to adjust somethings.

Also i did have some debugging in the console, by any chance when viewing the console do you get any error following:

'change:song => Lyrics parsing failed' => then error message ?

If so would you mind posting the full error, it could be because it's not catching the song id not sure but i have tested it even before posting this etc and almost all the songs i tried worked but again Google Lyrics doesn't have every single song containing lyrics.

This is how it works, when a song is playing with in the

GMusic.SELECTORS.info.artistId

it contains a data-id that Google Play places via meta data to match the song inside the Play Store from there i strip the main id that is 27 characters long (seems that it's always that long) and apply that to the preview link following

https://play.google.com/music/preview/SONG_ID/ALBUM_ID

from that point Google has a list of which songs are available for purchase with the "buy" button i take the song.title object to match it and get the button "buy" link and strip the link to get the full song id by parameter rdid= and then with that song id i take that to get;

var SONG_ID = 'Ts756y2nntfdp4dnakkc2xtmuj4'; 'https://play.google.com/music/preview/'+SONG_ID+'?lyrics=1'

and from there i go into the section where the lyrics are in the DOM via .lyrics

and push it to the modal.

MarshallOfSound commented 8 years ago

@BarakaAka1Only FYI I get a "Lyrics Unavailable" error message on that link. It is probably location locked by Google to be US only

BarakaAka1Only commented 8 years ago

@MarshallOfSound well that clears things up had not idea. Will have to look to see what i can do, i would have used something else like AZ Lyrics but due the header access-control-allow-origin on Google couldn't get past it.

MarshallOfSound commented 8 years ago

I wrote a funky regex that works on http://lyrics.wikia.com/wiki/Lyrics_Wiki. It has a reasonably high success rate but doesn't work for every song :/

BarakaAka1Only commented 8 years ago

Dang, would be easier if there was a good API or something so i could get it working, i mean for what i have so far works but sadly i didn't know it was US only which does suck. Got to think of something..

BarakaAka1Only commented 8 years ago

So for the last few hours i've been scratching my head trying to figure this whole thing out and finally i figured it out with this access-control-allow-origin nonsense

I re-coded my work using now http://lyrics.wikia.com/wiki/Lyrics_Wiki which is pretty simple now that i got access-control-allow-origin fixed

Since Google Lyrics is only US based from what it looks like finally i found the fix so that now this limitation is no more.

Change Log:

Pending:

Here is the new version:

https://www.dropbox.com/s/fafva5k9ozg3ply/BarakaLyrics%20v3%20Radiant%20Player.app.zip?dl=0

BarakaAka1Only commented 8 years ago

UPDATE:

I wanted to extend it more for lyrics that aren't available making it more of a chance to get lyrics

By doing this increases the chances more than getting nothing

Change Log:

Here is the new version: https://www.dropbox.com/s/qsfhmggemo0ttpz/BarakaLyrics%20v4%20Radiant%20Player.app.zip?dl=0

Let me know what you guys think :)

chrismou commented 8 years ago

Sounds good. Whereabouts is the link now? Checking out v4 and it doesn't look to be in the bottom right anymore.

Glad you got the wikia issue sorted. Now you mention it, I think I may have hit a similar issue with last.fm a few months ago. Took a while to realise it was the same issue though :-/

BarakaAka1Only commented 8 years ago

I went and had a look with El Capitan as i been working on this on Yosemite and looks like Safari 9 => is blocking insecure request, i am not sure how to fix it because even applying ATS in the info.plist by domain exception isn't working :(

Gonna try something hopefully i can get it but still not sure cause it does work fine on Yosemite and Mavericks

chrismou commented 8 years ago

So I guess you added a reference to the URL in here under NSExceptionDomains: https://github.com/radiant-player/radiant-player-mac/blob/master/radiant-player-mac/info.plist#L35 ?

If it's still not working, give this a try (on El Capitan):

/usr/bin/nscurl --ats-diagnostics https://ws.audioscrobbler.com

(replacing the URL with your own, obvs)

I stumbled across this when debugging the last.fm issues last year. Its tries to connect using various options and tells you all the aspects of the ATS checks that fail, so you know which exception options to add to info.plist against that URL

BarakaAka1Only commented 8 years ago

@chrismou thank you for that, i went ahead and ran it and got:

os-x-el-capitan:~ baraka$ /usr/bin/nscurl --ats-diagnostics http://genius.com Starting ATS Diagnostics

Configuring ATS Info.plist keys and displaying the result of HTTPS loads to https://genius.com. A test will "PASS" if URLSession:task:didCompleteWithError: returns a nil error. Use '--verbose' to view the ATS dictionaries used and to display the error received in``URLSession:task:didCompleteWithError:. ================================================================================

Default ATS Secure Connection --- ATS Default Connection 2016-04-05 08:07:35.639 nscurl[696:63875] App Transport Security has blocked a cleartext HTTP(http://) resource load since it is insecure. Temporary exceptions can be configured via your app's `Info.plist file. Result : FAIL ---`

================================================================================

Allowing Arbitrary Loads

--- Allow All Loads Result : PASS ---

================================================================================

Configuring TLS exceptions for genius.com

--- TLSv1.2 Result : FAIL ---

--- TLSv1.1 Result : FAIL ---

--- TLSv1.0 Result : FAIL ---

================================================================================

Configuring PFS exceptions for genius.com

--- Disabling Perfect Forward Secrecy Result : FAIL ---

================================================================================

Configuring PFS exceptions and allowing insecure HTTP for genius.com

--- Disabling Perfect Forward Secrecy and Allowing Insecure HTTP Result : PASS ---

================================================================================

Configuring TLS exceptions with PFS disabled for genius.com

--- TLSv1.2 with PFS disabled Result : FAIL ---

--- TLSv1.1 with PFS disabled Result : FAIL ---

--- TLSv1.0 with PFS disabled Result : FAIL ---

================================================================================

Configuring TLS exceptions with PFS disabled and insecure HTTP allowed for genius.com

--- TLSv1.2 with PFS disabled and insecure HTTP allowed Result : PASS ---

--- TLSv1.1 with PFS disabled and insecure HTTP allowed Result : PASS ---

--- TLSv1.0 with PFS disabled and insecure HTTP allowed Result : PASS ---

================================================================================

So i am assuming running it with --verbose would be the one i would apply from PASS such as

NSExceptionDomains = { "genius.com" = { NSExceptionAllowsInsecureHTTPLoads = true; NSExceptionMinimumTLSVersion = "TLSv1.0"; NSExceptionRequiresForwardSecrecy = false; }; };

Still not 100% familiar with the ATS thing but i guess that makes sense? Gonna try and add it

chrismou commented 8 years ago

Yeah, give that a spin. Not sure if the minimum tls version is required, but I'm reading it on a phone so I probably missed something :wink:

BarakaAka1Only commented 8 years ago

Okay thanks gonna give it a shot will update shortly

BarakaAka1Only commented 8 years ago

Tried it several ways for all that had PASS and i doesn't not work, not sure what i am doing wrong :S

BarakaAka1Only commented 8 years ago

Okay so it's been 5 days since i last wrote here and i've been working on this endlessly trying to figure out an alternative. I am not a Objective-C pro but i can figure things out when i put my mind to it.

These last past 5 days i've been studying the ways of Objective-C and finally got a complete refresh / revision of adding Lyrics to Radiant Player šŸ‘ . My first attempt from the start was shaky and a lot of issues came unnoticed so i used what i done first hand and applied it with something that will indeed work, it's about time.

I've created my own implementation in C and its pretty easy to extend on it which was my whole idea because not every lyrics service out there doesn't have lyrics for said song(s).

So i give you my extension to Radiant Player called BarakaLyrics

BarakaLyrics is an Objective-C extension i wrote to add-on to Radiant Player (sorry to be redundant)

This is pretty much my first bit of Objective-C code i've written (so sorry if i made any errors :| not a pro remember?)

So what does BarakaLyrics contain?

Currently it contains five services in order to get lyrics following:

MetroLyrics, LyricWiki, Genius, AZLyrics and MusixMatch

Now the front-end, i completely recoded so it's organized and easy to add-on too much more better than what i've done from the start

And yes this includes custom template styling on what is in use to match the ui as to what @chrismou suggested

Now for some screenshots: (there is many caution ?)

So pretty much what happens is for each of the services that finds lyrics, you can choose whichever lyrics service you want to see the lyrics for said song(s) from MetroLyrics, LyricWiki, Genius, AZLyrics and MusixMatch.

I've tested it on all Mac versions that Radiant supports and all confirmed working :)

Current bugs / issues:

So at this point everything works great the only service that i couldn't get to was MusixMatch and here's why. When testing MusixMatch, pretty much they banned my IP because of the many requests that i've sent (again to test that everything was working)

They have this thing where you have to confirm that your are human, that's all i was getting out of it but i could view it normally in chrome/ safari without the crappy verification thing so i am not sure if its a header thing via useragent it's getting but yeah.

Lyric Wiki works but for some of the songs it catches only a <script> than the actual lyrics so with no choice i pretty much added a check to see if thats the output reconsider that lyrics not available. But it does work just some songs are like that just.

Mavericks has one style issue that i haven't gotten a chance to fix it (but soon will) when the lyrics modal is shown when you click the "X" or the body it lags to close it and applies a z-index issue making the lyrics overflow and just not look right. But it will be fixed (sorry Mavericks users)

Now this is the part where i would need help on, i am not sure how to optimize it more maybe it's just something i am doing wrong? But when you are playing a song, Radiant might freeze and it's because it is looking for the lyrics, it only lasts a few seconds but just putting it out there.

(sorry for the caps) But again THIS IS A ALPHA TEST OR WHATEVER YOU WANT TO CALL IT IT'S A TEST VERSION EITHER WAY

Other than that i am excited for you guys to give it a test run and looking forward to reading your comments.

Would like to thank @chrismou for the help with this ATS thing cause it came in handy and all the suggestions to making this a more better version than before.

Changelog:

Pending / Maybes:

I still want to maybe do the local storage thing to save whatever song already obtain said lyrics for said song(s) not sure though.

Will there be a pull request?

Yes but not this instant, i want to give you guys a chance to test it at least and if it good enough i'll let you guys know when i put it up on my end, so that hopefully revisions that are needed like for that freezing bug can get fixed or re-done

I am sure there will be a lot of work done with this so its improved but for 5 days that i've been working on this endlessly i am pretty happy with it :)

You can download this new version here:

https://www.dropbox.com/s/zmem8c58cd8tc2f/BarakaLyrics%20v5%20Radiant%20Player.app.zip?dl=0

chrismou commented 8 years ago

This is working really well for me. Found lyrics for 20/20 songs I tested, and some were pretty obscure.

I'm not seeing the lag, but that might be because the internet is ridiculously fast where I am right now. It's hard to guess why it might be happening without seeing the code - if you're struggling to puzzle it out, we can always take another look once the PR is in.

The only other thing I'd suggest adding - and this is more of a nice to have than anything - is the ability to turn it on/off. Only because I can forsee people who don't use lyrics asking how to hide the new button. But if it's too much work, don't worry about it.

Other than that, really really cool. Works really well. I'm sure this'll make a lot of people happy ;-)

MarshallOfSound commented 8 years ago

@BarakaAka1Only Is there any way this can be extracted to a cross-platform language module. Like putting it in an npm module?

BarakaAka1Only commented 8 years ago

@chrismou Awesome to hear that it's working :)

And well right now i am sitting at about 200mbps for my internet speed but it only happens to lag just for a few seconds but again that could be something that i've done but still not sure. I mean it works thats the whole key behind this no?

As per your suggestion, i went ahead and added it in :D

Default BOOL -> false

@MarshallOfSound well i haven't had any plans to, the whole idea for this was for Radiant Player but i will be putting up the source code soon.

Change Log:

You can download this new version here:

https://www.dropbox.com/s/pc06cm8slgoemxu/BarakaLyrics%20v6%20Radiant%20Player.app.zip?dl=0

jacobwgillespie commented 8 years ago

This is looking awesome! Can't wait for the PR ;)

@MarshallOfSound / @BarakaAka1Only - once there's a PR up, I'll port this over to radiant-player-electron, so a npm module wouldn't be super difficult to set up. I wonder if that kind of thing would make a good candidate for inclusion at @gmusic-utils...

BarakaAka1Only commented 8 years ago

@jacobwgillespie glad to hear it :D there is a few things i still want to do but i'll keep you all in the loop once it's up for PR

And that will be awesome if you could do that :)

BarakaAka1Only commented 8 years ago

Say hello to fades in the lyrics. What is that? Well when scrolling through the lyrics (text) i gave it the feel to fade in / out the text so it's more presentable when scrolling :)

Some screenshots:

I also added a white style when there is no class added in the body with material

Some screenshots:

Change Log:

You can download this new version here: https://www.dropbox.com/s/s8zgkdxnxxxt55b/BarakaLyrics%20v7%20Radiant%20Player.app.zip?dl=0

MarshallOfSound commented 8 years ago

@jacobwgillespie The only issue I would have with an NPM module that does this being in gmusic-utils is the legality of the module. Lyrics licensing is a grey area at best and sniffing lyrics from services that specifically say you shouldn't seems a bit dodge to me.

That's the main reason why I haven't released a version of GPMDP with proper lyrics support even though the ability to show them has been there for a while. It's fine line and I need to do more research before having a proper idea of whether it's OK or not

chrismou commented 8 years ago

@jacobwgillespie @MarshallOfSound TBH, I'd question whether it would even be gmusic specific. It could be incorporated into any music player.

MarshallOfSound commented 8 years ago

Yeah, I feel if this gets extracted to a library it should be independent of a UI implementation. It should simply provide a lookup service for a given song and return the lyrics. The UI could be handled by something player specific @chrismou ?

chrismou commented 8 years ago

That's what I'm thinking. If we want to have a wider discussion about it, probably worth kicking off a ticket on https://github.com/gmusic-utils/meta :smile:

jacobwgillespie commented 8 years ago

@MarshallOfSound - I see your point. If we only used Google Play Music lyrics as a source, that would be one thing, but like @BarakaAka1Only has found, for a robust implementation we'd need other sources. You're correct, gray area at best and something we may not want to touch in gmusic-utils.

@chrismou - yeah, I agree, it's not really gmusic-specific other than the UI. It would probably be better to separate the two.

BarakaAka1Only commented 8 years ago

Submitted a PR https://github.com/radiant-player/radiant-player-mac/pull/541 :) Will be putting up a separated repo that will contain just BarakaLyrics with all files etc.

BarakaAka1Only commented 8 years ago

Okay here is the source for BarakaLyrics itself https://github.com/BarakaAka1Only/BarakaLyrics-For-Radiant-Player

Added a mini guide as well.

FezVrasta commented 8 years ago

The UI is really bad and not material at all...

BarakaAka1Only commented 8 years ago

UI is going to be changed, again this was nothing official but i am going to continue working on it and now will be going Polymer to match Google already....

BarakaAka1Only commented 8 years ago

UPDATE I finally completed the newest version and its on pull request, say hello to BarakaLyrics with Polymer :)

This change from the initial release has been revamped with the power of Polymer!

This release also fixes flex issues due to the recent update Google pushed i.e loading-container was on the top left...

Change log:

This has been tested on El Capitan, Mavericks and Yosemite šŸ‘

Screenshots:

Download:

https://www.dropbox.com/s/m8lmht8qicwrlvx/BarakaLyrics%20Polymer%20Version%201.app.zip?dl=0

BarakaAka1Only commented 8 years ago

Update

I went ahead and implemented Google Music Lyrics with my lib which you can find / take a look at it here:

https://github.com/BarakaAka1Only/BarakaLyrics-For-Radiant-Player/commit/622f26d8fa4750f679f79e0593e0a3ea42e5f412

It's a base idea but it works hopefully this is something that would be a non-grey area since this is Google Music Lyrics itself let me know i suppose ?

BarakaAka1Only commented 8 years ago

Moved my current fork to a non-forked one here https://github.com/BarakaAka1Only/radiant-player-mac-BarakaLyrics (as i am doing some changes but this hasn't been forgotten)

ww7 commented 6 years ago

Currently desktop version of Google Play Music offers the feature as Beta

Radiant Player, bump for this