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-LC) & MP3 progressive download. For HLS & DASH the audio format should be AAC-LC or HE-AAC (it is to be noted that AAC-LC has better cross-device support) though it is also possible to use HLS with MPEG Audio container (MPEG-1/2 Audio Layer III audio only streams).

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, Google Cast & AirPlay or DASH DRM.

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

Microsoft browsers (MS Edge or Internet Explorer 11) do not provide support for audio-only HLS in MP3 format. See hlsWithMp3Audio setting for more information.


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:

var bitrates = {
  m4a: 'https://www.rmp-streaming.com/media/audio-only/bbb.m4a',
  mp3: 'https://www.rmp-streaming.com/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:

var 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.

Expected types for the bitrates object properties when the player is in audio-only mode follow:

bitrates.hls: String
bitrates.dash: String
bitrates.m4a: String
bitrates.mp3: String

When multiple streaming protocols are provided the player will opt for the best suitable candidate based on device capabilities.


Sizing and CSS 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 other than the Google Cast or AirPlay modules.

The player will have a fixed height of 38px - this cannot be modified. The player width will be responsive as usual. 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 in audio.less file 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/4.5.8/js/rmp.min.js" 
  integrity="sha384-N8iccZx4+o/JQEudKK8sDITl0HDIppkYGCW9hAuTu8vIfjfUKAY6Hi20rDh5Q22g"
  crossorigin="anonymous"></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.


Audio-only with DASH DRM

You can apply the information from our DASH DRM documentation to audio-only streaming.

Player code example:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/4.5.8/js/rmp.min.js" 
  integrity="sha384-N8iccZx4+o/JQEudKK8sDITl0HDIppkYGCW9hAuTu8vIfjfUKAY6Hi20rDh5Q22g"
  crossorigin="anonymous"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
var bitrates = {
  dash: '//storage.googleapis.com/shaka-demo-assets/dig-the-uke/dash.mpd'
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 640,
  audioOnly: true,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg',
  dashDrm: {
    servers: {
      'com.widevine.alpha': '//widevine-proxy.appspot.com/proxy'
    }
  }
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.