ShowHN: Generate your own MTV (Last.fm+Youtube)

http://TV.ListAndPlay.com

by JonathanBouman • 16 years ago

79 60 16 years ago

tv.listandplay.com

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!

olios• 16 years ago

Great! but interface is a bit confusing. i still do not understand it fully. :(

JonathanBouman22• 16 years ago

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?

phoboslab2• 16 years ago

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.

phoboslab2• 16 years ago

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!

JonathanBouman22• 16 years ago

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 :)!

pierrefar3• 16 years ago

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.

wilgert2• 16 years ago

You can disable Flashblock for a certain domain from the Flashblock context menu.

wilgert2• 16 years ago

Go to Tools -> Add-ons -> Flashblock -> Preferences tab Whitelist and add listandplay.com

pierrefar3• 16 years ago

Thanks. The faster way in this case is to use another browser that I don't lock down as much.

JonathanBouman22• 16 years ago

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.

pierrefar3• 16 years ago

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.

andrewf• 16 years ago

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.

acangiano2• 16 years ago

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...).

JonathanBouman22• 16 years ago

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

acangiano2• 16 years ago

Thanks Jonathan. This is an excellent project. Funky UI, but excellent nevertheless.

WA3• 16 years ago

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 :)

JonathanBouman22• 16 years ago

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?

WA3• 16 years ago

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/

jeroen• 16 years ago

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.

JonathanBouman22• 16 years ago

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?

dentonbros• 16 years ago

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.

JonathanBouman22• 16 years ago

Roku sounds good, I see they use BrightScript, do they support any javascript or do I've to recode everything?

aniket_ray• 16 years ago

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.

mikedmiked2• 16 years ago

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.

JonathanBouman22• 16 years ago

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.

mikedmiked2• 16 years ago

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.

david927• 16 years ago

I had the same idea but dropped it after seeing GrooveShark and being too busy with other things. Still, it has tremendous potential. A lot of people get their music from YouTube, but there's currently no good mechanism to leverage that.

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.

JonathanBouman22• 16 years ago

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?

NEPatriot• 16 years ago

Perhaps use a psd to html shop?

ig1• 16 years ago

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.

JonathanBouman22• 16 years ago

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.

dhs• 16 years ago

This works great for me! The "MTV" function covers a need I didn't even know I had. Thanks a lot, and rock on!

tickle_me_elmo• 16 years ago

Hot Chip - One Life Stand:

http://www.youtube.com/watch?v=mPXPIx1LlPY

It doesn't show up in your search results. How come?

JonathanBouman22• 16 years ago

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...

AlexMuir• 16 years ago

Outstanding. This is going to fly.

mortenjust• 16 years ago

Funny, made this one two years ago http://playmymusicvideos.com/

JonathanBouman22• 16 years ago

Nice, a Flash based one and slick effects I see :) I'm curious how the slideIn effect for title could be ported to jquery

tfh• 16 years ago

Very nice. I find your project better than the on posted. It's the more minimalistic approach that I liked. Very good work.

fara• 16 years ago

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.

JonathanBouman22• 16 years ago

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%...

nailer• 16 years ago

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.

JonathanBouman22• 16 years ago

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.

wanderr• 16 years ago

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.

JonathanBouman22• 16 years ago

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.

czstrong• 16 years ago

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."

scrame• 16 years ago

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.

JonathanBouman22• 16 years ago

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.

kjksf• 16 years ago

Nice project. Would be perfect in combination with GoogleTV.

JonathanBouman22• 16 years ago

Yes, would be great to use on the television. Anyone here with a GoogleTV box? Does the site work?

muffinman20102• 16 years ago

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?

JonathanBouman22• 16 years ago

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?

muffinman20102• 16 years ago

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?)

robchez• 16 years ago

MTV Circa 1993

javierguillen• 16 years ago

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...

johnboone• 16 years ago

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

ShowHN: Generate your own MTV (Last.fm+Youtube)

Related Stories