我是人间限量版(DJ 阿本版)-周小双[klok字幕，视频背景，按钮齐全]

亚伦影音工作室 发表于 2023-10-13 20:29

本帖最后由亚伦影音工作室于 2024-2-10 10:34 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
width: 1164px;
height: 640px;
background:#333 url('https://pic.imgdb.cn/item/645088790d2dde577794490d.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%; opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#000000 100%,black 100%);}
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0.1s all ease;mix-blend-mode: lighten; }

#mplayer {z-index: 90;
position: absolute;
top:93%; left:3%;
bottom: 5px;
width: 30px;
height: 30px;
border: 0px solid #cccccc;
border-radius: 0%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #cccccc;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 12px;
border-width: 10px 12px;
border-color: transparent transparent transparent #cccccc;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
   font: normal 15px sans-serif;
   color: #ffffff;
      top:93.5%;
   left:85%;}

#prog {position: absolute;z-index: 91;
   width: 76%;
   height: 0.3%;
   cursor: pointer;
      top:95%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
      left:7%;
border-radius: 2px;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:94.5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
#bt{ width: 500px; height: 50px;color: #00ff00; position: absolute; left:3%;top:3%;font-size: 24px; font-family:华文隶书;z-index: 21; animation: wz 20s linear infinite ; }
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(480%); left: 60%;}
}
#lrc { --motion: cover1; --tt: 2s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); top: 80%; font: normal 3.5em 华文新魏; color:#ff0000; -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: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background:#000080 ; filter: #ffffff; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1{0% { width: 0%;filter: hue-rotate(360deg)brightness(150%)}
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 0%;filter: hue-rotate(360deg)brightness(150%)}
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
</style>

<div id="papa">
<span id="fullscreen">全屏</span>
<div id="mb"></div>
<div id="bt">我是人间限量版(DJ 阿本版)-周小双</div>
<video id="vid"src="https://imgs-qn.51miz.com/preview/video/00/00/12/34/V-123467-DD34AEBE.mp4" muted autoplay loop></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music289978911.mp3" loop autoplay></audio>

<script>

(function() {
/*原始lrc歌词*/
let lrcStr = `我是人间限量版(DJ 阿本版)-周小双
作词：大yuan
作曲：大yuan
混音：DJ 阿本
企划：龙小晨
推广：久居
出品：Find Gold 计划
OP：辣椒音娱

就算我生得再普通平凡
好歹老子也是限量版
我喝着孤独的酒
吹着自由的风
余生里做着只有自己的梦
哪怕风来了又走心满了又空
该遇到的人它总会相逢
我本就两手空空
还需要怕什么痛
用笑容对峙生活的戏弄
别在意那些嘲讽
毕竟所有的成功
都来自那些不切实际的梦
我们都生来平凡
要尝尽人世冷暖
生活里充满无奈和心酸
我们来不及感叹
不如就顺其自然
一条船总有一天会靠岸
孤独本就是常态
总要去习惯分开
可总有个人会为你等待
就算我生得再普通平凡
好歹老子也是限量版
我喝着孤独的酒
吹着自由的风
余生里做着只有自己的梦
哪怕风来了又走心满了又空
该遇到的人它总会相逢
我本就两手空空
还需要怕什么痛
用笑容对峙生活的戏弄
别在意那些嘲讽
毕竟所有的成功
都来自那些不切实际的梦
孤独本就是常态
总要去习惯分开
可总有个人会为你等待
就算我生得再普通平凡
好歹老子也是限量版
我喝着孤独的酒
吹着自由的风
余生里做着只有自己的梦
哪怕风来了又走心满了又空
该遇到的人它总会相逢
我本就两手空空
还需要怕什么痛
用笑容对峙生活的戏弄
别在意那些嘲讽
毕竟所有的成功
都来自那些不切实际的梦
我喝着孤独的酒
吹着自由的风
余生里做着只有自己的梦
哪怕风来了又走心满了又空
该遇到的人它总会相逢
我本就两手空空
还需要怕什么痛
用笑容对峙生活的戏弄
别在意那些嘲讽
毕竟所有的成功
都来自那些不切实际的梦
`;

/*变量：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); /*获得歌词数组*/
})();

(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
</script>
<script>
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
            fs = !fs;
   };
prog.onclick = (e) => {
            aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
   }
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
            tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

   });
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;
   };

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { aud.paused ? vid.pause(): vid.play() };
/*结束*/

/*控制文字颜色*/
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
/*结束*/
</script>

红影发表于 2023-10-13 21:06

这歌词听得笑喷，真狂啊{:4_173:}

红影发表于 2023-10-13 21:07

漂亮的制作，欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2023-10-13 21:37

哇塞，亚伦你的速度太快了，一下子2个帖，佩服一下的

小辣椒 发表于 2023-10-13 21:39

这个全屏文字位置换的好，这样不占画面了，但手机欣赏是点不到的，反正手机无所谓全屏

小辣椒 发表于 2023-10-13 21:39

欣赏亚伦的精彩连连{:4_199:}

页: [1]

花潮论坛's Archiver

我是人间限量版(DJ 阿本版)-周小双[klok字幕，视频背景 ，按钮齐全]

我是人间限量版(DJ 阿本版)-周小双[klok字幕，视频背景，按钮齐全]