How to add music player in blogger

<audio id="audiotrack" preload="none"><source src="#" type="audio/mpeg"></audio><div class="wrapper"><div id="player"><div id="track"><div id="progress"></div></div><div id="controls"><div class="icon-con" id="play"></div><div class="icon-con" id="pause" style="display: none;"></div><div class="icon-con" id="stop"></div><div class="icon-con" id="mute"></div><div id="volume"><div id="level"></div></div></div></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  var $source = $("#audiotrack")[0],
    $track = $("#track"),
    $progress = $("#progress"),
    $play = $("#play"),
    $pause = $("#pause"),
    $playPause = $("#play, #pause"),
    $stop = $("#stop"),
    $mute = $("#mute"),
    $volume = $("#volume"),
    $level = $("#level");

//Vars:
var totalTime,
    timeBar,
    newTime,
    volumeBar,
    newVolume,
    cursorX;

var interval = null;
$(document).ready(function(){

//Progress bar:
function barState(){
  if (!$source.ended){
    var totalTime = parseInt($source.currentTime / $source.duration * 100);
    $progress.css({"width": totalTime+1 + "%"});
  }
  else if ($source.ended){
    $play.show();
    $pause.hide();
    clearInterval(interval);
  };
  console.log("playing...");
};

//Event trigger:
$track.click(function(e){
  if (!$source.paused){
    var timeBar = $track.width();
    var cursorX = e.pageX - $track.offset().left;
    var newTime = cursorX * $source.duration / timeBar;
    $source.currentTime = newTime;
    $progress.css({"width": cursorX + "%"});
  };
});

$("#pause").hide();

function playPause(){
  if ($source.paused){
    $source.play();
    $pause.show();
    $play.hide();
    interval = setInterval(barState, 50); //Active progress bar.
    console.log("play");
  }
  else {
    $source.pause();
    $play.show();
    $pause.hide();
    clearInterval(interval);
    console.log("pause");
  };
};

$playPause.click(function(){
  playPause();
});

function stop(){
  $source.pause();
  $source.currentTime = 0;
  $progress.css({"width": "0%"});
  $play.show();
  $pause.hide();
  clearInterval(interval);
};

$stop.click(function(){
  stop();
});

function mute(){
  if ($source.muted){
    $source.muted = false;
    $mute.removeClass("mute");
    console.log("soundOFF");
  }
  else {
    $source.muted = true;
    $mute.addClass("mute");
    console.log("soundON");
  };
};

$mute.click(function(){
  mute();
});

$volume.click(function(e){
  var volumeBar = $volume.width();
  var cursorX = e.pageX - $volume.offset().left;
  var newVolume = cursorX / volumeBar;
  $source.volume = newVolume;
  $level.css({"width": cursorX + "px"});
  $source.muted = false;
  $mute.removeClass("mute");
});

}); //Document ready end.
</script>
<style>
.wrapper{width:80%;max-width:580px;margin:80px auto;}#player{background:#F3F3F3;border-radius:8px;box-shadow:0 2px 5px #c1c5ff,0 0px 0px #c1c5ff;overflow:hidden;}#track{width:100%;height:6px;background:#BEC2FF;overflow:hidden;cursor:pointer;}#progress{width:0%;height:100%;background:rgba(85,94,237,0.8);}#controls{padding:32px 0;text-align:center;vertical-align:middle;}#controls>div{vertical-align:middle;}.icon-con{display:inline-block;position:relative;margin:4px 12px;cursor:pointer;}#play{position:relative;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent rgba(85,94,237,0.8);}#play:hover{opacity:0.7;}#pause{position:relative;width:16px;height:18px;}#pause:before{content:"";position:absolute;width:6px;height:18px;top:0;left:0;background:#555eed;}#pause:after{content:"";position:absolute;width:6px;height:18px;top:0;right:0;background:#555eed;}#pause:hover:before,#pause:hover:after{background:#555eed;}#stop{width:18px;height:18px;background:rgba(85,94,237,0.8);}#stop:hover{opacity:0.7;}#mute{position:relative;border-style:solid;border-width:10px 14px 10px 0;border-color:transparent rgba(85,94,237,0.8) transparent transparent;}#mute:after{content:"";position:absolute;width:8px;height:8px;top:50%;margin-top:-4px;right:-8px;background:rgba(85,94,237,0.8);}#mute:before{content:"";position:absolute;width:4px;height:8px;top:50%;margin-top:-4px;left:16px;background:rgba(85,94,237,0.8);border-radius:0 100% 100% 0;}#mute:hover,.mute{border-color:transparent #555eed transparent transparent!important;}#mute:hover:after,.mute:after{background:#555eed!important;}#mute:hover:before,.mute:before{content:none!important;}#volume{display:inline-block;width:60px;height:6px;margin-right:-60px;background:#D2D1D1;visibility:hidden;cursor:pointer;}#level{width:100%;height:100%;background:rgba(85,94,237,0.8);}#controls:hover #volume{visibility:visible;}
</style>