Players

Rocket Streaming Audio Server streams can be played by any player that supports HTTP streams. It uses the same streaming protocol as Icecast and SHOUTcast, for excellent compatibility.

Some players we recommend are:

  • Windows:
  • Mac:
  • Mobile:
    • TuneIn
    • RadioTuner
  • Player Widgets for your Website:
    • MUSES
    • HTML5 <audio> element
  • HLS:
  • HLS.js (HLS)
  • See HLS Players for more recommendations.

Building your own HTML5 / JavaScript Audio Player

RSAS has some unique features that make it easier to build a better player for your website, including:

  • Live streaming metadata that's easy to access from JavaScript
  • Frame synchronized streaming and fallbacks for MP3 and AAC streams, to provide seamless fallbacks that won't kick your listeners.
  • CORS enabled by default

A good starting point is the HTML5 <audio> element, which you can use like:

    <audio controls="controls" preload="none">
        <source src="http://mystreamhere/mount" type="audio/mpeg">
    </audio>

... which renders as:


(Click to play)

It is critical that you specify the type that matches your stream's audio codec, otherwise your stream will not play correctly in some browsers. The following table shows which HTML5 audio type to specify for each codec:

Codec type (HTML5 <audio> tag mimetype)
MP3audio/mpeg
AACaudio/aac
AAC+audio/aac
HE-AAC v1audio/aac
Ogg Vorbisapplication/ogg
Ogg Opusapplication/ogg
Ogg FLACapplication/ogg

Live Metadata

Live metadata can be received in JavaScript using HTML5 Server-Sent Events. Each mount has a special URL at /[mount]/metadata that provides "push" live streaming metadata.

For example, the following JavaScript snippet will log the latest metadata to the JavaScript console every time it is received:

document.addEventListener("DOMContentLoaded", function() {

    var stream_url = "http://mystreamurl.com/mount"; //Insert your stream URL here.

    try {
        var url = stream_url + "/metadata";
        var eventSource = new EventSource(url);

        eventSource.onmessage = function(event) {
            var metadata = JSON.parse(event.data);
            var artistTitle = metadata['metadata'];

            //Print the new metadata to the console.
            console.log(artistTitle);
        }
    } catch (error) {
        console.log("EventSource initialization failed");
        console.log(error);
    }
});

You can customize this snippet to show live metadata in a player widget, or show live metadata on your website.

Note that libraries supporting Server-Sent Events are available for many programming languages and platforms, including Objective C, Java, Node.JS, and Python.

Metadata History API

A common feature of web-based players is to show recently played tracks. RSAS makes this easier by providing a Metadata History JSON API, which shows the last 10 metadata updates (recently played tracks).

The Metadata History API is available on each mount, by visiting /mount/metadata-history (HTTP GET). A UNIX timestamp in UTC of when each metadata update was received is included, which should be when each track was played.

An example snippet of a Metadata History API response is below:

[
    {
        "metadata": {
            "song": "Larry Goldings, Jay Bellerose & David Piltch - Shelly My Love"
        },
        "timestamp": 1600453489941
    },
    {
        "metadata": {
            "song": "Houston Person - Love Won't Let Me Wait"
        },
        "timestamp": 1600453138740
    },
    {
        "metadata": {
            "song": "Sylvain Luc - MaitP"
        },
        "timestamp": 1600452844995
    },
   ...
]

Fast Start and Low Latency Modes

RSAS supports a URL query string parameter that allows players to buffer and start playback faster, at the expense of higher delay. Some players have a large playback buffer that must be fully filled before they start playing, and by using a special URL, you can make playback start faster by telling RSAS to send more audio initially.

By default, with no latency parameter specified, RSAS will strike a balance between these two options, allowing playback to start reasonably quickly in most players, while keeping latency low.

The fast start / high latency mode is particuarly useful for playback via the <audio> HTML5 tag in web browsers. Most browsers need many seconds of audio buffered before playback will start, and the latency=high query string will satisfy this.

HTML5 Media Source Extensions

HTML5 Media Source Extensions is an advanced API used to provide adaptive playback of HLS and MPEG-DASH in the browser, by companies like Netflix and Amazon. It provides a high degree of control over buffering and playback, which goes beyond what's possible with the regular HTML5 <video> or <audio> tags.

Rocket Streaming Audio Server is compatible with HTML5 Media Source Extensions (MSE), and can be used to build players with extremely fast playback start times and low latency. HTML5 MSE-based players also provide better stutter resistance by crossfading between short gaps, making dropouts much harder to notice.

The Radio Mast player widget is built using this technology, and as far as we know, we're the first ones to use it for HTTP streaming audio on the web.

We're looking at open sourcing our player and providing an example here in the future.

If you're interested in low latency streaming on the web or using HTML5 MSE for your streams, please get in touch!