"Circle Audio Player"
Bootstrap 3.1.0 Snippet by Geniusone

<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)); }); });

Related: See More


Questions / Comments: