Flowplayer · Audio plugin

Mixed playlist

Iceast stream

 

<head/>

The following assets are loaded in the HEAD section of the page:

<!-- the audio plugin stylesheet -->
<link rel="stylesheet" href="//releases.flowplayer.org/audio/flowplayer.audio.css">
 
<!-- ... -->
 
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
 
<!-- hlsjs engine to play HLS without Flash in modern browsers -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
 
<!-- audio plugin -->
<script src="//releases.flowplayer.org/audio/flowplayer.audio.min.js"></script>

HTML

<style>

/* mixed playlist player */
#mixed {
background-color: #036;
}
/* make cover image fill container width */
#mixed.is-audio .fp-player {
background-size: cover; /* default: contain */
background-position: top center; /* default: center */
}
 
/* icecast player */
#icecast {
width: 400px;
background-color: #eee;
}

CSS

<script>

For the mixed audio and video playlist is achieved by setting audio as clip option. This allows us also to configure a coverImage.

The icecast stream is delivered in a non-standard way and without mime-type, therefore we "cheat" the browsers as best as possible. The player is reduced to its controlbar by setting the audioOnly player option.

window.onload = function () {
 
flowplayer("#mixed", {
ratio: 9/16,
splash: true,
 
playlist: [{
audio: true,
coverImage: "//releases.flowplayer.org/data/national.jpg",
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/fake_empire.m3u8" },
{ type: "audio/mpeg", src: "//edge.flowplayer.org/fake_empire.mp3" }
]
}, {
sources: [
{ type: "application/x-mpegurl", src: "//cdn.flowplayer.org/202777/161579.m3u8" },
{ type: "video/mp4", src: "//cdn.flowplayer.org/202777/161579.mp4" }
]
}]
 
});
 

var icecastContainer = document.getElementById("icecast"),
icecastSources = [
// native HLS support accepts icecast source
{ type: "audio/x-mpegurl", engine: "html5",
src: "http://live-aacplus-64.kexp.org/kexp64.aac" },
{ type: "audio/mp4; codecs=mp4a.40.5",
src: "http://live-aacplus-64.kexp.org/kexp64.aac" },
{ type: "video/flash",
src: "http://live-aacplus-64.kexp.org/kexp64.aac?type=.flv" }
];
 
// icecast streams are not delivered with mime-type
// remove HTML5 media sources for IE < 12
if (flowplayer.support.browser.msie || navigator.userAgent.indexOf("Trident/7") > -1) {
icecastSources.splice(0, 2);
}
 
flowplayer(icecastContainer, {
live: true,
splash: true,
audioOnly: true,
clip: {
sources: icecastSources
}
 
}).on("ready error", function (e, api, arg) {
document.getElementById("icecast-info").innerHTML = arg.src
? ("Now playing: " + arg.src)
: arg.message;
 
}).on("progress.android", function (e, api) {
// *if* Android plays it, it botches up duration initially, overwrite
if (api.video.time < 4) {
icecastContainer.querySelector(".fp-duration").innerHTML = "Live";
} else {
api.off("progress.android");
}
});
 
};

JavaScript

<body/>

<h2>Mixed playlist</h2>
 
<div id="mixed" class="fp-outlined">
<a class="fp-prev"></a>
<a class="fp-next"></a>
</div>
 
<h2>Iceast stream</h2>
 
<div id="icecast" class="fp-playful fp-edgy"></div>
 
<p class="doc" id="icecast-info">&nbsp;</p>

HTML