代码欢迎修改、使用、传播
<style>
#mplayer {
--path: polygon(5% 0, 5% 100%, 100% 50%);
--prg: 0%;
margin-inline: auto;
margin-top: 100px;
width: 300px;
height: 160px;
border-radius: 5px;
background: linear-gradient(to right bottom, olive,teal);
box-shadow: 0 0 4px 0 gray;
color: cyan;
position: relative;
display: grid;
place-items: center;
}
#mplayer::before, #mplayer::after {
position: absolute;
top: 0px;
}
#mplayer::before {}
#mplayer::after {
content: 'Mplayer';
width: 100%;
height: 40px;
line-height: 40px;
border-radius: 5px 5px 0 0;
background: radial-gradient(5px circle at 15px, snow, snow 4px, transparent 5px) no-repeat;
padding-left: 25px;
box-sizing: border-box;
}
#mbtn, #mprog, #mMsg {
position: absolute;
cursor: pointer;
}
#mbtn {
left: 10px;
bottom: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid cyan;
cursor: pointer;
display: grid;
place-items: center;
}
#mbtn:after {
position: absolute;
content: '';
width: 50%;
height: 50%;
background: cyan;
clip-path: var(--path);
}
#mprog {
width: calc(100% - 155px);
height: 30px;
right: 100px;
bottom: 10px;
background: linear-gradient(to right, cyan var(--prg), silver var(--prg), silver 0) no-repeat 0 50% / 100% 2px;
}
#mMsg {
right: 10px;
bottom: 5px;
height: 40px;
line-height: 40px;
font-size: 14px;
}
.pp {
position: absolute;
width: 1px;
min-height: 2px;
transform-origin: 0 50%;
transition: height .16s linear;
display: grid;
place-items: start center;
}
</style>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2070182112" autoplay loop></audio>
<div id="mplayer">
<span id="mbtn"></span>
<span id="mprog"></span>
<span id="mMsg">00:00/00:00</span>
</div>
<script>
const tt = Math.floor(mplayer.clientWidth / 4 - 5);
let pps = [];
Array(tt).fill('').forEach((_,k) => {
let sp = document.createElement('span');
sp.className = 'pp';
sp.style.cssText += `
left: ${10 + 4 * k}px;
background: linear-gradient(to bottom, snow, cyan, snow);
`;
pps.push(sp);
mplayer.prepend(sp);
});
(function update() {
let output = [...new Array(tt).keys()].map((v,k) => Math.floor(Math.random() * (aud.paused ? 0 : 80 - Math.random() * 160)));
for(let j = 0; j < tt ; j++) {
pps[j].style.height = output[j] + 'px';
}
window.requestAnimationFrame(update);
})();
mbtn.onclick = () => aud.paused ? aud.play() : aud.pause();
mprog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mprog.offsetWidth;
mprog.onmousemove = (e) => mprog.title = s2m(aud.duration * e.offsetX / mprog.offsetWidth);
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
mplayer.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
mMsg.innerText = s2m(aud.currentTime) + '/' + s2m(aud.duration);
};
const mState = () => {
const path1 = 'polygon(5% 0, 5% 100%, 100% 50%)';
const path2 = 'polygon(40% 0, 0 0, 0 100%, 40% 100%, 40% 0, 60% 0, 60% 100%, 100% 100%, 100% 0)';
if(aud.paused) {
mplayer.style.setProperty('--path', path1);
}else{
mplayer.style.setProperty('--path', path2);
}
};
const s2m = (seconds) => {
if (!seconds) return '00:00';
let min = parseInt(seconds / 60), sec = parseFloat(Math.floor(seconds) % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
</script>
|