Build your own Airtime player!
  • Vote Up1Vote Down Eric PughEric Pugh
    Posts: 25Member

    Hi.


    I wanted to share a tool I've recently put online to help stations create a "mobile first" stream player. The player is a responsive web page with the actual player docked at the bottom of the page. It also includes additional station information, current stream metadata (either from airtime "live-info" or from the stream's headers,) the "week-info" schedule from Airtime, and potentially a list of podcasts files.


    Here's a screenshot of the player and you can view a live demo here:


    image


    Also, you can quickly generate your own player using this online form. Input from the form (info, color, logo, etc.) is used to create an archive of normal HTML, CSS, JS files for the custom player, which you can download, extract, and upload to your web server. Aside, from being helpful for smaller stations which might have issues creating a "frontend" website for their station, this could also be a good starting point for more technical people who could (obviously) edit the downloaded files as they wish, or pull from the github repository.


    Thanks.

    Post edited by Eric Pugh at 2013-11-21 16:36:36
  • 5 Comments sorted by
  • Vote Up0Vote Down hoerichhoerich
    Posts: 627Member, Airtime Moderator
    Thanks, Eric!
    This is very useful!
    Official Airtime Forum Manager
    --------------------------
    Most of the time an issue is located between keyboard and chair.
  • Vote Up0Vote Down Mike DarkfloorMike Darkfloor
    Posts: 18Member
    Great work, thanks.

    I am having some trouble getting the schedule and podcast bits to work.

    under Airtime Live Info URL I've tried the following but none seem to work. Can you tell me if any of these are correct and if they aren't what is the correct URL to use. 

    The podcast link doesn't work either for me. I've tried using the following
    You can see this in action here http://futuremusic.fm/play

    Thank you.

    http://futuremusic.fm
  • Vote Up0Vote Down Mike DarkfloorMike Darkfloor
    Posts: 18Member
    Looking through the Github I can't see where the Airtime parameters are added to the config file or anywhere else. Where should I be looking?

    Thx
    http://futuremusic.fm
  • Vote Up0Vote Down Eric PughEric Pugh
    Posts: 25Member
    Hi Mike,
    Sorry for missing this.
    For the Airtime Schedule info I think there was a string replacement error when the "bundle" was generated. Try replacing the "url" value of line 571 of js/lsap.js with your own URL
    $.ajax({
    type: "GET",
    url: "http://airtime.isourblock.org/api/week-info?callback=x",
    dataType: "jsonp",
    success: function(data) {
    populateDailyLineup( data );
    populateAllPrograms( data );
    }
    });
    For the Podcast parsing issue... I'm seeing an error. The parser is looking for an Enclosure element with the url to a file which can then be played in the "on demand" player. I don't see this in the XML you provided.

    Thanks for trying it out!
    Post edited by Eric Pugh at 2014-09-03 11:08:35
  • Vote Up0Vote Down Viktor SilfverViktor Silfver
    Posts: 6Member
    Hi Eric,

    What a great player you have built. :)

    The only thing we noticed was that we can't get current stream metadata to work under https. Probably because you don't have an SSL certificate on you server there you have remote.airtime.php.

    Can you please send me that file so I can put it on our server? is it any other files that might be needed to get it to work?

    Thanks
    Viktor
Add a Comment