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:
<audio>
elementRSAS has some unique features that make it easier to build a better player for your website, including:
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:
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) |
---|---|
MP3 | audio/mpeg |
AAC | audio/aac |
AAC+ | audio/aac |
HE-AAC v1 | audio/aac |
Ogg Vorbis | application/ogg |
Ogg Opus | application/ogg |
Ogg FLAC | application/ogg |
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.
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
},
...
]
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.
latency=high
query string parameter. Example: http://www.example.com/mount?latency=highlatency=low
query string parameter: Example: http://www.example.com/mount?latency=lowBy 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 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!