<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row text-center">
<h2 >Audio may take some time to buffer please wait!</h2>
<p>Audio provided by <a href="http://robbbenson.com/Robb_Benson/Songwriter.html">Robb Benson</a> click on his name to check out his website.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-offset-4 col-sm-4">
<div class="progress-radial progress">
<div class="overlay">
<img class="img-responsive img-circle" src="http://robbbenson.com/robbcover.jpg" alt="">
<div class="controls">
<span class="glyphicon glyphicon-volume-up" id="mute" data-toggle="audioplayer" data-icon="muted" data-active="false"></span>
<span class="glyphicon glyphicon-volume-off hide" id="muted" data-toggle="audioplayer" data-icon="mute" data-active="false"></span>
<span class="glyphicon glyphicon-stop active" id="stop" data-toggle="audioplayer" data-icon="play"></span>
<span class="glyphicon glyphicon-play hide" id="play" data-toggle="audioplayer" data-icon="stop"></span>
<span class="glyphicon glyphicon-pause" id="pause" data-toggle="audioplayer" data-icon="pause"></span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
.progress-radial {
float: left;
margin-right: 30px;
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #2f3439; // remove gradient color
background-color: #5bc0de; // default 100%
}
.progress-radial .overlay {
width: 100%;
height: 100%;
padding: 15px;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 16px;
}
.controls {
position: absolute;
bottom: 25%;
left: 0px;
width: 100%;
text-align: center;
}
.controls .glyphicon {
font-size: 2em;
color: rgba(255, 255, 255, 0.7);
padding: 5px;
margin: 0px 10px;
cursor: pointer;
}
.controls .glyphicon.active {
font-size: 3em;
margin: 5px 10px;
text-shadow: 0px 0px 5px rgba(51, 51, 51, 1);
color: #5bc0de;
}
.progress {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(90deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-0 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(90deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-1 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(93.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-2 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(97.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-3 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(100.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-4 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(104.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-5 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(108deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-6 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(111.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-7 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(115.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-8 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(118.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-9 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(122.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-10 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(126deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-11 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(129.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-12 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(133.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-13 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(136.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-14 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(140.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-15 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(144deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-16 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(147.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-17 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(151.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-18 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(154.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-19 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(158.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-20 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(162deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-21 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(165.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-22 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(169.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-23 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(172.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-24 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(176.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-25 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(180deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-26 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(183.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-27 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(187.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-28 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(190.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-29 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(194.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-30 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(198deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-31 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(201.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-32 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(205.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-33 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(208.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-34 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(212.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-35 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(216deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-36 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(219.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-37 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(223.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-38 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(226.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-39 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(230.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-40 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(234deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-41 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(237.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-42 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(241.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-43 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(244.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-44 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(248.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-45 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(252deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-46 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(255.6deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-47 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(259.2deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-48 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(262.8deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-49 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(266.4deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-50 {
background-image: linear-gradient(-90deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-51 {
background-image: linear-gradient(-86.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-52 {
background-image: linear-gradient(-82.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-53 {
background-image: linear-gradient(-79.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-54 {
background-image: linear-gradient(-75.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-55 {
background-image: linear-gradient(-72deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-56 {
background-image: linear-gradient(-68.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-57 {
background-image: linear-gradient(-64.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-58 {
background-image: linear-gradient(-61.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-59 {
background-image: linear-gradient(-57.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-60 {
background-image: linear-gradient(-54deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-61 {
background-image: linear-gradient(-50.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-62 {
background-image: linear-gradient(-46.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-63 {
background-image: linear-gradient(-43.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-64 {
background-image: linear-gradient(-39.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-65 {
background-image: linear-gradient(-36deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-66 {
background-image: linear-gradient(-32.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-67 {
background-image: linear-gradient(-28.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-68 {
background-image: linear-gradient(-25.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-69 {
background-image: linear-gradient(-21.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-70 {
background-image: linear-gradient(-18deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-71 {
background-image: linear-gradient(-14.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-72 {
background-image: linear-gradient(-10.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-73 {
background-image: linear-gradient(-7.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-74 {
background-image: linear-gradient(-3.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-75 {
background-image: linear-gradient(0deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-76 {
background-image: linear-gradient(3.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-77 {
background-image: linear-gradient(7.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-78 {
background-image: linear-gradient(10.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-79 {
background-image: linear-gradient(14.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-80 {
background-image: linear-gradient(18deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-81 {
background-image: linear-gradient(21.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-82 {
background-image: linear-gradient(25.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-83 {
background-image: linear-gradient(28.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-84 {
background-image: linear-gradient(32.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-85 {
background-image: linear-gradient(36deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-86 {
background-image: linear-gradient(39.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-87 {
background-image: linear-gradient(43.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-88 {
background-image: linear-gradient(46.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-89 {
background-image: linear-gradient(50.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-90 {
background-image: linear-gradient(54deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-91 {
background-image: linear-gradient(57.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-92 {
background-image: linear-gradient(61.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-93 {
background-image: linear-gradient(64.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-94 {
background-image: linear-gradient(68.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-95 {
background-image: linear-gradient(72deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-96 {
background-image: linear-gradient(75.6deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-97 {
background-image: linear-gradient(79.2deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-98 {
background-image: linear-gradient(82.8deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-99 {
background-image: linear-gradient(86.4deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
.progress-100 {
background-image: linear-gradient(90deg, #5bc0de 50%, transparent 50%, transparent), linear-gradient(270deg, #5bc0de 50%, #2f3439 50%, #2f3439);
}
// ONLY WORKS ON BROWSERS THAT SUPPORT MP3 //
$(function () {
var play = $('#play'),
pause = $('#pause'),
stop = $('#stop'),
mute = $('#mute'),
muted = $('#muted'),
song = new Audio('http://robbbenson.com/01%20Eve.mp3'),
duration = song.duration;
song.type= 'audio/mpeg';
song.src= 'http://robbbenson.com/01%20Eve.mp3';
stop.on('click', function(e) {
e.preventDefault();
$(this).addClass('hide');
$('#play').removeClass('hide').trigger('click');
})
play.on('click', function(e) {
e.preventDefault();
if (!$(this).hasClass('active')){
song.play();
$('.active').removeClass('active');
$(this).addClass('active');
}else{
song.pause();
$('.active').removeClass('active');
var curtime = song.currentTime / song.duration * 100;
$('.progress-radial').removeClass('progress-'+parseInt(curtime));
song.currentTime = 0;
$(this).addClass('hide');
stop.removeClass('hide').addClass('active');
}
});
pause.on('click', function(e) {
e.preventDefault();
song.pause();
$('.active').removeClass('active');
$(this).addClass('active');
});
mute.on('click', function(e) {
e.preventDefault();
song.volume = 0;
$(this).addClass('hide');
$('#muted').removeClass('hide');
});
muted.on('click', function(e) {
e.preventDefault();
song.volume = 1;
$(this).addClass('hide');
$('#mute').removeClass('hide');
});
song.addEventListener('timeupdate', function (){
var curtime = song.currentTime / song.duration * 100;
$('.progress-radial').addClass('progress-'+parseInt(curtime));
$('.progress-radial').removeClass('progress-'+parseInt(curtime-1));
});
});
