Airtime 2.3 for Broadcasters

Stream player for your website

If you are using Airtime for web streaming, you can embed a player applet into your website. jPlayer is a player applet (available under the GNU GPL from http://jplayer.org/) which uses the <audio> tag feature of HTML5 to play your streams. If the listener's browser does not support HTML5, the applet falls back to using Adobe Flash instead.

Proprietary browsers, such as Internet Explorer on Windows or Safari on Apple OS X, may not support Ogg Vorbis streams. Listeners who do not wish to install a browser with Ogg Vorbis support (such as Mozilla Firefox, Google Chrome or Opera) can listen to these streams using a separate media player such as VideoLAN Client, also known as VLC (http://www.videolan.org/vlc/).

Example code

You can download the example code for this chapter from:

http://en.flossmanuals.net/airtime-en-2-0/index/_booki/airtime-en-2-0/static/jPlayer_demo2.zip

Unzip this file on your computer, and then open the file jplayer-demo.html in your editor:

nano jplayer-demo.html

We'll focus on the two areas that you need to concern yourself with. Firstly, in the <head> tag of the document, you'll see some code like this:

$(document).ready(function(){

 $("#jquery_jplayer_1").jPlayer({

  ready: function () {
   $(this).jPlayer("setMedia", {
     oga: "http://localhost:8000/airtime_128"
      }).jPlayer("play");
  },

   ended: function (event) {
    $(this).jPlayer("play");
   },

    swfPath: "js",
    supplied: "oga"

 });

});

This code loads jPlayer, and specifies the source of the Airtime stream. The stream setting of http://localhost:8000/airtime_128 will work if you are testing jPlayer directly on the Icecast server that Airtime is connecting to. When testing on a remote server, you should change this setting to the IP address or domain name, port number and mount point of the Icecast server you are using.

As soon as jPlayer has finished loading, it will automatically begin to play the stream. The parameters ready, ended, swfPath and supplied are arguments passed to jPlayer. A full list of constructor arguments is available in the jPlayer Developer Guide at http://www.jplayer.org/latest/developer-guide/

jPlayer controls

Secondly, the <body> tag of the file jplayer-demo.html defines the controls displayed by jPlayer. These controls can be as simple as just one Play/Pause button, or a fully-fledged playback interface with a playlist, progress bar and volume control. This example code uses one of the simpler skins available for jPlayer, Blue Monday.

A stop button or progress bar is not useful when we are streaming continuously from Icecast, so we can remove these tags from the demo code, along with the tags specifying the playback time and file duration. The simplified HTML creates a play/pause button and a mute button, and looks as follows:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

 <div class="jp-audio">
  <div class="jp-type-single">

   <div id="jp_interface_1" class="jp-interface">

    <div class="label">Airtime Radio! 99.9 FM</div>

     <ul class="jp-controls">
      <li><a href="#" class="jp-play" tabindex="1">play</a></li>
      <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
      <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
      <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
     </ul>

   </div>

   <div id="jp_playlist_1" class="jp-playlist"></div>

  </div>
 </div>

When you open the HTML file jplayer-demo.html in a web browser, your player should appear as follows:

The original version of this demo code and skin are available from http://jplayer.org/download/ for further experimentation.