Flowplayer · Audio plugin

Mixed playlist

prev next

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/6.0.5/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 */
/* make cover image fill container width */
.is-audio.flowplayer .fp-player {
background-size: cover; /* default: contain */
background-position: top center; /* default: center */
}
 
/* icecast player */
#icecast {
width: 400px;
background-color: #eee;
}
#icecast .fp-message {
/* custom error display */
display: none;
}
 

/* simple playlist styling */
.flowplayer {
background-color: #036;
/* allow room for playlist buttons */
margin-bottom: 100px;
}
 
.flowplayer .fp-playlist {
position: absolute;
bottom: -100px;
width: 100%;
text-align: center;
}
 
.flowplayer .fp-playlist a {
display: inline-block;
width: 70px;
height: 70px;
border-radius: 70px;
background-color: #666;
margin: 15px;
}
 
.flowplayer .fp-playlist a.is-active {
background-color: #eee;
}
 
.flowplayer.is-paused .fp-playlist a.is-active {
background-color: #ccc;
}
 
.flowplayer .fp-prev,
.flowplayer .fp-next {
position: absolute;
bottom: -60px;
font-size: 20px;
display: none;
z-index: 1;
cursor: pointer;
}
 
.flowplayer .fp-next {
right: 0;
}
 
.flowplayer.is-ready .fp-next,
.flowplayer.is-ready .fp-prev {
display: inline;
}

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 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",
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("#icecast", {
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;
});
 
};

JavaScript

<body/>

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

HTML