Audio plugin
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.
<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:
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="
}]
}
})