焱鑫磊 发表于 2023-3-10 18:29

《我等的人会是谁》依桐

<style>
#papa {
      margin: 80px 0 0 calc(50% - 750px);
      width: 1397px;
      height: 751px;
      background: lightgreen url('https://7e.g74.net/uploads/xx/20230219/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: 65%;
      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://7e.g74.net/uploads/xx/20230219/1.jpg" alt="" />
      <audio id="aud" src="https://7e.g74.net/uploads/xx/20230219/wddrhss.mp3" loop autoplay></audio>
</div>

<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `
《我等的人会是谁》依桐
转小辣椒音画
TO：黑黑

我的故事也许比较特别
走过的路也许比较迂回
黑暗之中全凭着直觉
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>

巫荣云师 发表于 2023-3-10 20:20

欣赏收藏老师的 好看又好听，点赞！

焱鑫磊 发表于 2023-3-10 20:57

巫荣云师 发表于 2023-3-10 20:20
欣赏收藏老师的 好看又好听，点赞！

问候老师好！:handshake

蓝魔 发表于 2023-3-10 22:53

欣赏一下，谢谢。

焱鑫磊 发表于 2023-3-10 23:13

蓝魔 发表于 2023-3-10 22:53
欣赏一下，谢谢。

问候老师好！:handshake
页: [1]
查看完整版本: 《我等的人会是谁》依桐