audio css

html

                      <div class="sound">
                            
                            <button class="play fa fa-play-circle" id="btn1"></button>
                            <!-- SOUNDS -->
                            <audio id="sound1" controls loop>
                                <source src="audio/music.mp3" type="audio/ogg" />
                            </audio>
                        </div>

css

.play{
    width:30px;
    height:30px;
    vertical-align: middle;
    display:none;
}
audio{
    width:300px;
    height:30px; 
    vertical-align: middle;
}
audio:focus{
    outline:none;
}

js

$(function(){
     
    var flag=true;
    var audio1=document.getElementById("sound1");
    audio1.volume=0.2;
    $('#btn1').click(function(){
    var $this = $(this);
        
//    $this.toggleClass('active');
//    if($this.hasClass('active')){
      if(flag){
        $this.attr('class','play fa fa-pause-circle');   
        $("#sound1")[0].play();
          flag=false;
    } else {
        $this.attr('class','play fa fa-play-circle'); 
        $("#sound1")[0].pause();
        flag=true;
    }
});
   
    
});