Fórum » Development Discussion

HTML 5 last.fm player (proof of conept)

 
    • tburny disse...
    • Forum Moderator
    • Ago 15 2011, 3h36

    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 :)
    Editado por tburny em Set 18 2011, 18h59
    • DFA1979 disse...
    • Assinante
    • Ago 15 2011, 8h49
    Sounds good! I'll take a look at this after work.

    • Skiye disse...
    • Forum Moderator
    • Ago 17 2011, 20h29
    hmm, cant get the index file to open in my browser...any trick/external app to use?

    • tburny disse...
    • Forum Moderator
    • Ago 18 2011, 0h14
    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 disse...
    • Forum Moderator
    • Ago 18 2011, 1h43
    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 disse...
    • Usuário
    • Set 6 2011, 16h10
    Any chance this could be put on github or similar? I'd very much like to contribute.

    • snyde1 disse...
    • Assinante
    • Set 7 2011, 3h02

    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 disse...
    • Forum Moderator
    • Set 7 2011, 10h11
    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 :)
    Editado por tburny em Set 18 2011, 19h02
    • tburny disse...
    • Forum Moderator
    • Set 14 2011, 5h04
    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 disse...
    • Alumni
    • Set 15 2011, 21h50
    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 disse...
    • Forum Moderator
    • Set 18 2011, 18h55
    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 disse...
    • Usuário
    • Nov 5 2011, 17h20
    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 disse...
    • Forum Moderator
    • Nov 7 2011, 13h43
    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 disse...
    • Usuário
    • Nov 8 2011, 9h17

    [spam]

    [spam]

    Editado por Ziomek2000 em Nov 8 2011, 9h55
    • tburny disse...
    • Forum Moderator
    • Dez 6 2011, 1h33
    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 :)
  • 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 disse...
    • Forum Moderator
    • Mar 10 2012, 23h02
    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 :)
  • many thanks!

    • tburny disse...
    • Forum Moderator
    • Mar 29 2012, 23h28
    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 :)
    Editado por tburny em Abr 6 2012, 18h20
    • rfruth11 disse...
    • Usuário
    • Abr 5 2012, 19h49
    tnx T (& all) !

    • tburny disse...
    • Forum Moderator
    • Ago 29 2012, 18h56
    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 :)
Usuários anônimos não podem postar mensagens. É preciso fazer login ou criar uma conta para postar nos fóruns.