马黑黑 发表于 2022-8-23 07:21

花心

本帖最后由 马黑黑 于 2022-8-23 08:20 编辑 <br /><br /><style>
#papa { left: -214px; /*margin: auto; */width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/t22/51/hx.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { position: absolute; left: 458px; top: 78px; cursor: pointer; }
#hx { position: absolute;left : calc(50% - 180px); top: 10px; }
</style>

<div id="papa">
        <img id="hx" src="https://638183.freep.cn/638183/t22/51/hx.png" alt="" />
        <canvas id="player"></canvas>
</div>

<script>
let ctx = player.getContext('2d'),
        w = h = player.width = player.height = 120,
        prog = '点这播放',
        angle = 0,
        aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=5035947.mp3';
aud.loop = true;
aud.autoplay = true;

drawCircle();

player.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        angle = 360 * aud.currentTime / aud.duration;
        prog = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        drawCircle();
});

function drawCircle() {
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.strokeStyle = '#eee';
        ctx.lineWidth = 8;
        ctx.arc(w/2, h/2, w/2 - 4, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.strokeStyle = '#EA0001';
        ctx.arc(w/2, h/2, w/2 - 4, -90 * Math.PI / 180, (angle - 90) * Math.PI /180);
        ctx.stroke();
        ctx.fillStyle = '#eee';
        ctx.font = '14px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(prog, w/2, h/2);
}

function toMin(val) {
        if(!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60);
        let sec = parseFloat(val % 60);
        if(min < 10) min = '0' + min;
        if(sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}
</script>

马黑黑 发表于 2022-8-23 07:22

本帖最后由 马黑黑 于 2022-8-23 08:20 编辑

代码分享（全）<style>
#papa { margin: auto; width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/t22/51/hx.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { position: absolute; left: 458px; top: 78px; cursor: pointer; }
#hx { position: absolute;left : calc(50% - 180px); top: 10px; }
</style>

<div id="papa">
        <img id="hx" src="https://638183.freep.cn/638183/t22/51/hx.png" alt="" />
        <canvas id="player"></canvas>
</div>

<script>
let ctx = player.getContext('2d'),
        w = h = player.width = player.height = 120,
        prog = '点这播放',
        angle = 0,
        aud = new Audio();

ctx.arc(50,50,40,0, 2*Math.PI);
ctx.stroke();

aud.src = 'https://music.163.com/song/media/outer/url?id=5035947.mp3';
aud.loop = true;
aud.autoplay = true;

drawCircle();

player.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        angle = 360 * aud.currentTime / aud.duration;
        prog = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        drawCircle();
});


function drawCircle() {
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.strokeStyle = '#eee';
        ctx.lineWidth = 8;
        ctx.arc(w/2, h/2, w/2 - 4, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.strokeStyle = '#EA0001';
        ctx.arc(w/2, h/2, w/2 - 4, -90 * Math.PI / 180, (angle - 90) * Math.PI / 180);
        ctx.stroke();
        ctx.fillStyle = '#eee';
        ctx.font = '14px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(prog, w/2, h/2);
}

function toMin(val) {
        if(!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60);
        let sec = parseFloat(val % 60);
        if(min < 10) min = '0' + min;
        if(sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}

</script>


马黑黑 发表于 2022-8-23 07:30

本帖最后由 马黑黑 于 2022-8-23 08:55 编辑

本帖演示：用画布做圆环进度播放控制器（简易版）

实现思路：

先画一个淡色的底圆环，做“轨迹”之用。然后一点一点画鲜艳的圆环，从顶部开始画，用音乐播放进度实时控制绘制速度，使之能完美表示音乐播放的进度，再在圆环中心辅之以数字形式显示当前播放进度和音乐总时长的对比。

实现原理解析：我将在我的美丽的花园 → 开帖讲解。

马黑黑 发表于 2022-8-23 07:32

理查德克莱德曼高清表演照不好找到理想的，将就用个10多Kb的老旧片子。

红影 发表于 2022-8-23 09:26

原来这个是用画布做的。记得黑黑还有个空心转盘播放器，把那个空心放大，也可以是圆环呢{:4_187:}

红影 发表于 2022-8-23 09:27

两者实现远离不一样，但都一样地漂亮{:4_187:}

马黑黑 发表于 2022-8-23 09:59

红影 发表于 2022-8-23 09:26
原来这个是用画布做的。记得黑黑还有个空心转盘播放器，把那个空心放大，也可以是圆环呢

CSS+HTML元素的圆环进度条可以使用角向渐变实现，遮罩可以向你说的做

加林森 发表于 2022-8-23 10:38

老黑的这个制作真漂亮。用画布先画圆，还要与音乐配合，真不容易的。我去看教程去。{:4_199:}

马黑黑 发表于 2022-8-23 10:43

加林森 发表于 2022-8-23 10:38
老黑的这个制作真漂亮。用画布先画圆，还要与音乐配合，真不容易的。我去看教程去。

懂得原理的话，这个不难理解

加林森 发表于 2022-8-23 10:46

马黑黑 发表于 2022-8-23 10:43
懂得原理的话，这个不难理解

嗯嗯。我数学不好，算不清楚的。{:4_189:}

醉美水芙蓉 发表于 2022-8-23 11:30

马黑黑 发表于 2022-8-23 11:39

醉美水芙蓉 发表于 2022-8-23 11:30
黑黑老师这个播放器设计的真漂亮！

还行吧

马黑黑 发表于 2022-8-23 11:40

加林森 发表于 2022-8-23 10:46
嗯嗯。我数学不好，算不清楚的。

数学很重要

马黑黑 发表于 2022-8-23 11:41

红影 发表于 2022-8-23 09:27
两者实现远离不一样，但都一样地漂亮

过得去

加林森 发表于 2022-8-23 11:43

马黑黑 发表于 2022-8-23 11:40
数学很重要

嗯嗯，明白的。

小辣椒 发表于 2022-8-23 15:32

黑黑好棒，又一个播放器，{:4_178:}

红影 发表于 2022-8-23 16:46

马黑黑 发表于 2022-8-23 11:41
过得去

真的挺漂亮呢{:4_204:}

马黑黑 发表于 2022-8-23 17:15

红影 发表于 2022-8-23 16:46
真的挺漂亮呢

还行

马黑黑 发表于 2022-8-23 17:28

小辣椒 发表于 2022-8-23 15:32
黑黑好棒，又一个播放器，

旧锅煮新饭而已

红影 发表于 2022-8-23 20:52

马黑黑 发表于 2022-8-23 17:15
还行

这心形的PNG很漂亮。播放器颜色也跟它一致呢。
页: [1] 2
查看完整版本: 花心