黑氏快充也做播放器

马黑黑 · 发表于 2023-4-5 21:41

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-4-5 21:42 编辑

马黑黑 · 发表于 2023-4-5 21:41

代码

<style>
.mplayer {
width: 300px;
height: 30px;
border: 1px solid darkgreen;
border-radius: 6px;
filter: drop-shadow(2px 2px 6px black);
cursor: pointer;
position: relative;
--ww: 0; --bg: dargreen;
}
.mplayer::before, .mplayer::after {
position: absolute;
content: '';
background: var(--bg);
}
.mplayer::before {
width: var(--ww);
height: 100%;
border-radius: 6px;
opacity: .65;
}
.mplayer::after {
width: 12px;
height: 20px;
top: 5px;
right: -12px;
}
@keyframes charging {
to { width: 100%; }
}
</style>
<div class="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=419485716" autoplay loop></audio>
<script>
let mplayer = document.querySelector('.mplayer');
let mState = () => mplayer.style.setProperty('--bg', aud.paused ? 'gray' : 'darkgreen');
mplayer.onclick = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) aud.paused ? aud.play() : aud.pause();
if(x < w) aud.currentTime = aud.duration*x/w;
};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ww', aud.currentTime*mplayer.offsetWidth/aud.duration + 'px');
});
</script>