HTML5 Audio

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 (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⁽¹⁾ & AirPlay or DRM.

You may also use audio-only content with our HTML5 video player. This allows for the display of a permanent poster and video ads with audio-only content.

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

(1) 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 poster setting.

Player settings

audioOnly: Boolean

This setting enables our HTML5 audio player layout. Default: false.

audioOnlyUseVideoLayout: Boolean

This setting enables audio-only content to be displayed in our video player. This allows for features like player modules and video ads to be made available with audio-only content. 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:

const 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:

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

Multi-codecs set up

HLS & DASH

For HLS and DASH streaming, manifests should hold codecs information so that the player can make an informed decision about which codec to choose based on client-device capabilities and available renditions. If not present in the manifest, codecs information will be determined when reading the first chunk. It is best practice to provide video/audio codecs information in the manifest though.

Progressive download

For progressive download the player assumes the following:

• If it is MP4 the player assumes AAC-LC audio codecs (codecs="mp4a.40.2") will be provided
• If it is OGG the player assumes Opus audio codecs (codecs="opus") will be provided

How to tell the player that a different audio codec is available in this case? Indeed the player also supports the following audio codecs:

• Audio: AAC (including AAC-LC & HE-AAC), MP3, Vorbis, Opus, AC-3, EC-3

In that case we will need to detect before player set up the supported audio codecs by the client-device.

pdCheckCodecsDone: Boolean

This setting disables internal codecs support testing for progressive download, so we can build our own detectection logic before player set up. Default: false.

Example for a M4A container:

const testAudioTag = document.createElement('audio');
let src = {};
const heAACv2Src = 'https://www.rmp-streaming.com/media/pd/heaacv2.m4a';
const ac3Src = 'https://www.rmp-streaming.com/media/pd/ac3.m4a';
const ec3Src = 'https://www.rmp-streaming.com/media/pd/eac3.mp4';
if (testAudioTag.canPlayType('audio/mp4; codecs="mp4a.40.29"')) {
  src.m4a = heAACv2Src; // HE-AACv2 audio
} else if (testAudioTag.canPlayType('audio/mp4; codecs="ac-3"')) {
  src.m4a = ac3Src; // AC3 audio
} else if (testAudioTag.canPlayType('audio/mp4; codecs="ec-3"')) {
  src.m4a = ec3Src; // EC3 audio
}
// Player settings
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  audioOnly: true,
  pdCheckCodecsDone: true // Here we tell the player to ignore internal codecs check

};
const rmp = new RadiantMP('rmp');
rmp.init(settings);

Example for a OGG container:

const testAudioTag = document.createElement('audio');
let src = {};
const opusSrc = 'https://www.rmp-streaming.com/media/pd/opus.ogg';
const vorbis2Src = 'https://www.rmp-streaming.com/media/pd/vorbis.ogg';
if (testAudioTag.canPlayType('audio/ogg; codecs="opus"')) {
  src.ogg = opusSrc; // Opus audio
} else if (testAudioTag.canPlayType('audio/ogg; codecs="vorbis"')) {
  src.ogg = vorbis2Src; // Vorbis audio
}
// Player settings
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  audioOnly: true,
  pdCheckCodecsDone: true // Here we tell the player to ignore internal codecs check

};
const rmp = new RadiantMP('rmp');
rmp.init(settings);

Sizing and CSS considerations for our HTML5 audio player

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

Audio-only content with our HTML5 audio player - see this example here

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - HLS audio-only in this example
const src = {
  hls: 'https://your-audio-only-hls-url.m3u8'
};
// Then we set our player settings
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  // Set up audio-only UI and optimisations
  audioOnly: true
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Audio-only content with our HTML5 video player - see this example here

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - HLS audio-only in this example
const src = {
  hls: 'https://your-audio-only-hls-url.m3u8'
};
// Then we set our player settings
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  audioOnly: true,
  // Specifies we want to use video layout for audio-only content
  audioOnlyUseVideoLayout: true,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const rmp = new RadiantMP('rmp');
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.

Audio and video ads with audio-only content

Refer to our HTML5 audio ads documentation page for more information about playing audio or video ads with audio-only content in our 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/9.15.3/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - DASH audio-only in this example
const src = {
  dash: 'https://your-audio-only-dash-url.mpd'
};
const 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'
    }
  }
};
const rmp = new RadiantMP('rmp');
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. You can also use the audioOnlyUseVideoLayout setting to display live or DVR audio-only content in our HTML5 video player.

Player code example:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - Live HLS audio-only in this example
const src = {
  hls: 'https://your-live-audio-only-hls-url.m3u8'
};
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  // Set up audio-only UI and optimisations
  audioOnly: true
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Icecast support

With Radiant Media Player 5.10.2 release we support live audio-only streaming to our player from Icecast 2 servers. We support Icecast streaming to our player in MP3 or AAC.

audioOnlyIcecast: Boolean

This setting enables Icecast support in our player. Default: false.

Player code example for live streaming to our player with Icecast MP3 - see this example here

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - Live Icecast audio-only in this example
const src = {
  mp3: 'https://streaming307.radionomy.com/BoiteSurrealRadio'
};
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  // Set up audio-only UI and optimisations
  audioOnly: true,
  // Enables Icecast support
  audioOnlyIcecast: true
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>