Audio

Play audio streams with a minimal player or a static poster image.

Table of contents

Installation

Manual installation

For a manual Javascript setup, load the core player css and js, optionally required streaming plugins like HLS plugin or the advertising plugin and the audio plugin.

<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<!-- optionally  for HLS streams
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
or the ads plugin if you want a preroll
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ads.min.js"></script> -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/audio.min.js"></script>

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed player

The OVP will automatically detect audio-only streams and switch to the audio player when generating the embed code. You can add a poster image for each audio clip on the video management page

If you want to use the OVP managed async player, you can add "audio" to the "plugins: []" array in emebd code JSON, see managed player configuration docs

Whether a clip is audio only is determined by the MIME type (ie it needs to be audio/*) or in the case of HLS through the m3u8 manifest.

Configuration

Manual configuration

All options are configured in the top level like a standard video player setup. If you configure only audio sources, the player will start with a minimal audio-only controlbar. If you add a poster image, you will get a standard player layout with a still image.

Available configuration properties:

    • property
    • description
    • poster string optional
    • url to a poster (cover) image
    • ima object optional
    • Ad configuration object if you have ads enabled and want an ad preroll
    • src array required
    • Array of source variants, the player will try them in order of configuration and play the first source the browser is capable of. Usually you can use application/x-mpegurl (with HLS plugin), audio/mp4 , audio/aac and audio/mp3 . It is recommended to offer several variants to cater for all browsers.

You can force the audio-only UI with an UI flag. Useful for stream types like rts@scale which do not identify themselves as audio through the MIME type.

Sample code

Audio only player:

flowplayer('#player', {
  token: "your token"
  ,title: "Radio"
  , src: [
  {
    type: "application/x-mpegurl"
  , src: "//stream.server.com/radion/radio_64.m3u8"
   }
, {
   type: "audio/aac"
  , src: "//stream.server.com/radion/radio_64.aac"
   }
  , {
    type: "audio/mp3"
  , src: "//stream.server.com/radion/radio_128.mp3"
  }]
})

Audio player with ads and poster image:

flowplayer('#player', {
   token: "your token"
  , poster: "//source.server.com/image.jpg"
  , title: "Radio stream + ads"
  , src: [
    { type: "application/x-mpegurl"
    , src: "//stream.server.com/radion/radio_64.m3u8" }
  , { type: "audio/aac"
     , src: "//stream.server.com/radion/radio_64.aac"}
  , { type: "audio/mp3"
     , src: "//stream.server.com/radion/radio_128.mp3"
   }]
 ,
  ima: {
    ads: [{
      time: 0
    , adTag: "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator="
    }]
  }
})
Audio track selection Chromecast
Results