《海岛冰轮初转腾》李胜素
本帖最后由 焱鑫磊 于 2023-10-5 16:49 编辑 <br /><br /><style>#papa { margin: 100px -300px; width: 1200px; height: 750px; background: url('https://img.fy6b.com/2023/10/04/eaa5ae3075d5d.png') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 2px #ff0000;overflow:hidden;border-radius:1%;display: grid; place-items: center; z-index: 1; position: relative; hidden;border-radius: 0px 0px;}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
50% {opacity: 1;transform: scale(1);filter:hue-rotate(60deg)contrast(120%)brightness(120%);}
51% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform:scale(4)rotateY(0deg);}}
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
</style>
<div id="papa">
<div id='dt'><img id="testImg" src="https://img.fy6b.com/2023/10/04/93414ddab59d8.png" width="100%" height="100%"></div>
<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/15/93/V-159396-29CDFF09.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/27623712d52a06a6e6c99bc7d67874e6.mp3" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/oscpp_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [];
script.onload = () => {
HCPlayer({papa: '#papa',
lrcAr: geci,
lrc_css: 'filter:drop-shadow(#ffffff 0.5px 0 0)drop-shadow(#ffffff 0 0.5px 0)drop-shadow(#ffffff -0.5px 0 0) drop-shadow(#ffffff 0 -0.5px0); font:normal 2.5em 宋体; --bg: #ff0000;top:91%;left: 15%; color: #ff0000;',
fs_css: 'top: -6%; right: 0.5%;font:normal 0em 华文新魏; ',
player_css: `
bottom: 1.5%;left: 75%;
--discBg:url('https://img.fy6b.com/2023/10/04/eaa5ae3075d5d.png') no-repeat center/cover;
--discSize: 50px;
--hh: 50px;
`,
pinpu: {num: 100, size: 1, gap: 0.5, color1: '#ff0000', color2: '#ffcccc'},
});
};
})();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `《海岛冰轮初转腾》李胜素
海岛冰轮初转腾
见玉兔
玉兔又早东升
那冰轮离海岛
乾坤分外明
皓月当空
恰便似嫦娥离月宫
奴似嫦娥离月宫
`;
/*变量 ：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-10-4 23:58
美不胜收
{:4_190:} 焱鑫磊 发表于 2023-10-5 00:00
早啊 真美！ 欣赏欣赏 早上好 很好听的京剧选段，贵妃醉酒，这个视频也漂亮。欣赏焱鑫磊好帖{:4_199:} 头像按钮好看，还做了透明边框展示歌词，一键全控。给焱鑫磊点赞{:4_199:} 问好！欣赏学习了！{:4_187:} 我试了试！将全屏按钮位置移到帖子的外面，就可防止点击全屏按钮，（ fs_css: 'top: -6%; right: 0.5%;font:normal 0em 华文新魏; ',） 供你参考！ 这个背景视频真好看{:4_199:} 小文 发表于 2023-10-5 07:08
真美！
{:4_187:} 世外桃源 发表于 2023-10-5 08:28
欣赏欣赏
{:4_187:}{:4_187:}{:4_187:} 世外桃源 发表于 2023-10-5 08:29
早上好
{:4_204:} 红影 发表于 2023-10-5 09:31
很好听的京剧选段，贵妃醉酒，这个视频也漂亮。欣赏焱鑫磊好帖
{:4_190:} 红影 发表于 2023-10-5 09:35
头像按钮好看，还做了透明边框展示歌词，一键全控。给焱鑫磊点赞
{:4_176:} 亦是金 发表于 2023-10-5 12:21
问好！欣赏学习了！
{:4_176:} 亦是金 发表于 2023-10-5 12:29
我试了试！将全屏按钮位置移到帖子的外面，就可防止点击全屏按钮，（ fs_css: 'top: -6%; right: 0.5%;fo ...
照办，谢谢！{:4_187:} 小辣椒 发表于 2023-10-5 13:03
这个背景视频真好看
{:4_204:}
页:
[1]
2