Scratching my own itches; my online radio player

I’ve never been into iTunes or Spotify, tuning into online radio-stations instead to satisfy my constant need for musical discovery, excitement and/ or entertainment. For a long time I was an avid KCRW listener, but times change and their eclecticism does not necessarily match mine the way it used to, so over the last couple of years many online streams (Worldwide FM, Nova, TSF Jazz, KCSN, Laurent Garnier’s PBB, …) were added to my favorites which I stored in a draft mail in Gmail of all places, accessing that file on my different devices and -where available- using VLC to play them.

But VLC isn’t available everywhere (hello “smart” TV), it is not great to manage a collections of streams and copy/pasting URL’s from that draft mail is clumsy, so after creating a simple webpage with an HTML5 audio element for my wife to listen to the local “Radio 1 classics” stream on our TV, I decided to extend that to display a list of streams to choose from with a minimum of vanilla JavaScript to do the actual switching and just a dash of CSS (still struggling with vertically aligning multiline titles in those inline-blocks, but I don’t mind that too much. No really, I’m not nervous about that whenever I see it, not at all!).

The result (at https://futtta.be/r/) is an unattractive but pretty usable mp3 stream player that I use on 4 different locations and which I can update easily to accommodate my wife’s knack for doo-wap and xmas-music. Maybe I should add falling snow-flakes to surprise her when we put up the Christmas tree? :-)

9 thoughts on “Scratching my own itches; my online radio player

    1. frank Post author

      Thanks Nathan, works beautifully on FF/ Chrome, to be seen how the browser on the Samsung TV handles flexboxes though ;-)

      Reply
    1. frank Post author

      I should check the useragent for the samsung browser, maybe that will reveal some interesting info .. Will have a look at CSS transform too, one of these days :)

      Reply
      1. frank Post author

        so that useragent: Mozilla/5.0 (SMART-TV; Linux; Tizen 2.4.0) AppleWebkit/538.1 (KHTML, like Gecko) SamsungBrowser/1.1 TV Safari/538.1

  1. Nathan

    Okay tizen 2.4 and webkit 538 are quite old :) That would explain it.
    Actually my original trick MIGHT work if you actually CSS prefix it with `-webkit-` (looking at the webkit version I think it corresponds with safari 7ish which still needed the prefix.

    ul#list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    }

    Get rid of ul#list li::after

    ul#list li {
    display: -webkit-flex;
    display: flex;

    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    }

    I guess no newer version of the software are available for the device?

    PS: Can you tell how annoyed I was by the screenshot I keep trying to fix a problem I never will have :)

    Reply
    1. frank Post author

      arggggg, CSS prefixes .. let me give that a try

      re. the screenshot: was hoping that would bother someone enough to bother ;-)

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.