Radiant Media Player

HTML5 audio support



Documentation sections


Supported streaming formats to HTML5 audio

Radiant Media Player supports streaming to HTML5 audio (e.g. audio-only) 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(1) (MPEG-1/2 Audio Layer III audio only streams).

Live, DVR and on-demand streaming to HTML5 audio is supported. You can control the player in HTML5 audio mode with the player API as well. Most other audio-compatible player features should work with an HTML5 audio player including HTML5 audio ads, Google Cast(2) & AirPlay or DRM.

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

(1) HLS streaming in MP3 format to Internet explorer 11 is not available.

(2) Casting of audio-only content is only supported for DASH and M4A/MP3. Due to lack of support in Cast Application Framework, casting of HLS audio-only content is currently not supported.


Player settings

audioOnly: Boolean

This setting enables the HTML5 audio 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 streaming to HTML5 audio including M4A and MP3 progressive download.

Example of HTML5 audio 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 HTML5 audio bitrates setting with HLS:

var bitrates = {
  hls: 'https://1703298472.rsc.cdn77.org/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 streaming to HTML5 audio. It is preferred over progressive download when available. The player will be in ABR 'auto' mode while in HTML5 audio mode but you can use the player API to get/set bitrate information.

Expected types for the bitrates object properties when the player is in HTML5 audio 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 HTML5 audio 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 autoHeightMode setting cannot be used.

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


Player code 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.9.0/js/rmp.min.js" 
  integrity="sha384-i3qlEyPNI8XWb4gU9AmU1cZeqZCeGI77B6wA4sq7fp7j8vvchcW54FuZrEACmZIF"
  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://1703298472.rsc.cdn77.org/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 HTML5 audio magic happens here
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

HLS with ID3 tags

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


HTML5 audio ads support

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


HTML5 audio with DRM

You can apply information from our DRM documentation for streaming secured content to HTML5 audio.

Player code example:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/4.9.0/js/rmp.min.js" 
  integrity="sha384-i3qlEyPNI8XWb4gU9AmU1cZeqZCeGI77B6wA4sq7fp7j8vvchcW54FuZrEACmZIF"
  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,
  width: 640,
  // We enter HTML5 audio mode
  audioOnly: true,
  // We pass our DRM data to the player
  dashDrm: {
    servers: {
      'com.widevine.alpha': '//widevine-proxy.appspot.com/proxy'
    }
  }
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Live streaming to HTML5 audio

You can apply information from our live docs or DVR docs for streaming live or DVR content to HTML5 audio.

Player code example for live HLS to HTML5 audio:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/4.9.0/js/rmp.min.js" 
  integrity="sha384-i3qlEyPNI8XWb4gU9AmU1cZeqZCeGI77B6wA4sq7fp7j8vvchcW54FuZrEACmZIF"
  crossorigin="anonymous"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
var bitrates = {
  // Replace with your live audio HLS feed
  hls: 'live-audio-only-hls-url.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  width: 640,
  // We enter HTML5 audio mode
  audioOnly: true,
  // We enter live mode
  isLive: true
};
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.