虞兮叹【马黑老师新控件】

亚伦影音工作室 发表于 2023-5-13 13:57

本帖最后由亚伦影音工作室于 2023-5-13 13:59 编辑 <br /><br /><style>
#papa {
margin: 80px -260px;
width: 1124px;
height: 620px;
background: url('https://file.moyublog.com/d/file/2023-01-25/62fb81fb0d283a04709a33818a3eaa8b.jpg') no-repeat center/cover;
box-shadow: 0 0 0px #000;
position: relative;
z-index: 1;overflow:hidden;
--state: paused;
}
css-doodle { position: absolute; }

#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 90%;
font:normal 3em 华文行楷;
color: #055306;
white-space: pre;
-webkit-background-clip: text;
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 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

</style>

<div id="papa">
   <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<css-doodle grid="6" id="mplayer">
   :doodle {margin: 3% 70%;
            @grid: 2 / 300px 60px;
            position: absolute;z-index: 1000;
            color: var(--color);
         transform: scale(1);
            --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
   }
   /* 时间信息 : 左 */
   @nth(1) {
            @place: 10% 125%;
            :after { content: var(--ttmsg1); }
   }
   /* 控制器 */
   @nth(2) {
            @size: var(--size);
            @shape: windmill;
            @place: 50% 35%;
            background: var(--color);
            animation: rot 6s infinite linear var(--state);
   }
   /* 时间信息 : 右 */
   @nth(3) {
            @place: 90% 125%;
            :after { content: var(--ttmsg2); }
   }
   /* 进度条 */
   @nth(4) {
            @place: 50% 80%;
            @size: 60% 2px;
            background: #aaaaaa;
            display: grid;
            place-items: center start;
            :before {
                     content: '';
                     width: var(--prog);
                     height: 100%;
                     background: var(--color);
            }
   }
   @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<css-doodle grid="20">
:doodle {
@size: 100% 100%;
}
position: absolute;
top: @r(250)%;
left: -30%;
:after {
position: absolute;
content: '@p(♪,¶,♫,♯,♭,♮,♩,♬)';
color: #ffffff;
font-size: @r(2, 30)px;
}
animation: fall @r(60,200)s @r(-60, 60)s infinite var(--state);
@keyframes fall {
0% { left: 200%;top: 0%; transform: rotate(0deg); }
            100% {left: -80%; transform: rotate(@p(360, 720)deg); }}

</css-doodle>
<audio id="aud" src="https://www.qqmc.com/mp3/music148411214.mp3" autoplay loop></audio>

</div>

<script>
(function(){
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused')) : ( papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
   aud.addEventListener('seeked', () => calcKey());

})();
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
FS({
            pa: papa,

set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2.1em 华文隶书;',
   });
(function() {
   let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
   let script = document.createElement('script');
   script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
   document.head.appendChild(script);
   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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('play', mState, false);
   aud.addEventListener('pause', mState, false);
   aud.addEventListener('timeupdate', () => {
            mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
            mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
            mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
   });

   mplayer.onclick = () => {
            if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
            if(clickIdx === 2) aud.currentTime = progChg;
   }
   mplayer.onmousemove = (e) => {
            let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
            clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
            mplayer.style.cursor = cursors;
            if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
   }
})();
</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
虞兮叹
演唱 Singer：闻人听書_
作词 Lyrics：祝何
作曲 Music：祝何
编曲 Arranger：祝何
出品：亚伦影音工作室
楚河流沙几聚散日月沧桑尽变换
乱世多少红颜换一声长叹
谁曾巨鹿踏破了秦关千里兵戈血染
终究也不过是风轻云淡
长枪策马平天下此番诀别却为难
一声虞兮虞兮泪眼已潸然
与君共饮这杯中冷暖西风彻夜回忆吹不断
醉里挑灯看剑妾舞阑珊
垓下一曲离乱楚歌声四方
含悲辞君饮剑血落凝寒霜
难舍一段过往缘尽又何妨
与你魂归之处便是苍茫
长枪策马平天下此番诀别却为难
一声虞兮虞兮泪眼已潸然
与君共饮这杯中冷暖西风彻夜回忆吹不断
醉里挑灯看剑妾舞阑珊
垓下一曲离乱楚歌声四方
含悲辞君饮剑血落凝寒霜
难舍一段过往缘尽又何妨
与你魂归之处便是苍茫
汉兵刀剑纷乱折断了月光
江畔只身孤舟余生不思量
难舍一段过往缘尽又何妨
与你来生共寄山高水长
`;

/*变量：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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.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>

红影发表于 2023-5-13 16:22

亚伦老师又调整花瓣往左飞了，这个制作很赞{:4_187:}

红影发表于 2023-5-13 16:25

有自己改变的都很赞{:4_187:}

红影发表于 2023-5-13 16:32

时间放在进度条的两端了，这样也不错{:4_204:}

醉美水芙蓉 发表于 2023-5-13 17:06

小文发表于 2023-5-13 19:41

很赞！喜欢

梦缘发表于 2023-5-13 20:46

好制作，漂亮，欣赏问好！{:4_185:}

焱鑫磊 发表于 2023-5-13 22:17

欣赏老师佳作！{:4_204:}

马黑黑 发表于 2023-5-14 10:50

二次开发效果更好，欣赏

亦是金 发表于 2023-5-14 10:57

问好欣赏点赞！{:4_190:}

页: [1]

花潮论坛's Archiver

虞兮叹【马黑老师新控件】