ShowHN: Generate your own MTV (Last.fm+Youtube)(tv.listandplay.com)
tv.listandplay.com
ShowHN: Generate your own MTV (Last.fm+Youtube)
http://TV.ListAndPlay.com
63 comments
Thanks for the feedback David, I was thinking about a 99design contest in order to improve the UI. Right now I see they don't accept 'html code/css' contests, anyone aware of a similar contest site which supports JQuery/CSS contests?
Perhaps use a psd to html shop?
Love it. Wanted something simple like this without realising it. Its great for room parties in a college dorm when you just have a laptop and some speakers.
If you want to improve it, you could do some clever check on whether the video is actually a video or just some still images with the music on top - as 60% of the videos I played seemed to fall into the latter category.
If you want to improve it, you could do some clever check on whether the video is actually a video or just some still images with the music on top - as 60% of the videos I played seemed to fall into the latter category.
Thnx, glad to hear people like it! It took me 2 months to realize the whole thing (first the ListAndPlay.com concept and during the last 2 weeks this Last.fm mashup).
The idea of checking for still images was something I've tried in a previous version. I decided to remove the function because somehow there is a reason why a video is popular on Youtube and is no 1 in the results (often good sound quality). FYI: checking for still could be done by comparing the 3 different thumbnails youtube generates for every video.
The idea of checking for still images was something I've tried in a previous version. I decided to remove the function because somehow there is a reason why a video is popular on Youtube and is no 1 in the results (often good sound quality). FYI: checking for still could be done by comparing the 3 different thumbnails youtube generates for every video.
Ah I didn't think of that. Well thanks for the speedy reply and neat tool - I will be using this a fair amount probably.
That is a cool idea. I had no problems with the UI, just entered a song and hit "go". But you definitely need an overlay presenting the song title and artist name in MTV-style with a fancy fade-in and fade-out, that would be awesome :)
Yeah that would be really cool!
I tried to find some code examples of that being done in JQuery, but couldn't find any. Anyone with a good idea how to fix this? What about the cpu load or isn't that an issue?
CPU load shouldn't be an issue at all. It is really easy with jQuery. You just make a div with a high z-factor and trigger fadeIn(), fadeOut() whenever the video changes:
http://api.jquery.com/fadeIn/
Ok, I've got the fadeIn/fadeOut already running at this moment (top left). I'll see if I can make it more fancy, any fancy JQuery examples of what's nice is welcome :)
Just make it big now, you don't need more jQuery, only CSS styling.
<div id="overlay" style="background:black;color:white;width:960px;font: 24px 'Droid Sans';padding:20px;padding-left:150px;">Name of the Song<br />Artist</div>Thanks, I've put it on the todo list :)
Great Idea !
Some points : - The UI should adapt according to the screen size ( buttons are pretty big on my laptop, and TOO small for my 24 inches. Maybe create 2 or 3 different sizes ? )
- Being able to see the "playlist" and being able to "drag and drop" the previews in the horizontal direction (like "which one will be next, etc").
- About the UI, you should keep it simple, but also keep it as "close" to standard player/TV UI. Like standard Play/Pause/Volume big at the center ( bottom or top )
- You need a colorful/media Logo, definitely.
For later maybe : Like Spotify and others, being able to create & share playlist of videos, ranking them, etc. and NOT only by artist. Let's say I'm at a party, and I made a nice music video playlist at home, I just connect thru facebook, and I can play my playlist, etc. Youtube is crap for that, and that's EXACTLY the kind of "share tool" you would need I guess.
- Being able to easily vote for music videos ( just a click, no more ) and that would help then to provide the user with the best videos first (and kick out the image music videos from the first of the search results).
I don't really have much free time, but could give you a hand. Kinda have a "final working product" in my head, and it looks great.
Good luck
Some points : - The UI should adapt according to the screen size ( buttons are pretty big on my laptop, and TOO small for my 24 inches. Maybe create 2 or 3 different sizes ? )
- Being able to see the "playlist" and being able to "drag and drop" the previews in the horizontal direction (like "which one will be next, etc").
- About the UI, you should keep it simple, but also keep it as "close" to standard player/TV UI. Like standard Play/Pause/Volume big at the center ( bottom or top )
- You need a colorful/media Logo, definitely.
For later maybe : Like Spotify and others, being able to create & share playlist of videos, ranking them, etc. and NOT only by artist. Let's say I'm at a party, and I made a nice music video playlist at home, I just connect thru facebook, and I can play my playlist, etc. Youtube is crap for that, and that's EXACTLY the kind of "share tool" you would need I guess.
- Being able to easily vote for music videos ( just a click, no more ) and that would help then to provide the user with the best videos first (and kick out the image music videos from the first of the search results).
I don't really have much free time, but could give you a hand. Kinda have a "final working product" in my head, and it looks great.
Good luck
Funny, made this one two years ago http://playmymusicvideos.com/
Very nice. I find your project better than the on posted. It's the more minimalistic approach that I liked. Very good work.
Nice, a Flash based one and slick effects I see :) I'm curious how the slideIn effect for title could be ported to jquery
This is awesome. :)
I'm wondering, do you have any plans to monetize this? If so I'm curious as to how, I'm not sure about the terms of the YouTube API but the last.fm one says it's strictly for noncommercial use.
I'm wondering, do you have any plans to monetize this? If so I'm curious as to how, I'm not sure about the terms of the YouTube API but the last.fm one says it's strictly for noncommercial use.
For me it's impossible to monetize it yet. I'm located in The Netherlands and I've got to deal with a RIAA similar organisation called Buma/Stemra. If I monitize it I've to pay large amounts of license costs (I'm just a poor medicine student). Since a half year Buma signed a deal with Youtube which finally allows me to embed (music) videos for free, as long as I don't monitize it. Last.fm API is free, but they want to see money if you're getting rich by using their API. Youtube doesn't seams to be a problem. Youtube doesn't seams to be a problem.
tl;dr Not at this moment. Dutch RIAA problems if I do. Last.fm wants money if you are getting rich.
tl;dr Not at this moment. Dutch RIAA problems if I do. Last.fm wants money if you are getting rich.
I love the idea! The layout/UI however needs some work.
Why do I get a second HUD (upper right corner) when I'm in fullscreen mode? Why are there two buttons to toggle fullscreen mode? Why is there a tick icon in the search box? Why do you have the "Generate your own MTV, click here!" text still visible, after I already searched for an artist? Your "Why? What? How?" text is also pretty nondescript. And why am I able to resize and move the floating box anyway?
Again, the idea is great, but the UI is very confusing. There's too much going on. Try to simplify it!
Why do I get a second HUD (upper right corner) when I'm in fullscreen mode? Why are there two buttons to toggle fullscreen mode? Why is there a tick icon in the search box? Why do you have the "Generate your own MTV, click here!" text still visible, after I already searched for an artist? Your "Why? What? How?" text is also pretty nondescript. And why am I able to resize and move the floating box anyway?
Again, the idea is great, but the UI is very confusing. There's too much going on. Try to simplify it!
UI needs to be simplified indeed. It's a bit complicated because I used the original ListAndPlay.com UI to start with.
Second Hud: those are the 'most often used' buttons, removing duplicates is a good idea indeed. The 'generate' text is visible to give you a way to enter artist search mode in non-fullscreen mode. The search bar above the link (with tick in it) is for searching through Youtube directly (instead of using Last.FM data). The tick is to show all the ajax is finished, a loading animation is being shown while busy.
Why What How is maybe not clear enough, what would you suggest as intro? Resize & move is incase someone got a low resolution and couldn't see the dropdown.
Thanks for your feedback phoboslab :)!
Second Hud: those are the 'most often used' buttons, removing duplicates is a good idea indeed. The 'generate' text is visible to give you a way to enter artist search mode in non-fullscreen mode. The search bar above the link (with tick in it) is for searching through Youtube directly (instead of using Last.FM data). The tick is to show all the ajax is finished, a loading animation is being shown while busy.
Why What How is maybe not clear enough, what would you suggest as intro? Resize & move is incase someone got a low resolution and couldn't see the dropdown.
Thanks for your feedback phoboslab :)!
When I type the name of an artist the list of songs that is displayed seems randomly sorted. That makes it harder to find what I'm looking for.
After selecting a song nothings seemed to happen, until I noticed the progress indicator in the upper right corner. Center screen would be a more visible location.
The most practical problem seems to be the difference in volume levels; I keep having to adjust the volume. I realise that that could be hard to fix, but it's what made me switch back to the radio.
After selecting a song nothings seemed to happen, until I noticed the progress indicator in the upper right corner. Center screen would be a more visible location.
The most practical problem seems to be the difference in volume levels; I keep having to adjust the volume. I realise that that could be hard to fix, but it's what made me switch back to the radio.
The list is sorted on 'most popular' according to the Last.fm DB.
The reason why I immediately close the overlay is because I want to avoid users to click other songs while another ajax search is still running and I want to give the experience of the thing going 'fast'. ('overlay closes, hmmm something happens, ah there is my MTV!' instead of 'selected artist, mmm what is it doing? searching, mmm does it work?, reclick, reclick').
Volume could be a problem in some occasions, I've already tried to find a way to measure the volume level and normalize it, problem is that I can't get the values from the Youtube Flash player API. Is someone aware of other ways to fix this?
The reason why I immediately close the overlay is because I want to avoid users to click other songs while another ajax search is still running and I want to give the experience of the thing going 'fast'. ('overlay closes, hmmm something happens, ah there is my MTV!' instead of 'selected artist, mmm what is it doing? searching, mmm does it work?, reclick, reclick').
Volume could be a problem in some occasions, I've already tried to find a way to measure the volume level and normalize it, problem is that I can't get the values from the Youtube Flash player API. Is someone aware of other ways to fix this?
I'm generally very wary of these services because they usually lump a lot of stuff I don't like into it, but the results starting from Nas' Memory Lane have been great so far.
It'd be nice if there were a better way to tell if the youtube video is actually the video or just an mp3 with a shot of the album, but since its just playing in the background, it hasn't been too much of an issue.
Also, it would be nice if there were a restart, or some way to scrub the actual video.
It'd be nice if there were a better way to tell if the youtube video is actually the video or just an mp3 with a shot of the album, but since its just playing in the background, it hasn't been too much of an issue.
Also, it would be nice if there were a restart, or some way to scrub the actual video.
Repeat is on the todolist, for now press the close button and reselect the video from the bottom bar. See comment below for reaction on mp3/still image issue, hard one to solve.
[deleted]
Some technical details: It's a mashup of Last.FM data & Youtube. Futhermore, there is a Facebook integration (you can discover new music through your friends) and it's easy to create playlists of all the (new) music you find. Playlist urls are being stored as a Bit.ly url.
Everything is clientside JQuery code, so there are no scalability issues.
Any feedback is welcome!
Okay, I love it! Thanks for building this. I had been toying with the idea but I never seemed to be getting the time.
It seems very simple to use. I did have to try out a few different songs since it wasn't able to generate its list based on the songs that I initially tried.
I will have to spend more time in understanding the playlist aspect of it though.
It seems very simple to use. I did have to try out a few different songs since it wasn't able to generate its list based on the songs that I initially tried.
I will have to spend more time in understanding the playlist aspect of it though.
Great idea, but didn't do what it said on the box. The page asked me to enter a specific song, which isn't what last.fm does - why not just ask me for my last fm login? Also no videos played, with no error message why. It might be because I'm on a iPad and you don't support HTML video, but please just print some kind of error - all I saw was black.
Ah yeah that's indeed the problem. iPads are not supported yet, but they will as soon as Youtube releases the HTML5 video support to the public! I'll put the 'error' on the todo list.
It doesn't seem to work with certain foreign songs and artists. For example, it couldn't find Hotel Supramonte by Fabrizio De André which is available on YouTube (http://www.youtube.com/results?search_query=hotel+supramonte...).
I tried to do a lookup for Fabrizio De André, Hotel Supramonte is not in the top tracks of Fabrizio (at least not in the Last.fm db), I selected Via Del Campo: http://listandplay.com/#Search~Similar~Fabrizio%20De%20Andr%...
Btw: problem with some of the videos on YT is that a small amount is not embeddable, that could explain why a video doesn't shows up on sites like listandplay.com
Btw: problem with some of the videos on YT is that a small amount is not embeddable, that could explain why a video doesn't shows up on sites like listandplay.com
Thanks Jonathan. This is an excellent project. Funky UI, but excellent nevertheless.
Great! but interface is a bit confusing. i still do not understand it fully. :(
Thnx! Yes, UI is a pitty one, I could use some good advice on that.
Main problem: I'm trying to combine the 'MTV functionality' with the original functionality of listandplay.com (generate playlists in a few clicks). I thought about splitting up both projects, but I want to avoid that... What would you do?
Main problem: I'm trying to combine the 'MTV functionality' with the original functionality of listandplay.com (generate playlists in a few clicks). I thought about splitting up both projects, but I want to avoid that... What would you do?
I really think it should be as simple as possible. Split both projects.
Your UI could be just a search box, where you enter the artists name, and the App then creates a continuous stream of music videos. Not more, not less. Maybe add the Skip button and count (server side) how often a video has been skipped, to create a "blacklist" of bad videos, that won't show up anymore.
Look at the UI of http://www.mixest.com/ for instance - I think they nailed it.
Your UI could be just a search box, where you enter the artists name, and the App then creates a continuous stream of music videos. Not more, not less. Maybe add the Skip button and count (server side) how often a video has been skipped, to create a "blacklist" of bad videos, that won't show up anymore.
Look at the UI of http://www.mixest.com/ for instance - I think they nailed it.
My advice would be to make this a Roku channel. The SDK is available, the API is fairly easy. This would win you MAJOR brownie points within the Roku community (forums.roku.com). I'd love to be a beta tester.
[deleted]
Roku sounds good, I see they use BrightScript, do they support any javascript or do I've to recode everything?
My friends and I always talk about how cool a site like this would be, awesome work! This is pretty much exactly what we were thinking of; we referred to it as "Pandora with music videos."
Neat product, how do you match up the song title with the correct video on youtube ? - from my experience with searching for song titles on youtube the top hit often isn't the one you want.
Thanks, the workflow is: 1. User enters artist name 2. Top tracks of Artist shown as dropdown (Last.FM) 3. User selects track 4. Max 150 Similar tracks fetched from Last.fm according to that song 5. Fetch for every track the first hit from youtube (yes, 150 ajax calls) 6. Merge jsons, produce 1 big list 7. Start MTV!
Somehow this approach works for 99% of the times.
Somehow this approach works for 99% of the times.
Great Idea!
One rule of thumb should be not repeating songs of the same title (ie. covers).
If I search Where is my mind from the Pixies, the next song is Placebo's cover.
I guess you are using the regular search, that one shows the top 40 results from youtube. I'm not able to build in filters since it could be used for other things like checking out bbc news reports.
If you want the MTV functionality: press 'Generate your own MTV, click here!' below the search bar, enter Pixeis, select Where is my mind and there you go! http://listandplay.com/#Search~Similar~Pixies%20%7C%20Where%...
If you want the MTV functionality: press 'Generate your own MTV, click here!' below the search bar, enter Pixeis, select Where is my mind and there you go! http://listandplay.com/#Search~Similar~Pixies%20%7C%20Where%...
This works great for me! The "MTV" function covers a need I didn't even know I had. Thanks a lot, and rock on!
Outstanding. This is going to fly.
Nice project. Would be perfect in combination with GoogleTV.
Yes, would be great to use on the television. Anyone here with a GoogleTV box? Does the site work?
Really doesn't work with FF and Flashblock. I can't even enable the flash object because it keeps catching the click even and displaying an alert.
Ah! That's because there is a div overlay to catch the clicks on the video in order to fix the play/pause. I couldn't find another way to capture any mouseclicks on the flashvideo through the Chromeless flashplayer itself, if anyone knows a better workaround, tell me!
For now a (dirty) fix, you can reach the flash video object itself by (right mouse)clicking on the Youtube logo.
For now a (dirty) fix, you can reach the flash video object itself by (right mouse)clicking on the Youtube logo.
Conceptually, I can think of two classes of solutions:
1. Put the overlay only over the part of the player you really want to catch the clicks for. It sounds you want it only for the play/pause so it might work. You'd need to calculate or guess where these controls are actually on the screen.
2. Detect whether the player is loaded and only if it is do you insert the overlay or enable the click event for it. This solution has a nice side effect of being able to tell the user they need flash enabled for yrou app to work.
1. Put the overlay only over the part of the player you really want to catch the clicks for. It sounds you want it only for the play/pause so it might work. You'd need to calculate or guess where these controls are actually on the screen.
2. Detect whether the player is loaded and only if it is do you insert the overlay or enable the click event for it. This solution has a nice side effect of being able to tell the user they need flash enabled for yrou app to work.
I like 2.! It's on the todo list, great idea.
I get a window.alert that says the player can't be found - maybe in that case you should assume Flash is blocked/missing and remove the DIV for a few seconds so repeated clicking has an effect.
[deleted]
congrats, by i do it this at my site http://fliis.com time ago, and more options.... example http://www.fliis.com/?radio=Madonna&fine=Like%20a%20Pray...
MTV Circa 1993
Hey Jonathan I was thinking about getting youtube music videos, but I got scared off when I read about http://www.muziic.com/ getting in legal problems my music studios :
http://techcrunch.com/2010/06/20/muziic/
I was wondering what your thoughts are on that? I'm still young and in University atm, but our profs scare us like hell when talking about law suits, and they can ruin your entire life...etc etc, so I've been to scared to act on the youtube music api. Can you guys drop your thoughts on the issue?
I was wondering what your thoughts are on that? I'm still young and in University atm, but our profs scare us like hell when talking about law suits, and they can ruin your entire life...etc etc, so I've been to scared to act on the youtube music api. Can you guys drop your thoughts on the issue?
There are a few interesting points about this:
First, my server is located in The Netherlands, as far as I know only the law applies of the country where the site is being hosted.
Second, our RIAA (Buma/Stemra) made a deal with Youtube that ensures every Dutch citizen can embed YT videos without any problems (see: http://www.bumastemra.nl/en-US/OverBumaStemra/Actueel/Buma_a... and this from their FAQ http://i55.tinypic.com/svi1jt.jpg). It says that I don't have any problems as long as I don't monetize it. Since I hate banners and my costs are really low this ain't a problem.
Third, I actually don't store _any_ data or playlists. What I've done is coding a few scripts that let you crawl Youtube and Last.fm in a smart way. In that POV i'm not different to a regular search engine with a 'share your results' button, futhermore my server does totally nothing after you received the javascripts, it's just your browser and the other sites.
Last but not least, it's impossible for me to measure how many and what kind of videos are being played. All this stuff works with # anchor urls, my server simply can't register that.
I'm very curious in what other people think about this, can you ask your profs?
First, my server is located in The Netherlands, as far as I know only the law applies of the country where the site is being hosted.
Second, our RIAA (Buma/Stemra) made a deal with Youtube that ensures every Dutch citizen can embed YT videos without any problems (see: http://www.bumastemra.nl/en-US/OverBumaStemra/Actueel/Buma_a... and this from their FAQ http://i55.tinypic.com/svi1jt.jpg). It says that I don't have any problems as long as I don't monetize it. Since I hate banners and my costs are really low this ain't a problem.
Third, I actually don't store _any_ data or playlists. What I've done is coding a few scripts that let you crawl Youtube and Last.fm in a smart way. In that POV i'm not different to a regular search engine with a 'share your results' button, futhermore my server does totally nothing after you received the javascripts, it's just your browser and the other sites.
Last but not least, it's impossible for me to measure how many and what kind of videos are being played. All this stuff works with # anchor urls, my server simply can't register that.
I'm very curious in what other people think about this, can you ask your profs?
I'm in Canada so not sure if I can do the same, my service would require you to at least create a playlist like thing, so in essence you can find our how many plays have been made from youtube. Youtube really needs to write better guidelines for their youtube api for music. I'm still contemplating whether I should do it or not, my site would also be free to use...but have a lawsuit during my school semester would really get in the way.
What do you guys in HN think about the issue? Can we use youtube api to freely grab music videos? Can we store index to the url (for playlists?)
What do you guys in HN think about the issue? Can we use youtube api to freely grab music videos? Can we store index to the url (for playlists?)
Hot Chip - One Life Stand:
http://www.youtube.com/watch?v=mPXPIx1LlPY
It doesn't show up in your search results. How come?
http://www.youtube.com/watch?v=mPXPIx1LlPY
It doesn't show up in your search results. How come?
http://gdata.youtube.com/feeds/api/videos/mPXPIx1LlPY
gives <yt:noembed/> as response.
In other words, they disabled the embedding of that specific video. Just try this one: http://listandplay.com/#Search~Hot%20Chip%20-%20One%20Life%2...
In other words, they disabled the embedding of that specific video. Just try this one: http://listandplay.com/#Search~Hot%20Chip%20-%20One%20Life%2...
Now, for the advice:
1. On the front page show who's listening to what. Drop the How, What, etc. Don't tell people. Show people.
2. Allow people to create playlists with interjections, such as "That was Little Dragon with 'Twice', and now..."
3. Allow people to do insert temporal video casts: Sports, weather, news.
This could be really big if you hit it right. Find a designer for God's sake. And feel free to drop me a line. My email is my profile.