论坛 › 现代文学 › 【琴、棋、书、画】之琴 TO朝云暮雨

樵歌 发表于 2023-5-9 13:53

【琴、棋、书、画】之琴 TO朝云暮雨

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: tan url('https://pic2.imgdb.cn/item/6459b5650d2dde5777b0ef67.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 20px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: #DBE3E2; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 55px; font: bold 1.4em sans-serif; color: orange; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>

<div id="papa">
        <span id="conicPlayer" data-per="00:00&#10;00:00"></span>
        <span id="lrctext">lrc歌词</span>
</div>

<script>
let lrcAr = [
        ['00.00', '纯音乐'],
        ['170.00','感谢欣赏']
];
let aud = new Audio();

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

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

aud.addEventListener('timeupdate', () => {
        let current = aud.currentTime / aud.duration * 100;
        conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
        conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
        }
});

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>

樵歌 发表于 2023-5-9 13:53

【琴、棋、书、画】之琴 TO朝云暮雨
一个人，把孤独弹奏成天籁另一个，便趟着月光独行
一只看不见的耳朵通宵达旦地醒着倾听，从我的手指跑调一匹匹梦马，疯了一样在阳关处折叠哒哒的蹄声，踏碎高山穿越流水，于平沙处小憩，这时大雁便传来消息
飞来五十把刀子，五十弦从沧桑的音阶之上将我逼进画里我焚香正冠，宫商角微羽捻抹的回声空旷，每一弦都抜不动这暧昧的夜色
我的弦柱绷紧又放松错失的江山如梦这一世只为你触摸过的脉络供我痛心

樵歌 发表于 2023-5-9 13:53

两三年没凑过现代了，手生了，见笑见笑{:4_173:}

罗浮梦 发表于 2023-5-9 14:05

本帖最后由 罗浮梦 于 2023-5-9 14:06 编辑

我不会评，就知道这诗歌写的好看，彰显作者文功了得！

朝云暮雨 发表于 2023-5-9 14:52

樵歌 发表于 2023-5-9 13:53
【琴、棋、书、画】之琴 TO朝云暮雨
一个人，把孤独弹奏成天籁另一个，便趟着月光独行
一只看不见的耳 ...

哇塞！你你你这气势。吓人的，势不可挡！！{:4_173:}

朝云暮雨 发表于 2023-5-9 14:55

我站在这里，会不会被你一拨琴声，劈 过来的掌风，弹飞出去。哈哈哈

朝云暮雨 发表于 2023-5-9 14:57

吓坏人，哈哈哈。真绝！！{:4_204:}

朝云暮雨 发表于 2023-5-9 14:59

飞来五十把刀子，五十弦
从沧桑的音阶之上
将我逼进画里
我焚香正冠，宫商角微羽
捻抹的回声空旷，每一弦
都抜不动这暧昧的夜色

我的弦柱绷紧又放松
错失的江山如梦
这一世
只为你触摸过的脉络
供我痛心


这都藏了多少年的洪荒之力啊，武极之传。哈哈哈，服的五体投地{:4_170:}

朝云暮雨 发表于 2023-5-9 15:03

赶紧的继续写余三个，等着马首是瞻{:4_173:}

梦油 发表于 2023-5-9 16:19

图文并茂且有优雅的背景音乐，实在太美了！

醉美水芙蓉 发表于 2023-5-9 16:55

红影 发表于 2023-5-9 17:35

师兄做音画帖子了，外加写了诗句，这个帖子真棒{:4_187:}

红影 发表于 2023-5-9 17:39

樵歌 发表于 2023-5-9 13:53
【琴、棋、书、画】之琴 TO朝云暮雨
一个人，把孤独弹奏成天籁另一个，便趟着月光独行
一只看不见的耳 ...

音乐中有无形的力量，牵着人的思路穿越亘古和天地，进入玄幻的境地。
如水的音符里，有错失的江山的大气也有违另一颗心灵共鸣的婉约。欣赏师兄好诗{:4_199:}

红影 发表于 2023-5-9 17:40

樵歌 发表于 2023-5-9 13:53
两三年没凑过现代了，手生了，见笑见笑

这么就没写了，这难得写的必须亮起来{:4_173:}

一斛珠 发表于 2023-5-9 19:14

挥洒自如，有气势！{:4_199:}

一斛珠 发表于 2023-5-9 19:19

弦作剑，一拨一弄，让我看到了一个不一样的你。

樵歌 发表于 2023-5-9 19:25

朝云暮雨 发表于 2023-5-9 14:52
哇塞！你你你这气势。吓人的，势不可挡！！

是不是不够温油，一片杀伐之音{:4_189:}

小辣椒 发表于 2023-5-9 19:33

第一次看见樵哥哥这么高大上的制作，狂顶{:4_178:}

樵歌 发表于 2023-5-9 19:37

红影 发表于 2023-5-9 17:35
师兄做音画帖子了，外加写了诗句，这个帖子真棒

把上次你修改后发给的代码弄丢了，才去翻到黑师最早的，马上套了下，总算出来了。

樵歌 发表于 2023-5-9 19:38

小辣椒 发表于 2023-5-9 19:33
第一次看见樵哥哥这么高大上的制作，狂顶

眼睛好了么，一直担心着{:4_197:}

查看完整版本: 【琴、棋、书、画】之琴 TO朝云暮雨