A Pen by Cartoonist ARiF.

FnF.fm-Play-button-with-Radio-player.markdown

FnF.fm Play button with Radio player

http://www.fnf.fm/ Connects button to mediaelement audio player, so you can toggle play/pause from the button.

Forked from tessa-lt's Pen Play button with audio player.

A Pen by Cartoonist ARiF on CodePen.

License.

index.html

        <a href="#" data-state="paused"  class="btn-light btn-play show-audio" rel="">FnF.fm</a>   
<div class="audio">
        <audio id="audio-player" src="http://37.187.90.121:4250/;stream4.mp3" type="audio/mp3" controls="controls"></audio>
</div>

script.js

var Podcast = (function(){

  var c; 

  return {
    config: {
      trigger: $(".show-audio"),
      audioElem: $(".audio"),
      audioState: "paused"
    },

    init: function() {
      c = this.config;
      this.bindActions();  
    },  

    bindActions: function () {     
      var self = this;
      c.trigger.on("click", function(e){
        e.preventDefault();
        var player = new MediaElementPlayer(c.audioElem.find("#audio-player"));   
        if (c.audioState === "paused") {
          self.play(this, player);
        } else {
          self.pause(this, player);
        }
      });
    },

    toggleElement: function(el) {
      el.slideDown();
    },

    play: function(el, player) {
      Podcast.toggleElement(c.audioElem);
      player.play();
      $(el).text("Playing").addClass("pause");
      c.audioState = "playing";
    },

    pause: function(el, player) {
      player.pause();
      $(el).text("FnF.fm").removeClass("pause");
      c.audioState = "paused";
    }

  };
  
})();

$(document).ready(function(){
  Podcast.init(); 
});

style.scss

.btn-light {
  font-size: 24px;
  padding: 15px 25px;
  font-family: Arial;
  text-decoration: none;
  border-radius: 10px;
  display: inline-block;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  border: 1px solid #c0c0c0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 white, inset 0 0 5px rgba(255, 255, 255, 0.5);
  background: #f9ffff;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9ffff), to(#dddddd));
  background-image: -webkit-linear-gradient(#f9ffff 0%, #dddddd 100%);
  background-image: -moz-linear-gradient(#f9ffff 0%, #dddddd 100%);
  background-image: linear-gradient(#f9ffff 0%, #dddddd 100%);
}
.btn-light:hover {
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#e8e8e8), to(#fbffff));
  background-image: -webkit-linear-gradient(bottom, #e8e8e8 0%, #fbffff 100%);
  background-image: -moz-linear-gradient(bottom, #e8e8e8 0%, #fbffff 100%);
  background-image: -o-linear-gradient(bottom, #e8e8e8 0%, #fbffff 100%);
  background-image: linear-gradient(bottom, #e8e8e8 0%, #fbffff 100%);
}
.btn-light:active {
  border: 1px solid rgba(1, 1, 1, 0.25);
  border-bottom: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 5px rgba(0, 0, 0, 0.24);
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#fbfefe), to(lightgrey));
  background-image: -webkit-linear-gradient(bottom, #fbfefe 0%, lightgrey 100%);
  background-image: -moz-linear-gradient(bottom, #fbfefe 0%, lightgrey 100%);
  background-image: -o-linear-gradient(bottom, #fbfefe 0%, lightgrey 100%);
  background-image: linear-gradient(bottom, #fbfefe 0%, #d3d3d3 100%);
}

.btn-play {
  position: relative;
  padding-left: 70px;
  margin-left: 10px;
}
.btn-play:before {
  position: absolute;
  height: 78px;
  width: 78px;
  left: -15px;
  top: 50%;
  margin-top: -39px;
  content: "";
  background: url("http://cl.ly/Rkzt/Image%202013.10.03%2012%3A01%3A39%20PM.png") no-repeat left top;
}
.btn-play:hover:before {
  background-position: left -100px;
}
.btn-play.pause:before {
  background-position: left -178px;
}
.btn-play.pause:hover:before {
  background-position: left -278px;
}

.audio {
  display: none;
  margin-top: 20px;
}

.mejs-container {
  margin-bottom: 20px;
  max-width: 20px;
  display: none;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: #fa4646;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fa4646), to(#a70000));
  background-image: -webkit-linear-gradient(#fa4646 0%, #a70000 100%);
  background-image: -moz-linear-gradient(#fa4646 0%, #a70000 100%);
  background-image: linear-gradient(#fa4646 0%, #a70000 100%);
}