var player, is_paused;
window.onloadRetry = 0;
window.soundManager = new SoundManager();
soundManager.setup({
debugMode: true,
flashLoadTimeout: 0,
flashVersion: 9,
preferFlash: true,
useHighPerformance: true,
waitForWindowLoad: true,
//url: 'http://alvaroveliz.cl/uploads/streaming/bower_components/SoundManager2/swf/soundmanager2_flash_xdomain/',
url: 'http://ivdemo.chaseits.co.uk/SoundManager2-2.97a.20131201/swf/soundmanager2_flash_xdomain/soundmanager2_flash9_debug.swf',
onready: function(){
is_paused = true;
soundManager.createSound({
id: "streaming",
serverURL: "rtmp://149.56.16.148:1935/radioz/",
url: [{
type: "audio/mp4",
url: "radioamor.stream"
}],
whileplaying: function(){
pos = durationFormat(this.position);
dur = durationFormat(this.duration);
$('.time').html(pos.m+':'+pos.s+' / '+dur.m+':'+dur.s);
}
});
}
});
function durationFormat(msecs)
{
var secs = msecs / 1000;
var hours = Math.floor(secs / (60 * 60));
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj =
{
"h": intToString(hours),
"m": intToString(minutes),
"s": intToString(seconds)
};
return obj;
}
function intToString(time)
{
return (parseInt(time) < 10 ? ("0" + time) : time);
}
$(document).ready(function(){
// funcion play / pausa
$('.buttons-play').on('click', function(){
if (is_paused) {
$('.title').html('Radio Amor');
soundManager.play('streaming');
is_paused = false;
$('.buttons-play span').removeClass('fa-play');
$('.buttons-play span').addClass('fa-pause');
} else {
$('.title').html('Radio Amor (pausado)');
soundManager.pause('streaming');
is_paused = true;
$('.buttons-play span').removeClass('fa-pause');
$('.buttons-play span').addClass('fa-play');
}
});
// funcion stop
$('.buttons-stop').on('click', function(){
soundManager.stop();
is_paused = true;
$('.title').html('Radio Amor');
$('.buttons-play span').removeClass('fa-pause');
$('.buttons-play span').addClass('fa-play');
});
// volumen
$('.volume input[type=range]').on('change', function(){
soundManager.setVolume($(this).val());
});
});
<div id="player">
<div class="buttons">
<a href="#" class="buttons-play"><span class="fa fa-play"></span></a>
<a href="#" class="buttons-stop"><span class="fa fa-stop"></span></a>
</div>
<div class="volume-and-time">
<div class="time">00:00 / 00:00</div>
<div class="volume">
<input type="range" name="points" min="0" max="100" value="100">
</div>
</div>
<div class="title">
Radio Amor
</div>
</div>
body {
font-family: 'Quicksand', 'Helvetica', sans-serif;
}
#player {
border : 2px solid #ddd;
background: #DDD;
width: 400px;
border-radius: 5px;
padding: 20px;
position: relative;
box-shadow: 1px 1px 1px #444;
.buttons {
a {
display: inline-block;
border: 2px solid #373B41;
position: absolute;
span {
color: #373B41;
}
&.buttons-play {
width: 40px;
height: 50px;
border-radius: 60px;
padding-left: 25px;
padding-top: 15px;
font-size: 2em;
.fa-pause {
margin-left: -5px;
}
}
&.buttons-stop {
width: 25px;
height: 28px;
border-radius: 40px;
padding-left: 13px;
padding-top: 10px;
top: 35px;
left: 100px;
}
}
}
.volume-and-time {
display: inline-block;
position: absolute;
top: 20px;
right: 20px;
.time {
text-align: right;
color: #999;
}
.volume {
margin-top: 20px;
}
}
.title {
border-top: 1px solid #CC6666;
padding: 10px;
margin-top: 80px;
text-align: center;
}
}
External resources loaded into this fiddle: