Radiant Media Player

Audio-only streaming



Supported streaming formats for audio-only

Radiant Media Player supports audio-only streaming to HTML5 audio in HLS, DASH or M4A (AAC) & MP3 progressive download. For HLS & DASH the audio format should be AAC (MP3 audio-only streaming with HLS or DASH is not supported).

Live, DVR and on-demand audio-only streaming is supported. You can control the player in audio-only streaming mode with the player API as well. Most other audio-compatible player features should work with an audio-only player including audio-only ads.

Browser support and other streaming requirements are generally the same as the ones stated in our streaming documentation pages for each protocol.

Only the 's1' player skin is currently available for our audio-only player. Skin colorization through the skinBackgroundColor, skinButtonColor & skinAccentColor setting are supported.


Player set up


Audio-only player configuration options

audioOnly: Boolean

This setting enables the audio-only player layout and is a mandatory requirement to properly play audio-only streams. Default: false.

bitrates: Object

As with a video stream we need to pass streaming data to the player. This is done through the bitrates player setting. New options are available for audio-only streaming including M4A and MP3 progressive download.

Example of audio-only bitrates setting with M4A & MP3 progressive download:

bitrates: {
  m4a: 'https://d1swr4916zvh4g.cloudfront.net/media/audio-only/bbb.m4a',
  mp3: 'https://d1swr4916zvh4g.cloudfront.net/media/audio-only/bbb.mp3'
}

Generally MP3 coverage on modern browsers is a bit better than M4A/AAC but most should support both. As a result using MP3 only or M4A/AAC progressive download only should be enough. At equal bitrate M4A/AAC will produce better quality than MP3 but this difference fades away when audio bitrate reaches 192 kbps and above.

Example of audio-only bitrates setting with HLS:

bitrates: {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:audio.smil/playlist.m3u8'
}

Using an adaptive bitrate technology like HLS or DASH improves the user experience and reduces bandwidth usage even for audio-only streaming. It is preferred over progressive download when available. The player will be in 'auto' mode for adaptive bitrate streaming while in audio-only mode but you can still use the player API to get/set bitrate information.

You can mix HLS, DASH and progressive download - the player will opt first for HLS then for DASH then for progressive download based on what is supported by the targeted environment.


Sizing considerations

In audio-only mode the player will only displays its control bar with a dedicated UI. It will not display poster or player modules - it is up to you to display those informations outside the player control bar through our player API.

The player will have a fixed height of 38px - this cannot be modified. The player width will be responsive as usual based on the input width value which serves as maximum width value. The iframeMode and autoHeightMode settings cannot be used.

When in audio-only mode the player has a rmp-audio-only class on its container. This can be used to target CSS for the audio-only player. Player Less/CSS source file for the audio-only player can be found at audio.less within the self-hosted package.


Complete example

Player example:

Player code for the above example:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v4/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify audio-only streaming data to feed the player
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:audio.smil/playlist.m3u8'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  width: 640,
  audioOnly: true // The magic happens here
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Audio-only HLS with ID3 tags

Using HLS the player can extract ID3 tags from an audio-only HLS stream. See here for complete documentation.


Audio-only ads support

Refer to our audio-only ads documentation page for more information about playing audio-only ads through our audio-only player.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.