Audio
Play audio streams with a minimal player or a static poster image.
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>
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:
-
-
- 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="
}]
}
})