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 & OGG (Vorbis or Opus) 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/OGG. Due to lack of support in Cast Application Framework, casting of HLS audio-only content is currently not supported. Google Cast poster for audio-only streaming can be set with googleCastPoster setting.


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.

src: Object

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

Example of HTML5 audio src setting with OGG, M4A & MP3 progressive download:

var src = {
  ogg: 'https://your-opus-url.ogg',
  m4a: 'https://your-aac-url.m4a',
  mp3: 'https://your-mp3-url.mp3'
};

OGG containers are not supported on Apple devices and older Microsoft browsers, hence if you want to use it you will need to use either a M4A or MP3 fallback. The player will try and detect support in this order: OGG > M4A > 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 src setting with HLS:

var src = {
  hls: 'https://your-audio-only-hls-url.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 src object properties when the player is in HTML5 audio mode follow:

src.hls: String
src.dash: String
src.m4a: String
src.mp3: String
src.ogg: String

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

oggCodec: String

For OGG containers with progressive download, specify the audio codec for content. Value should be either 'opus' or 'vorbis'. Default: 'vorbis'.


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 40px - 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/5.0.3/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - HLS audio-only in this example
var src = {
  hls: 'https://your-audio-only-hls-url.m3u8'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  // Set up audio-only UI and optimisations
  audioOnly: true
};
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/5.0.3/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - DASH audio-only in this example
var src = {
  dash: 'https://your-audio-only-dash-url.mpd'
};
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  // Set up audio-only UI and optimisations
  audioOnly: true,
  // Passing DRM settings
  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/5.0.3/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - Live HLS audio-only in this example
var src = {
  hls: 'https://your-live-audio-only-hls-url.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  // Set up audio-only UI and optimisations
  audioOnly: true,
  // Set up live UI and optimisations
  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.