【琴、棋、书、画】之画 TO朝云暮雨
<style>#papa { left: -214px; width: 1024px; height: 640px; background: tan url('https://pic2.imgdb.cn/item/64619df20d2dde5777731e56.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 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=1909005235.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>
画 云告诉我，复活一尊远古的神祇要献祭多少染血的胭脂和几世轮回沉浮中，就用眼泪化开花青去点活你脸上的腮红
画一朵云，云中影影绰绰，和一座山神采飞扬
云上是天，天上是你你是云也是天，云、天和你没有区别
画一方朝霞，和太阳一并升起金色的海洋里，挤满流畅娜娜的曲线恰如你，光明的韵致
画一座山，画一片云云助山势，山为云依除却巫山，无你
画 雨 一半山川，有你的痕迹四月的杏花，在清明的早上打湿北国江南，千丝万缕的相思，由牧童指认我在断魂人里
和桃花有染，是杜甫发现的落红证据由一汪湿浓和流水说破远去的香味儿，年年如是
与梨花之约，被你堵在月下淋漓成消魂的样子擦去的，万千啼痕落在唐寅的诗意里
行，君也思坐，我也思 “今我来思，雨雪霏霏昔我往矣，杨柳依依”。。。。。 本来把歌词贴上的，不料，不同步，瞧这人笨的也相当可以了{:4_189:} 恭喜师兄把琴棋书画四个美妙的主题都完成了，这些诗句和音画制作都很棒{:4_199:} 樵歌 发表于 2023-5-15 15:12
画 云告诉我，复活一尊远古的神祇要献祭多少染血的胭脂和几世轮回沉浮中，就用眼泪化开花青去点活你脸上的 ...
画云的那首更好看，巧妙地嵌入了云儿的名字。诗句中的场景非常美妙{:4_199:} 樵歌 发表于 2023-5-15 15:12
本来把歌词贴上的，不料，不同步，瞧这人笨的也相当可以了
师兄可以贴在帖子里啊，这样最省力了{:4_173:} 红影 发表于 2023-5-15 15:27
师兄可以贴在帖子里啊，这样最省力了
朝云暮雨 （和声版）
作词 : 陈小奇
作曲 : 陈小奇
还是昨天的水
还是当年的天
朝云暮雨美丽着你的容颜
还是照你的月
还是寻你的我
飘飘渺渺不知今夕是何年
点亮船头的灯
收起风里的帆
今夜就让我枕着潮声入眠
思念它不会老
风景它总会变
似水柔情如何接受这沧海桑田
你是巫峡牵不住的云烟
把我守候成十二座痴心的山
你是长江钓不完的碧雪
只让我在蓑衣里编织着从前
PS，我上午在弄这歌词，弄上云不同步呀，反复弄了好久，也不知道有什么机关，{:4_198:}你师兄我自己也是醉了。师妹帮我把那词贴上呗。关键是怎么知道其某句所用时间呀，这个不好乱设置。唉。。。 红影 发表于 2023-5-15 15:22
恭喜师兄把琴棋书画四个美妙的主题都完成了，这些诗句和音画制作都很棒
昨天就写好了，为了把歌词贴 上并同步，把黑师和你的贴子翻了底朝天，也没弄明白，你师兄真的太笨了{:4_201:} 红影 发表于 2023-5-15 15:22
恭喜师兄把琴棋书画四个美妙的主题都完成了，这些诗句和音画制作都很棒
师兄长时时不凑现代字，可费老鼻子劲了，{:4_189:} 赏画，听歌，读诗，思人{:4_173:} 红影 发表于 2023-5-15 15:27
画云的那首更好看，巧妙地嵌入了云儿的名字。诗句中的场景非常美妙
如画画一般的，云好写画，雨最是难以表现了。画家们都很是怕画雨呢。{:4_189:} 大汉 发表于 2023-5-15 15:49
赏画，听歌，读诗，思人
是极是极。欢迎归来的兄台{:4_176:} 樵歌 发表于 2023-5-15 15:45
朝云暮雨 （和声版）
作词 : 陈小奇
作曲 : 陈小奇
师兄到黑黑专版，里面有花潮歌词同步的做法，在那里面就可以得到每句的时间了啊。师兄可以去学学，下回所有的歌词都能轻松弄出来了呢。 樵歌 发表于 2023-5-15 15:46
昨天就写好了，为了把歌词贴 上并同步，把黑师和你的贴子翻了底朝天，也没弄明白，你师兄真的太笨了{:4_2 ...
把歌词的那部分替换成歌曲的制作好的就可以了，制作去黑黑专版里，在置顶里，一找就找到了啊。 樵歌 发表于 2023-5-15 15:48
师兄长时时不凑现代字，可费老鼻子劲了，
师兄有根底在，随便写写都很漂亮的{:4_187:} 樵歌 发表于 2023-5-15 15:49
如画画一般的，云好写画，雨最是难以表现了。画家们都很是怕画雨呢。
师兄的雨里有古人的诗句在，也觉得很漂亮呢{:4_187:} 红影 发表于 2023-5-15 16:21
师兄到黑黑专版，里面有花潮歌词同步的做法，在那里面就可以得到每句的时间了啊。师兄可以去学学，下回所 ...
我去看了又看，倒是明白点怎得词和时间了，但那段代码加在哪一行下面还是晕的啊{:4_198:} 红影 发表于 2023-5-15 16:22
把歌词的那部分替换成歌曲的制作好的就可以了，制作去黑黑专版里，在置顶里，一找就找到了啊。
反复学了十几遍，知道一点了，要打开黑师那个屏，然后再操作。。。 红影 发表于 2023-5-15 16:23
师兄有根底在，随便写写都很漂亮的
都很免强呢{:4_201:} 红影 发表于 2023-5-15 16:24
师兄的雨里有古人的诗句在，也觉得很漂亮呢
差强人意呢{:4_173:}