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

黄龄 - 入画江南

<style>
#papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: #ccc url('https://638183.freep.cn/638183/t22/jiangnan.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { position: absolute; right: 20px; top: 20px; cursor: pointer; }
#lrcbox { position: absolute; top: 20px; font: normal 1.8em sans-serif; color: #50616d; text-shadow: 1px 1px 2px #000, -5px -5px 10px rgba(0,0,0,.65); }
</style>

<div id="papa">
        <canvas id="player"></canvas>
        <span id="lrcbox"></span>
</div>

<script>
let ctx = player.getContext('2d'),
        w = h = player.width = player.height = 120,
        prog = '点这播放',
        angle = 0,
        aud = new Audio();
let lrcAr = [
        ['0.01','入画江南 - 黄龄'],
        ['0.99','我有一段情 入画后 归旧梦 故里'],
        ['8.24','我有一段爱 落款上 将前世印记'],
        ['17.03','一城天晴一城雨 引我入戏'],
        ['22.08','平添着醉意'],
        ['25.38','豫园一抹香茗 酌一杯飘逸'],
        ['50.01','看江南朝夕 望天色如玉 几番琉璃'],
        ['58.15','鸳与鸯梳羽 听桥面眷侣 细声如雨'],
        ['66.08','风追杨柳絮 孩童正嬉戏'],
        ['69.95','货郎叫卖声淹没了马蹄'],
        ['73.45','谁家良人又来浣衣'],
        ['80.39','我有一段情 入画后 归旧梦 故里'],
        ['89.09','我有一段爱 落款上 将前世印记'],
        ['97.09','一城天晴一城雨 引我入戏'],
        ['100.34','平添着醉意'],
        ['105.65','豫园一抹香茗 酌一杯飘逸'],
        ['130.08','人山人海里 香火中浓郁 谁的期许'],
        ['138.04','吹糖裹糖衣 身在弄堂里 巧琢甜蜜'],
        ['146.06','看一场百戏 尝一口江鱼'],
        ['149.90','忽听树梢上麻雀争鸣啼'],
        ['153.62','谁家炊烟缓缓升起'],
        ['161.10','我有一段情 如倦鸟 屋檐下 栖息'],
        ['168.88','我有一段爱 几千里 镌刻着回忆'],
        ['177.15','一方天地一潮汐 让人入迷'],
        ['182.21','繁华盛世里'],
        ['185.50','桥下一尾锦鲤 添岁月新意'],
        ['197.04','我有一段情 入画后 归旧梦 故里'],
        ['204.96','我有一段爱 落款上 将前世印记'],
        ['213.16','一城天晴一城雨 引我入戏'],
        ['218.01','平添着醉意'],
        ['221.62','豫园一抹香茗 酌一杯飘逸']
];

aud.src = 'https://music.163.com/song/media/outer/url?id=1817661979.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();
        for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr) lrcbox.innerHTML = lrcAr;
        }
});

function drawCircle() {
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.strokeStyle = '#f0fcff';
        ctx.lineWidth = 8;
        ctx.arc(w/2, h/2, w/2 - 6, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.strokeStyle = ctx.fillStyle = '#50616d';
        ctx.arc(w/2, h/2, w/2 - 6, -90 * Math.PI / 180, (angle - 90) * Math.PI / 180);
        ctx.stroke();
        ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur = 2;
        ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
        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 17:43

参考代码（全）：
<style>
#papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: #ccc url('https://638183.freep.cn/638183/t22/jiangnan.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { position: absolute; right: 20px; top: 20px; cursor: pointer; }
#lrcbox { position: absolute; top: 20px; font: normal 1.8em sans-serif; color: #50616d; text-shadow: 1px 1px 2px #000, -5px -5px 10px rgba(0,0,0,.65); }
</style>

<div id="papa">
        <canvas id="player"></canvas>
        <span id="lrcbox"></span>
</div>

<script>
let ctx = player.getContext('2d'),
        w = h = player.width = player.height = 120,
        prog = '点这播放',
        angle = 0,
        aud = new Audio();
let lrcAr = [
        ['0.01','入画江南 - 黄龄'],
        ['0.99','我有一段情 入画后 归旧梦 故里'],
        ['8.24','我有一段爱 落款上 将前世印记'],
        ['17.03','一城天晴一城雨 引我入戏'],
        ['22.08','平添着醉意'],
        ['25.38','豫园一抹香茗 酌一杯飘逸'],
        ['50.01','看江南朝夕 望天色如玉 几番琉璃'],
        ['58.15','鸳与鸯梳羽 听桥面眷侣 细声如雨'],
        ['66.08','风追杨柳絮 孩童正嬉戏'],
        ['69.95','货郎叫卖声淹没了马蹄'],
        ['73.45','谁家良人又来浣衣'],
        ['80.39','我有一段情 入画后 归旧梦 故里'],
        ['89.09','我有一段爱 落款上 将前世印记'],
        ['97.09','一城天晴一城雨 引我入戏'],
        ['100.34','平添着醉意'],
        ['105.65','豫园一抹香茗 酌一杯飘逸'],
        ['130.08','人山人海里 香火中浓郁 谁的期许'],
        ['138.04','吹糖裹糖衣 身在弄堂里 巧琢甜蜜'],
        ['146.06','看一场百戏 尝一口江鱼'],
        ['149.90','忽听树梢上麻雀争鸣啼'],
        ['153.62','谁家炊烟缓缓升起'],
        ['161.10','我有一段情 如倦鸟 屋檐下 栖息'],
        ['168.88','我有一段爱 几千里 镌刻着回忆'],
        ['177.15','一方天地一潮汐 让人入迷'],
        ['182.21','繁华盛世里'],
        ['185.50','桥下一尾锦鲤 添岁月新意'],
        ['197.04','我有一段情 入画后 归旧梦 故里'],
        ['204.96','我有一段爱 落款上 将前世印记'],
        ['213.16','一城天晴一城雨 引我入戏'],
        ['218.01','平添着醉意'],
        ['221.62','豫园一抹香茗 酌一杯飘逸']
];

aud.src = 'https://music.163.com/song/media/outer/url?id=1817661979.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();
        for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr) lrcbox.innerHTML = lrcAr;
        }
});

function drawCircle() {
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.strokeStyle = '#f0fcff';
        ctx.lineWidth = 8;
        ctx.arc(w/2, h/2, w/2 - 6, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.strokeStyle = ctx.fillStyle = '#50616d';
        ctx.arc(w/2, h/2, w/2 - 6, -90 * Math.PI / 180, (angle - 90) * Math.PI / 180);
        ctx.stroke();
        ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur = 2;
        ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
        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 17:47

如果不需要圆环阴影，请分别在第 79 行之下 和 第 87 行之下各插入：

ctx.save(); //保存画笔设置 ：放在 79 行下面

ctx.restore(); //恢复画笔设置 ：放在 87 行下面

小辣椒 发表于 2022-8-23 18:44

漂亮，手机音乐直接出来了，这个播放器爱了爱了{:4_178:}

小辣椒 发表于 2022-8-23 18:46

可以歌词同步，黑黑你太万能了{:4_170:}

千羽 发表于 2022-8-23 19:32

这线条画很清晰醒目，别样的感觉，美……{:4_187:}

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

千羽 发表于 2022-8-23 19:32
这线条画很清晰醒目，别样的感觉，美……

感谢赞许。请喝水{:4_190:}

马黑黑 发表于 2022-8-23 19:42

小辣椒 发表于 2022-8-23 18:44
漂亮，手机音乐直接出来了，这个播放器爱了爱了

{:4_196:}

马黑黑 发表于 2022-8-23 19:42

小辣椒 发表于 2022-8-23 18:46
可以歌词同步，黑黑你太万能了

歌词同步是以前的技术

千羽 发表于 2022-8-23 19:43

马黑黑 发表于 2022-8-23 19:41
感谢赞许。请喝水

哈哈，你多喝几杯哈{:4_189:}

马黑黑 发表于 2022-8-23 19:44

千羽 发表于 2022-8-23 19:43
哈哈，你多喝几杯哈

我喝了不少的

千羽 发表于 2022-8-23 19:45

马黑黑 发表于 2022-8-23 19:44
我喝了不少的

还得继续喝{:4_190:}{:4_180:}{:4_181:}

马黑黑 发表于 2022-8-23 19:45

千羽 发表于 2022-8-23 19:45
还得继续喝

可以可以，谢谢

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

黑白色，搭配着着这样的歌词同步和播放器，真美，出乎意料{:4_187:}

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

红影 发表于 2022-8-23 20:36
黑白色，搭配着着这样的歌词同步和播放器，真美，出乎意料

美可以是东篱一样淳朴的

朵拉 发表于 2022-8-23 21:17

精致得很，欣赏学习{:4_178:}

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

朵拉 发表于 2022-8-23 21:17
精致得很，欣赏学习

{:4_190:}

红影 发表于 2022-8-23 21:18

马黑黑 发表于 2022-8-23 20:40
美可以是东篱一样淳朴的

哈哈，这个词用得好，很适合这个帖子{:4_173:}

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

红影 发表于 2022-8-23 21:18
哈哈，这个词用得好，很适合这个帖子

不是和我不说的

红影 发表于 2022-8-23 21:41

马黑黑 发表于 2022-8-23 21:19
不是和我不说的

但还是应该换个词，纯粹、天然。毕竟淳朴大都是形容人的。
页: [1] 2 3
查看完整版本: 黄龄 - 入画江南