SOURCE

var _l = () => {
  var a = Math.round(_g.currentTime);
  var b = Math.round(_g.duration);
  var c = a / b * 100;
  _h[_e].style.width = 100 - c + '%';
}
var _d = setInterval(() => {
  _l();
  if (_g.currentTime == _g.duration) {
    _i[_e].text = '►';
    _g.pause();
    _g.currentTime = 0;
    _c = true;
  }
},
1000)

var _f = ['http://audio.xmcdn.com/group27/M0A/70/4B/wKgJR1kTKSGBPAseAA_Ns2vHS2E069.m4a', 'http://audio.xmcdn.com/group29/M02/C4/A0/wKgJXVki5USjsaVbAA4sxcG97qo927.m4a', 'http://audio.xmcdn.com/group29/M06/C5/C3/wKgJXVki6ZfwCtToABFGMNLj5vQ051.m4a'];
var _e = 0;
var _g = document.getElementById('e');
var _h = document.getElementsByClassName('d');
var _i = document.getElementsByClassName('b');
var _k = document.getElementsByClassName('c');
var _b = [0, 0, 0];
var _c = false;
var _a = (i) => {
  if (_g.paused) {
    if (_f[i] == _g.src) {
      _c = true;
      _i[i].text = '❚❚';
      _g.play();
      _e = i
    } else {
      _g.src = _f[i];
      _g.currentTime = _b[i];
      _c = true;
      _i[i].text = '❚❚';
      _g.play();
      _e = i
    }
  } else {
    if (_f[i] !== _g.src) {
      _g.pause();
      _b[_e] = _g.currentTime;
      _g.src = _f[i];
      _g.currentTime = _b[i];
      _c = true;
      _i[i].text = '❚❚';
      _i[_e].text = "►";
      _g.play();
      _e = i
    } else {
      _i[i].text = '►';
      _g.pause();
      _c = false;
      _b[i] = _g.currentTime
    }
  }
};
var _j = (i) => {
  var e = e || window.event;
  var a = (e.pageX - _k[i].offsetLeft) / _k[i].offsetWidth;
  if (_f[i] == _g.src) {
    if(_g.paused){
      _g.play();
      _i[i].text = '❚❚';
    }
    _g.currentTime = a * _g.duration
  }
}

<audio id="e" src="">
</audio>
<div class="a">
  <a class="b" onclick="_a(0)">
    ►
  </a>
  <div class="c" onclick="_j(0)">
    <div class="d">
    </div>
  </div>
</div>
<br />
<br />
<div class="a">
  <a class="b" onclick="_a(1)">
    ►
  </a>
  <div class="c" onclick="_j(1)">
    <div class="d">
    </div>
  </div>
</div>
<br />
<br />
<div class="a">
  <a class="b" onclick="_a(2)">
    ►
  </a>
  <div class="c" onclick="_j(2)">
    <div class="d">
    </div>
  </div>
</div>
<br />

body {
  background: #fff;
}

.a {
  display: flex;
  align-items: center;
  width: 80%;
  height: 5vw;
  padding: 2% 5%;
  background: rgb(247, 247, 247);
  border-radius: 1vw;
}

.b {
  flex: 0 0 10%;
  font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
  font-size: 3vw;
  color: rgb(44, 40, 44);
  cursor: pointer;
}

.c {
  flex: 0 0 90%;
  height: 1vw;
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
  border-radius: 50vw;
  overflow: hidden
}

.d {
  float: right;
  width: 100%;
  height: 1vw;
  background: rgb(187, 189, 190);
}