我等的人会是谁

宁静发表于 2023-3-3 14:20

本帖最后由宁静于 2023-6-12 23:15 编辑 <br /><br /><style>
#papa {
   margin: 150px 0 0 calc(50% - 780px);
   width: 1397px;
   height: 751px;
   background: lightgreen url('https://wj.zp68.com/lxx/yunhua/2023/02/19/GIF.gif ') no-repeat center/cover;
   box-shadow: 3px 3px 20px #000;
   position: relative;
}
#mplayer {
   position: absolute;
   width: 160px;
   height: 160px;
   right: 200px;
   top: 60%;
   border-radius: 50%;
   cursor: pointer;
   animation: rot 8s linear infinite;
}
#lrc {
   --state: paused;
   --motion: cover2;
   --tt: 2s;
   --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .65));
   position: absolute;
   left: 70%;
   transform: translate(-50%);
   top: 95px;
   font: bold 2.6em sans-serif;
   color: snow;
   white-space: pre;
   -webkit-background-clip: text;
   filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
   position: absolute;
   content: attr(data-lrc);
   width: 20%;
   height: 100%;
   color: transparent;
   overflow: hidden;
   white-space: pre;
   background: var(--bg);
   filter: inherit;
   -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%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
   <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
   <img id="mplayer" src="https://wj.zp68.com/lxx/yunhua/2023/02/19/1.jpg" alt="" />
   <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/02/19/wddrhss.mp3" loop autoplay></audio>
</div>

<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `
我等的人会是谁
贺东篱雅苑四周岁华诞
祝福雅苑越办越好

我的故事也许比较特别
走过的路也许比较迂回
黑暗之中全凭着直觉
keep my faith watch my steps
一步步靠直觉
也许有天生命中会出现
那一个谁走进我的心里面
他不必是个mr perfect
只要他善良体贴
be my friend and be my soul mate
我等的人会是谁何时才出现
make me whole make me brave
我等的人会是谁不急在眼前
i can wait i will pray
Lrc编辑：宁静
也许有天生命中会出现
那一个谁走进我的心里面
他不必是个mr perfect
只要他善良体贴
be my friend and be my soul mate
我等的人会是谁何时才出现
make me whole make me brave
我等的人会是谁希望他了解
不管迷惘或坚决都是我的某一面
我并不追求完美
只要能用心体会每一天都是
better day
我等的人会是谁何时才出现
make me whole make me brave
我等的人会是谁何时才出现
陪着我一天一点让生命能变得更美
谢谢欣赏！
`;

/*变量：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());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

<br><br><br><br><br>

宁静发表于 2023-3-3 14:20

祝贺东篱雅苑四周年庆{:10_402:}

宁静发表于 2023-3-3 14:37

手机欣赏点击播放器----下面的小圆人物

沉默发表于 2023-3-3 14:54

反正不是我

沉默发表于 2023-3-3 14:55

宁静发表于 2023-3-3 14:37
手机欣赏点击播放器----下面的小圆人物

这个音乐流畅的，口哨音乐有点卡

蜻蜓发表于 2023-3-3 17:57

反正也不是我{:9005:}

一抹微蓝 发表于 2023-3-3 19:47

我来瞅瞅是谁，哈哈

撒哈拉的雨 发表于 2023-3-4 14:13

这个人物头像播放器新颖别致，好看

浅笑发表于 2023-3-5 21:39

也不是我{:9005:}

墨羽发表于 2023-3-5 22:02

咋就这么厉害，旋转的播放器按钮，朦胧的背景，她等的是谁呢~！{:9005:}

页: [1] 2

东篱雅苑's Archiver

我等的人会是谁