I finally decided to try my hand at coding and this is the result of about 2 weeks of learning. I decided to skip the tutorials and books and jumped straight into coding. The code's mess but it works and that's great.
I still have a lot to learn, but I do plan on adding three features:
1. Have new searches not interrupt the current song.
2. Make the video resizable.
3. Add playlists. I actually asked a fellow HN-ers to help out with this because I don't think I'll be able to handle databases yet.
I would also recommend hiding the auto-suggest right hand side bar until everything is loaded and then sliding it into view when ready. I suggest this for 2 reasons,
1. I initially clicked the song and the first thing I noticed, before I the music played was the "this might take 90 seconds dialog" and I was ready to kill the tab thinking.
2. Just the fact that it says this might take a long time, is a 'downer', its better to make that view visible when it is ready so that user doesn't have to ever know of the fact that you have a process that takes 90 seconds.
I am a designer, and have coded HTML/CSS before. I have been trying to learn coding for years, but never get beyond the intro chapters in most books.
So this is my project. I just picked PHP (because it seemed to be simple enough - just drop <?php ?> into the HTML), and decided to code this concept. Lots of stackoverflow and github searches later I finally have a working version.
Ah the HTML/CSS background explains a lot. Because most first-time coders could never make anything this nice looking. And it's very functional too, so I'm definitely not trying to bash your PHP skills.
About Spotify, a friend of mine using it sent me a link to their website yesterday, and by visiting this link I was logged into her account, could see her personal informations and even change her password. I tweeted[1,2] about it as soon as I realized it. It's really a shame such a big website is so low on security…
I guess it might be a link from their desktop app to their website that she followed, but at least they could redirect to a clean url after having authenticated the user, it's okay that she sent that link to me (it was just to show me the prices of Spotify's monthly subscriptions), but what if she shared it publicly on Twitter or Facebook?
Having a spotify/itunes-esq UI for youtube is a great idea, but this is just ripping off Spotify a bit too closely IMHO.
However, I seem to remember that a German competitor for Spotify has done almost the exact same UI copy - so maybe Spotify aren't that bothered by it. It's not as if their UI is that ground breaking (as someone else comments, it much like iTunes), it's the backend tech that makes Spotify so good.
Neat, I made http://www.tubalr.com about 2 years ago and have been working on it every since. It made its way onto Mashable, Techcrunch, and several other blogs this past Dec/Jan.
Something to keep in mind, eventually YouTube will start blocking certain videos from being played on your site. This took a while and mainly started happening when traffic picked up. Theres no good way to pickout blocked videos, heres a function I use to weed through some of the blocked videos: https://github.com/cjstewart88/Tubalr/blob/master/app/assets...
This is a service I would really like. There's also youtify[1], but neither work for me (with youtify Soundcloud works but not YouTube). The music simply never starts.
That's too bad because such a "music mode" is something I would love to see on YouTube. It's not that I constantly listen to music on YouTube, that would be a waste of bandwidth, but I use YouTube almost exclusively as a music/artist discovery platform, then I download the musics I like once and for all. But I would still appreciate a lot to be able to actually have a working playlist/queue feature on YouTube, and also to be able to desactivate the video display (and download) to only keep the sound.
It's too bad that hiding the video is against YouTube's TOS. Most of the time the video is a single static image anyway.
About your second point, I didn't ask for "letting users download the music or the video", when I said that I download the music it can be from many sources, most of the time .zip or .rar files that the artists put on mediafire or some services like this.
If Youtube doesn't work in Youtify, you probably have some sort of flash blocker installed. If you don't, a bug report would be appreciated. (https://github.com/youtify/youtify)
I don't have any flashblocker installed. I thought it was because of HTTPS Everywhere but I disabled it temporarily and got the same result. Anyway I won't add an exception rule to HTTPS Everywhere for YouTube. So I have no clue at all what the cause could be, I don't think a "it doesn't work for me" bug report would be of any help.
I made http://www.tunesicles.com . It allows you to easily search youtube (you can search for an album and instantly add all the songs to a playlist). Not sure if this is something like what you would like!
I use Last.FM to find similar songs. It appears in the right sidebar when you play any song.
I didn't use Last.FM for the main search, because I couldn't get the album name directly from the keyword search (the JSON has the title and artist only). Getting the album name would require querying the API for each search result which again I tried but takes about 30 sec for the results to appear.
I am considering using Spotify's API though since iTunes gives strange results sometimes.
Confusing UX. I assumed that "top 100 hits" button would give me the top 100 hits for my search term, rather than the search button only being implicit. The placeholder text is a bad position for instruction (as a rule, not just in this case) because it's gone when you are in need of the signpost of what to do.
You may want to set cursor:pointer in your css. At first I didn't think I could click on a track to play it because it just showed the default cursor or, worse, a text-selector cursor.
Nicely done, but I would love a separate column for the bitrage/quality of the music. Most of the music on YouTube is subpar bitrate, and music should usually be heard in decent quality. :)
The search results are sometimes quite weird. For example I can search for "The Who" now and get all the songs for the artists. I'll change the iTunes API I use now to Spotify's (or Last.FM's) soon.
Sometimes if you click on a song before the javascript for the music player loads it doesn't work. I'll do my best to fix it soon.
I have been looking for something like this for a long time. Youtube has pretty much all the music that I listen to but it's playlist handling is borderline unusable. Sometimes I wonder if this is something they do on purpose so users can not convert Youtube into a personal jukebox. Overall, great project and kudos to the developer!
of them that dwell in a far country: Is not the LORD in Zion? is not
her king in her? Why have they provoked me to anger with their graven
images, and with strange vanities? 8:20 The harvest is past, the
summer is ended, and we are not saved.
8:21 For the hurt of the daughter of my people am I hurt; I am black;
astonishment hath taken hold on me.
8:22 Is there no balm in Gilead; is there no physician there? why then
is not the health of the daughter of my people recovered? 9:1 Oh that
my head were waters, and mine eyes a fountain of tears, that I might
weep day and night for the slain of the daughter of my people! 9:2 Oh
that I had in the wilderness a lodging place of wayfaring men; that I
might leave my people, and go from them! for they be all adulterers,
an assembly of treacherous men.
----
God says...
metre our blamed 12/12/00 expressed access latter imagine
scornful strike hither presiding UNDER destruction wallowed
The search delays get annoying. Have you thought about caching search results on the server? It seems that would be especially useful if everyone is listening to the same playlist (as is the case now.)
Brilliant. I listen to music on YouTube alot; this is something I've been looking for. Easy to use, very clean look.
As soon as you implement the playlist feature, I plan to use it.
One question: What sort of limits do you have on the searching? I have a song I listen to on YouTube and when I type in the song or artist, it doesn't come up.
Spotify and iTunes may have similar UI but this site and Spotify are identical. One can assume Spotify was inspired by the design of iTunes, since well, lets be honest, its how everybody now pictures their music players. This site on the other hand had done nothing new at all, its blatant theft of Spotify's interface.
Really cool. It would be really useful though if I could sort the results, for example, by album/track number. Seems like a REALLY useful service nonetheless. Congrats.
EDIT: Also, sometimes people combine multiple songs into one youtube video, for example http://youtu.be/J0FawK4G_AY They seem to show up in your player as only the first song. This is a lot more complicated then my first suggestion, but some sort of detection of that (and maybe the possibly more common case of full album videos) would help save some confusion when users play one song and get another one for free. (BONUS!)
EDIT2: Also, allowing only one video for any given song has issues, for example, when the first result is a live video or otherwise bad quality. Maybe just a right click menu that lets you select "See alternate videos"?
Nice app. But I suspect that this will draw more attention to the possibility of using YouTube as a music service and therefore increase the risk of these videos taken off YouTube.
Nowadays almost all the music videos on Youtube are legal. Most of them are from VEVO's official channel. So the risk of them getting taken off youtube is quite low.
85 comments
[ 4.1 ms ] story [ 126 ms ] threadPerhaps make the area below the video player clickable so that it makes the video appear in a larger area above the song list.
I am very impressed. Great work Ashraful!
I finally decided to try my hand at coding and this is the result of about 2 weeks of learning. I decided to skip the tutorials and books and jumped straight into coding. The code's mess but it works and that's great.
I still have a lot to learn, but I do plan on adding three features:
1. Have new searches not interrupt the current song. 2. Make the video resizable. 3. Add playlists. I actually asked a fellow HN-ers to help out with this because I don't think I'll be able to handle databases yet.
Glad you liked it.
1. I initially clicked the song and the first thing I noticed, before I the music played was the "this might take 90 seconds dialog" and I was ready to kill the tab thinking.
2. Just the fact that it says this might take a long time, is a 'downer', its better to make that view visible when it is ready so that user doesn't have to ever know of the fact that you have a process that takes 90 seconds.
So this is my project. I just picked PHP (because it seemed to be simple enough - just drop <?php ?> into the HTML), and decided to code this concept. Lots of stackoverflow and github searches later I finally have a working version.
Not so much like the fact that it's pretty much Spotify's interface copied to the smallest detail.
I guess it might be a link from their desktop app to their website that she followed, but at least they could redirect to a clean url after having authenticated the user, it's okay that she sent that link to me (it was just to show me the prices of Spotify's monthly subscriptions), but what if she shared it publicly on Twitter or Facebook?
[1] https://twitter.com/p4bl0/status/236967984319590400
[2] https://twitter.com/p4bl0/status/236969256187731968
Having a spotify/itunes-esq UI for youtube is a great idea, but this is just ripping off Spotify a bit too closely IMHO.
However, I seem to remember that a German competitor for Spotify has done almost the exact same UI copy - so maybe Spotify aren't that bothered by it. It's not as if their UI is that ground breaking (as someone else comments, it much like iTunes), it's the backend tech that makes Spotify so good.
Something to keep in mind, eventually YouTube will start blocking certain videos from being played on your site. This took a while and mainly started happening when traffic picked up. Theres no good way to pickout blocked videos, heres a function I use to weed through some of the blocked videos: https://github.com/cjstewart88/Tubalr/blob/master/app/assets...
Also, all of Tubalr's codes in github if you're interested: http://www.github.com/cjstewart88/Tubalr
Good Luck!
Thanks for the link to the js to avoid blocked youtube vids. It'll definitely be a lot of help.
No prob, shoot me an email cjstewart88@gmail.com if you need anything.
That's too bad because such a "music mode" is something I would love to see on YouTube. It's not that I constantly listen to music on YouTube, that would be a waste of bandwidth, but I use YouTube almost exclusively as a music/artist discovery platform, then I download the musics I like once and for all. But I would still appreciate a lot to be able to actually have a working playlist/queue feature on YouTube, and also to be able to desactivate the video display (and download) to only keep the sound.
[1] http://www.youtify.com/
EDIT: I guess the best service of this type I've seen yet is http://roll.io/ (which works for me on top of that). I was discussed on HN here: https://news.ycombinator.com/item?id=2665090
About your second point, I didn't ask for "letting users download the music or the video", when I said that I download the music it can be from many sources, most of the time .zip or .rar files that the artists put on mediafire or some services like this.
I love the UI but search results can be improved IMO. Maybe you could utilize Last.fm API for search?
I didn't use Last.FM for the main search, because I couldn't get the album name directly from the keyword search (the JSON has the title and artist only). Getting the album name would require querying the API for each search result which again I tried but takes about 30 sec for the results to appear.
I am considering using Spotify's API though since iTunes gives strange results sometimes.
I searched for "The Who" and almost 90% of the songs weren't by The Who, but instead song titles with "who". "Bob Dylan" worked fine.
Please, add support for lyrics, that would be simply awesome, and something Grooveshark is lacking.
Some songs just don't play, not sure why.
The search box is like "broken", I can't select with the mouse.
But it's great!
Sometimes if you click on a song before the javascript for the music player loads it doesn't work. I'll do my best to fix it soon.
of them that dwell in a far country: Is not the LORD in Zion? is not her king in her? Why have they provoked me to anger with their graven images, and with strange vanities? 8:20 The harvest is past, the summer is ended, and we are not saved.
8:21 For the hurt of the daughter of my people am I hurt; I am black; astonishment hath taken hold on me.
8:22 Is there no balm in Gilead; is there no physician there? why then is not the health of the daughter of my people recovered? 9:1 Oh that my head were waters, and mine eyes a fountain of tears, that I might weep day and night for the slain of the daughter of my people! 9:2 Oh that I had in the wilderness a lodging place of wayfaring men; that I might leave my people, and go from them! for they be all adulterers, an assembly of treacherous men.
----
God says... metre our blamed 12/12/00 expressed access latter imagine scornful strike hither presiding UNDER destruction wallowed
As soon as you implement the playlist feature, I plan to use it.
One question: What sort of limits do you have on the searching? I have a song I listen to on YouTube and when I type in the song or artist, it doesn't come up.
Sometimes iTunes does not have a song, or the query doesn't return the correct video.
I'm trying to figure out a way to solve these cases, but haven't come up with a decent solution yet.
Thanks for the clarification. This site is awesome.
Screenshot of Spotify http://i.imgur.com/Um0HM.png
I'll redesign the entire UI before launching the update version though.
Apologies to anyone who got offended at the Spotify ripoff.
EDIT: Also, sometimes people combine multiple songs into one youtube video, for example http://youtu.be/J0FawK4G_AY They seem to show up in your player as only the first song. This is a lot more complicated then my first suggestion, but some sort of detection of that (and maybe the possibly more common case of full album videos) would help save some confusion when users play one song and get another one for free. (BONUS!)
EDIT2: Also, allowing only one video for any given song has issues, for example, when the first result is a live video or otherwise bad quality. Maybe just a right click menu that lets you select "See alternate videos"?
I also made something similar that allows you to easily make playlists from YouTube videos: http://instadj.com
Is the code available somewhere? I'd love to take a look at how the search and the playlist thing works.