HTML按钮+svg进度条的播放器

马黑黑 · 发表于 2022-10-19 21:04

请马上登录，朋友们都在花潮里等着你哦：）

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

x

马黑黑 · 发表于 2022-10-19 21:04

代码

<style>
#papa {
margin: auto;
width: 740px;
height: 420px;
background: gray;
box-shadow: 3px 3px 20px #000;
position: relative;
}
#mplayer {
position: absolute;
left: calc(50% - 165px);
bottom: 20px;
display: grid;
grid-template-columns: auto auto;
place-items: center;
}
#btnplay {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(hsla(0,100%,60%,.6), hsla(120,100%,70%,.6));
cursor: pointer;
animation: rot linear 3s infinite;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="mplayer">
<span id="btnplay"></span>
<svg id="iplay" width="300" height="20">
<line id="track" x1="10" y1="10" x2="190" y2="10" stroke="hsla(0,0%,80%,0.5)" stroke-width="10" stroke-linecap="round" />
<line id="prog" x1="10" y1="10" x2="190" y2="10" stroke="hsla(0,50%,50%,0.5)" stroke-width="10" stroke-dasharray="180" stroke-dashoffset="180" stroke-linecap="round" />
<text id="audtime" x="200" y="15" font-size="14" fill="hsl(0,0%,100%)">00:00 | 00:00</text>
</svg>
</div>
</div>
<script>
(function() {
let len = track.getTotalLength(), aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1978267012.mp3';
aud.loop = true;
aud.autoplay = true;
btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - 10) / len;
aud.addEventListener('pause', () =>mState());
aud.addEventListener('play', () =>mState());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = len - aud.currentTime * len / aud.duration;
audtime.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let mState = () => aud.paused ? btnplay.style.animationPlayState = 'paused' : btnplay.style.animationPlayState = 'running';
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
})();
</script>