console
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);
}