SOURCE

const _a = {
  'a': 'http://audio.xmcdn.com/group27/M0A/70/4B/wKgJR1kTKSGBPAseAA_Ns2vHS2E069.m4a',
  'b': 'http://audio.xmcdn.com/group29/M02/C4/A0/wKgJXVki5USjsaVbAA4sxcG97qo927.m4a',
  'c': 'http://audio.xmcdn.com/group29/M06/C5/C3/wKgJXVki6ZfwCtToABFGMNLj5vQ051.m4a'
};
var _b = {};
const e = $('#e');
const a = (i) => {
  if (e.paused) {
    if (_a[i] = e.src) {
      e.play();
    b.get[i].html = ''
    } else {
      e.src = _a[i];
      e.currentTime = _b[i];
      e.play()
    }
  } else {
    e.pause()
    _b[i] = e.currentTime
  }
};
const d = setInterval({
  let a = Math.round(e.currentTime) let b = Math.round(e.duration) $('d').width = a / b * 100 + "%"

},
1000)

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

body {
  background: #fff;
}

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

.b {
  flex: 0 0 10%;
  font-family: Arial;
  color: rgb(44, 40, 44)
}

.c {
  flex: 0 0 90%;
  height: 1vw;
  background: rgb(187, 189, 190);
  border-radius: 50vw;
}

.d {
  width: 0;
  background: rgb(218, 185, 101);
}