Audio

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

Installation

Load the core player css and js, optionally required streaming plugins like HLS plugin or the advertising plugin, and the audio plugin.

Copy
Copied
<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>

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 control bar. If you add a poster image, you will get a standard player layout with a still image.

Available configuration properties are listed in the following table.

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

You can force the audio-only UI with a UI flag. This option may be useful for stream types like rts@scale which aren't identified as audio through the MIME type.

Sample code

Audio only player:

Copy
Copied
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:

Copy
Copied
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="
    }]
  }
})