杏花弦外雨
<style>#papa { margin: 120px-280px; width: 1164px; height: 640px; background: url('https://pic.imgdb.cn/item/64c5e8081ddac507cc14d11e.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; display: grid; place-items: center;overflow: hidden;}
#prog { position: absolute; bottom: 20px; width: 280px; height: 12px; background: linear-gradient(to right, #ffffff var(--prg), #000000 0) repeat-x 0 50% / 100% 1px; color: #ffffff; display: grid; place-items: center; --prg: 0%; --state: paused; }
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/-1em serif;color:#ffffff;cursor: pointer; left: var(--prg); }
#btnplay { position: absolute; top: -20px;font: normal 3.5em/0em serif;color:#ffffff;cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;
left: 50%;z-index: 20;
transform: translate(-50%);
top: 80%;
font:normal 2.0em 华文隶书;
color: #0000;
white-space: pre;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{ 0% { width: 0%;letter-spacing: 15px; color:#000090; transform:perspective(300px) ;}100% { width: 350%; letter-spacing: 0px;color:#ff0000; } }
@keyframes cover2 {0% { width: 0%;letter-spacing: 0px; color:#00ff00;}100% { width: 350%; letter-spacing:15px;color:#ff0000;transform:perspective(300px) }}
</style>
<div id="papa">
<div id="lrc" data-lrc="烟雨草堂">烟雨草堂</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停">❊</span>
<span id="slider">➽</span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=32957012.mp3" autoplay="" loop=""></audio>
<script>
(function() {
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.addEventListener('click', () => { aud.paused ?aud.play() : aud.pause(); });
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
})();
(function() {
/*原始lrc歌词*/
let lrcStr = `
作词 : 若紫鸢
作曲 : 潇梦临
编曲：潇梦临
演唱：CRITTY、司夏_西国之海妖
配图：东篱闲人
后期：珊瑚
流莺悄飞近船侧 伴桨声低语浅说
柳梢沾绿了烟波 绕堤三分春色
旧书翻入寻常调 隔岸依稀吴越歌
反复着几回啼笑 往来几段离合
有书生翩翩风流 有佳人独坐楼阁
有一日擦肩而过 惹来两情脉脉
诗文里风月渐浓 只不见天长地久
心事落在琴弦外 又与谁轻轻说
说那年烟雨空濛 杏花船摇摆而过
过谁家楼台 一声弦歌拂落
他素白衣着 山水间几程远游
堪折 何折 年年柳色
当柳梢下的集句 尽数流过眼底
拈一缕春风浅浅作序
待到行间字里
再不是眼前朝夕
曲中人早已离题
当一阵阵临窗雨 洗旧那时心绪
曲中人远隔千里万里
不知不觉的停笔
留下余韵待续
就在那片烟波外 淡成了迤逦
后来事不知如何 那佳人还在楼阁
独对着雨帘萧瑟 一字一句斟酌
诗文里风月残留 不经意换了角色
陈词落在琴弦外 还有谁轻轻说
说那年烟雨空濛 杏花船摇摆而过
过谁家楼台 一声弦歌落寞
她等过几番 绵绵飞絮亦白头
空折 还折 年年柳色
当柳梢下的集句 尽数流过眼底
拈一缕春风浅浅作序
待到行间字里
再不是眼前朝夕
曲中人早已离题
当一阵阵临窗雨 洗旧那时心绪
曲中人远隔千里万里
不知不觉的停笔
留下余韵待续
就在那片烟波外 淡成了迤逦
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
/*格式化时间信息*/
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;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),btnplay.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
老头学习东西速度也是快的{:4_199:} 老头你有许多发帖溢出码，我给你去了，你现在自己编辑进去看看。溢出码有时候会影响帖子下面乱了界面 欣赏老头的精彩制作{:4_187:} 小辣椒 发表于 2023-7-30 14:20
老头你有许多发帖溢出码，我给你去了，你现在自己编辑进去看看。溢出码有时候会影响帖子下面乱了界面
俺不懂那些，谢谢师傅。。。{:4_180:} 有一个成功的制作，欣赏东篱大哥好帖{:4_199:} 红影 发表于 2023-7-30 16:56
有一个成功的制作，欣赏东篱大哥好帖
同喜同喜。。。{:5_106:} 醉美水芙蓉 发表于 2023-7-30 18:50
欣赏东篱老师精彩音画！
芙蓉辛苦。。。{:4_180:} 东篱闲人 发表于 2023-7-30 18:45
同喜同喜。。。
不但显示正常，而且制作很漂亮。{:4_187:} 红影 发表于 2023-7-30 22:31
不但显示正常，而且制作很漂亮。
谢谢谢谢。。。{:4_180:} 东篱闲人 发表于 2023-7-31 20:17
谢谢谢谢。。。
别客气，这里没外人{:4_173:} 红影 发表于 2023-7-31 22:35
别客气，这里没外人
这个你也学会啦？{:5_117:} 东篱闲人 发表于 2023-8-1 09:06
这个你也学会啦？
多亲切的一句话啊{:4_173:} 红影 发表于 2023-8-1 15:54
多亲切的一句话啊
{:4_172:} 东篱闲人 发表于 2023-8-2 09:57
想起这句话还挺有历史的呢{:4_173:} 红影 发表于 2023-8-2 13:47
想起这句话还挺有历史的呢
都是文明的传承啊。。。。 东篱闲人 发表于 2023-8-2 17:32
都是文明的传承啊。。。。
就这么一句，还被深度解读过，咋还成了文明了{:4_173:} 红影 发表于 2023-8-2 20:22
就这么一句，还被深度解读过，咋还成了文明了
不文明谁解读？ 东篱闲人 发表于 2023-8-2 20:25
不文明谁解读？
算了，过往的事随风吹过，不去管了{:4_173:}
页:
[1]
2