Forum » Development Discussion

HTML 5 last.fm player (proof of conept)

 
    • tburny a dit :...
    • Forum Moderator
    • 15 août 2011, 3h36m

    HTML 5 last.fm player (proof of conept)

    Tonight I hacked together a basic last.fm player - completely in HTML 5!
    Wanted to make it a little research project in preparation for an embedded Combo.fm station player which does the descriptions right. Plus maybe a HTML revival of the good old flash widgets *yeeah*

    You will need php5-curl as apache module. I use a (quite) selft-made php script for proxying the POST requests. Last.fm doesn't set any allow-origin Cross-site-scripting headers...to bad.
    Chrome has some trouble sending the station parameter contents. Therefor it won't work in Chrome atm.
    Edit: To be more precise, it does not work in Chromium as mp3 is a proprietary codec and only supported by Google Chrome.
    Download source: https://github.com/tburny/html5-lastfm-player
    Try it using Firefox: http://burnynet.de/lastfm_player
    Type a station url, e.g. lastfm://artist/Radiohead/similar into the text box, click OK and enjoy.

    Important:
    1) Last.fm is not related to this project! Its my own personal one
    2) Seeking potentially violates last.fm's ToS and will be disabled in future versions. Remember, this is only a proof of concept :)
    3) It does not scrobble (yet) ;)

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    Modifié par tburny le 18 sept. 2011, 18h59m
    • DFA1979 a dit :...
    • Abonné
    • 15 août 2011, 8h49m
    Sounds good! I'll take a look at this after work.

    • Skiye a dit :...
    • Forum Moderator
    • 17 août 2011, 20h29m
    hmm, cant get the index file to open in my browser...any trick/external app to use?

    • tburny a dit :...
    • Forum Moderator
    • 18 août 2011, 0h14m
    If you are using ubuntu 10.04 or higher with mod_userdir, then you have to enable php for mod userdir :)

    sudo nano -w /etc/apache2/mods-enabled/userdir.conf
    Search for
    <IfModule mod_userdir.c>
    UserDir /home/*/public_html
    UserDir disabled root
    ...
    </IfModule>
    and comment the lines there

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    • Skiye a dit :...
    • Forum Moderator
    • 18 août 2011, 1h43m
    i dont have apache2 installed. I think what im going to do is ftp this up to my site and see if i can hit it that way :)

    • area a dit :...
    • Utilisateur
    • 6 sept. 2011, 16h10m
    Any chance this could be put on github or similar? I'd very much like to contribute.

    • snyde1 a dit :...
    • Abonné
    • 7 sept. 2011, 3h02m

    Re: HTML 5 last.fm player (proof of conept)

    tburny said:
    Try it using Firefox: http://burnynet.de/lastfm_player
    Works in Opera 11.51 as well. (Plays, doesn't scrobble. Doesn't start RQL stations.)

    Improve your view of Last.fm - add some User Scripts.
    Did I hear that right? Mondegreens - for the misheard word. Like Odds? Can't get better than Even Odds!

    Speak your truth quietly and clearly; and listen to others, even to the dull and the ignorant; they too have their story.
    • tburny a dit :...
    • Forum Moderator
    • 7 sept. 2011, 10h11m
    area sagte:
    Any chance this could be put on github or similar? I'd very much like to contribute.

    Sure :) Today or tomorrow, will send you a PM then.

    Btw last.fm will (probably) set some Cross-Site-Scripting headers in future, so we can do scrobbling easily.

    Oh and I just figured out on how to store the session key securely while keeping the ability to do all the api calls client-side (means with api key + secret exposed).
    The user goes through the authentication process server side, means the server receives his session key.
    Afterwards, the user defines a password which is sent to the server. The server then creates a salted md5 hash consisting of the password.
    Passwords are often more likely to remember than session keys.
    Now, to do write requests, the user logs in using his password and the session key is sent back.
    Edit: that wont really work....

    I guess I didn't do the thought to the very end, so if anyone got proposals...
    Its at least more secure then storing the session key in a cookie ;)

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    Modifié par tburny le 18 sept. 2011, 19h02m
    • tburny a dit :...
    • Forum Moderator
    • 14 sept. 2011, 5h04m
    Source code is now available on github :)

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    • russx2 a dit :...
    • Utilisateur
    • 15 sept. 2011, 21h50m
    Hey kids,

    Just a heads up - we implemented CORS support in the API today so you can dump your PHP proxy :)

    Let me know if you have any problems with it.

    Russ

    • tburny a dit :...
    • Forum Moderator
    • 18 sept. 2011, 18h55m
    I know, dunk already sent me a PM...although I did not have to time to try it out yet.
    What's bugging me a bit is that there is no good way to hide the api secret from an attacker if using only client side javascript, because you have of course to sign the important calls...
    but on the other hand, 1500 requests per client and five minutes in contrary to 1500 requests per server is really tempting

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    • area a dit :...
    • Utilisateur
    • 5 nov. 2011, 17h20m
    Okay, I've finally had some time to contribute meaningfully to this. I forked it on GitHub, and I have put up a version with my edits on my website: http://www.idefex.net/lastfm5/

    So, the big points of note:

    • It now logs you into your Last.FM account. This means that only subscribers can use it (indeed, this is the reason why I just subscribed - so that I could meaningfully code and test this).
    • It now updates 'now playing' and scrobbles at 50% of a track played.
    • I have opted to avoid exposing the API secret being used to the user by signing all API requests server-side. The API requests themselves are still made by the client, but it queries the host for what the signature should be. This is done by a PHP script. I think this is the best of all worlds, but other suggestions would be welcome.
    • It still allows seeking, in violation of the Last.FM API.
    • It doesn't work on Chrome, and neither does the proof-of-concept linked to in the OP any more, whereas it used to. I'm not sure what has changed, but I have been very occasionally able to get a radio track to play in Chrome, so I suspect some sort of race condition. Insights appreciated. It works flawlessly for me in Firefox.
    • If the API returns an error to a call, I don't know what will happen - there is very little error handling implemented currently.
    • proxy.php removed, taking advantage of CORS discussed above. This required some editing of the JS API, which I have returned to its un-stripped state.

    • tburny a dit :...
    • Forum Moderator
    • 7 nov. 2011, 13h43m
    Looks nice :) Btw if using flash. html as options it will work in chroumium too, but I don't think "flash before html 5" makes sense for this proof of concept.

    Maybe we can do a widget later on? The old radio widgets were discontinued some years ago :(

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    • aini123 a dit :...
    • Utilisateur
    • 8 nov. 2011, 9h17m

    [spam]

    [spam]

    Modifié par Ziomek2000 le 8 nov. 2011, 9h55m
    • tburny a dit :...
    • Forum Moderator
    • 6 déc. 2011, 1h33m
    I have some deeper insights why Google Chrome + MP3 is not working.
    Firefox requests the whole file of playlist.fetch, gets redirected to the correct blabla/128.mp3 via a 302 Moved Temporarily and gets a 200 OK.
    Chrome requsts a byte range:
    Range: bytes=0-

    and the server responds with

    HTTP/1.1 206 Partial Content
    Accept-Ranges: bytes
    Content-Type: audio/mpeg
    Content-Length: 3955322
    Accept-Ranges: bytes
    Content-Range: bytes 0-3955321/3955322
    Cache-Control: no-cache, must-revalidate

    As you can see, the last byte in the content range is missing - always.
    But because (I think) it wants to read the ID3 tags, it tries to request the last byte, too, in a second request.
    Unfortunately, the url of this second is not the 128.mp3 file, but the original url from playlist.fetch().
    As this url seems to be a one-time ticket to the 128.mp3 the request fails, which means the download fails (could not look up id3 tag). As a result, the audio is not played.

    *Maybe* it is related to https://code.google.com/p/chromium/issues/detail?id=94285 but I think it is definitely an issue on last.fm's side, too.
    HTML 5 is the future and because now we have the chance to get some fancy, flash-free last.fm widgets, we should get all help needed :)

    I can provide pcap/wireshark files on demand.

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    • neilclavin a dit :...
    • Utilisateur
    • 26 fév. 2012, 17h21m

    Re: HTML 5 last.fm player (proof of conept)

    Hi

    Does the script require a subscriber account to run?

    I can get it to run on my own server with your apikey details but not with mine...

    Thanks!

    • tburny a dit :...
    • Forum Moderator
    • 10 mars 2012, 23h02m
    I got a fix for the mp3 playback in Chromium on Ubuntu, but it still will need to do some research and maybe an upgrade of the jPlayer plugin.

    First deinstall Chromium completely:


    sudo aptitude remove chromium-browser chromium-codecs-ffmpeg chromium-browser-l10n

    Then, reinstall, but with chromium-codecs-ffmpeg-extra:

    sudo aptitude install chromium-browser chromium-codecs-ffmpeg-extra chromium-browser-l10n

    I tried it with http://www.jplayer.org/latest/demo-01-supplied-mp3/ and it works, I couldn't find any embed-Tags, so it's flash-free

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    • giuseppebi a dit :...
    • Utilisateur
    • 13 mars 2012, 20h05m
    many thanks!

    • tburny a dit :...
    • Forum Moderator
    • 29 mars 2012, 23h28m
    The audio does not work in Chrome/Chromium because when requesting the url from the playlist, last.fm uses a 302 redirect to another server.
    This seems to violate some same origin policy, see e.g. http://www.lastfm.de/group/Last.fm+Web+Services/forum/21604/_/651534

    Thanks to the pause function, we can request the same url twice.

    Unfortunately, the streaming servers do not seem to support HEAD requests:
    curl -I http://play.last.fm/user/21ddbdb8fb021fded7683c50313555cf.mp3
    HTTP/1.1 501 Not Implemented
    Server: Apache-Coyote/1.1
    Content-Type: text/html;charset=utf-8
    Content-Length: 989
    Date: Thu, 29 Mar 2012 23:30:18 GMT
    Connection: close


    (edit) After some intense testing I found out that I was wrong.

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
    Modifié par tburny le 6 avr. 2012, 18h20m
    • rfruth11 a dit :...
    • Utilisateur
    • 5 avr. 2012, 19h49m
    tnx T (& all) !

    • tburny a dit :...
    • Forum Moderator
    • 29 août 2012, 18h56m
    I tried it again today and it worked.
    See http://www.idefex.net/lastfm5/ (thx again area

    Combo.fm: Combine your favourite radio stations! | My Blog | scala-lastfmapi | Cache2k - A high performance Java in-memory cache
    P.S.: Do not click here
    throw new PokemonException(); //Gotta catch 'em all
    My forum post reflects my personal opinion :)
Les utilisateurs anonymes ne peuvent pas poster de messages. Merci de vous connecter ou de créer un compte pour pouvoir intervenir dans les forums.