Audio
The Flowplayer Native audio plugin plays audio-only 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 load the audio plugin yourself in an OVP JavaScript (ESM) embed, import the plugin's ESM module after the embed module and register it with flowplayer(audio) before you create the player:
<div id="player-<media id>"></div>
<script type="module">
import flowplayer from "https://embed.flowplayer.com/<player id>/<media id>.js";
import audio from "https://cdn.flowplayer.com/releases/native/3/stable/esm/plugins/audio.min.js";
flowplayer(audio);
flowplayer("#player-<media id>", {});
</script>Load the plugin from the same release channel or version as the player. In legacy async embeds, add "audio" to the "plugins": [] array instead.
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/aacandaudio/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/radio/radio_64.m3u8"
}
, {
type: "audio/aac"
, src: "//stream.server.com/radio/radio_64.aac"
}
, {
type: "audio/mp3"
, src: "//stream.server.com/radio/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/radio/radio_64.m3u8" }
, { type: "audio/aac"
, src: "//stream.server.com/radio/radio_64.aac"}
, { type: "audio/mp3"
, src: "//stream.server.com/radio/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="
}]
}
})