A Pen by Cartoonist ARiF.

FnF.fm-play-Button.markdown

FnF.fm play Button

FnF.fm Radio player http://www.fnf.fm/

A Pen by Cartoonist ARiF on CodePen.

License.

index.html

<div class="audio">
  <div class="info">
  </div>
  <img src="http://2.bp.blogspot.com/-VqnkvyVGwAE/VCAr5lfDqaI/AAAAAAAAALE/X1NdWx9flCU/s1600/bag.png" class="audio-cover" alt="">
    <audio src="http://37.187.90.121:4250/;stream.mp3" class="audio-player" preload="auto"></audio>
    
    <div class="play-pause" data-state="play"></div>
    <div class="progressbar"></div>
</div>

script.js

$(".audio").on('click', function(e) {
  e.preventDefault();
  var btn = $(this).find(".play-pause");
  var audio = btn.siblings('audio');
  var progress= btn.siblings(".progressbar");
  if(!btn.hasClass("playing")){
    btn.addClass("playing");
    audio.get(0).play();
      var playertime = setInterval(function(){
      var c = audio.get(0).currentTime;
      var d = audio.get(0).duration;
      progress.css("width", (c/d)*100 +'px' );
      //console.log(c,d ,c/d  );
    }, 300);
  }
  else{
    btn.removeClass("playing");
    audio.get(0).pause();
    clearInterval(playertime);
  }
});

style.css

.audio{
  height:100px; position:relative;
  width:100%;
  overflow:hidden;
  background:#333;
  max-width:600px;
  margin:0px auto;
  cursor:pointer;
}
.audio img{width:100%;opacity:.7;transition:all .2s ease-in-out; position:absolute;top:50%;
  transform:translateY(-50%); 
  -webkit-transform:translateY(-50%);
  display:block;
}
.audio:hover img{opacity:1;}
.audio .audio-player{
  position:absolute;
  top:100px;
  left:20px;visibility:hidden;
}
.play-pause{
  position:absolute;
  width:70px;
  height:70px;
 bottom:15px;
  left:30px;
  cursor:pointer;
border:2px solid #fff;
border-radius:100%;  background:url(http://4.bp.blogspot.com/-vk9aY6Y12Q8/VCAos1AsyYI/AAAAAAAAAK4/1rX1wpYT6C0/s1600/button2.png)no-repeat center top;
  z-index:4;
}
.play-pause.playing{
  background-position:center -90px;
}
.audio .progressbar{position:absolute; top:0;left:0;bottom:0;background:rgba(0,100,200,0.2); border-right:1px solid #09c;display:block;z-index:2;transition:all .2s ease-in-out;}
.audio .info{display:block;position:absolute; top:0; left:20px;
  display:block;
  width:100%;
  z-index:4;
  color:#fff;
  font-family:'open sans',helvetica,arial,sans-serif;
  font-weight:normal;
  font-size:20px;
}
.info h5{font-weight:300; color:#09c;font-size:12px; text-transform:uppercase; letter-spacing:1px;margin:40px 0 0;}
.info p{font-weight:300; color:#eee; letter-spacing:1px;margin:10px 0;}