论坛 › 欢乐水吧 › 学习亚伦老师代码音画《人生上半场》

老谟深虑 发表于 2024-2-5 14:40

学习亚伦老师代码音画《人生上半场》

本帖最后由 老谟深虑 于 2024-2-6 14:33 编辑 <br /><br />空格请问亚伦老师，这个代码音画为什么在离退休论坛发表就不显示同步歌词？谢谢！
<style>
#papa { margin: 0 0 0 calc(50% - 693px); width: 1164px; height: 640px; background: url('https://s11.ax1x.com/2024/02/01/pFMgPl6.jpg') no-repeat center/cover; box-shadow: 0px 0px 2px #ffffff; position: relative; z-index: 1; display: grid; overflow: hidden; place-items: center;}
#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: fly 650s linear infinite;
background: url('https://pic.imgdb.cn/item/65bf39ae871b83018ae69a2f.jpg')0 0/20% 20%;
        mix-blend-mode:lighten;
        opacity: 1;
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: tot 120s linear infinite;
background: url('https://pic.imgdb.cn/item/65bf39ae871b83018ae69a2f.jpg')0 0/20% 20%;
        mix-blend-mode:lighten;
        opacity: 1;
}

@keyframes fly {0%{opacity: 1;
      background-position: 0% 0;
    }
    100%{
      background-position: 600% 0%;
    }
}
@keyframes tot { 0%{
      background-position: 0% 600%;
    }
    100%{
      background-position: -600% 0%;
    }
}

#mplayer { position: absolute; bottom: 0; transform: rotate(5deg);transform-origin: bottom center;left: 150px; top: 530px;animation: ske 0.25sinfinite linear ;width: 100px; height: 100px;background:url('https://s11.ax1x.com/2024/01/23/pFepzX4.png ') no-repeat center/cover;z-index: 100; cursor: pointer;}
@keyframes ske { 50%{ transform: rotate(-5deg); }}

#mpip { position: absolute; bottom: 0; transform: rotate(1deg); transform-origin: 50% 50%;left: 720px; top: 290px;animation: ske 1sinfinite linear ;width: 200px; height: 200px;background:url('') no-repeat center/cover;z-index: 100; }
@keyframes ske { 50%{ transform: rotate(-1deg); }}

#lrc { --motion: cover2; --tt: 1s; --bg: #ff0000; position: absolute; top: 520px; font: bold 2.4em sans-serif; color:#000080; white-space: pre; -webkit-background-clip: text; pointer-events: none; z-index: 9; font:normal 3.5em 华文隶书;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; border-bottom: 10px dashed #880000; overflow: hidden; white-space: pre; background: var(--bg);background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0%; }to { width: 100%; } }
      @keyframes cover2 { from { width: 0%; }to { width: 100%; } }
</style>
<div id="papa">
<divid="mpic"></div>
<divid="mpicc"></div>
<divid="mpip"></div>
<span id="mplayer" title="播放/暂停"></span>
<div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
      <audio id="aud" src="https://www.qqmc.com/mp3/music335271228.mp3" autoplay loop></audio>
</div>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `人生上半场 - 赵洋
词：张俊英
曲：赵洋
编曲：可心文化娱乐工作室
混音：可心文化娱乐工作室
制作人：YALUN
监制：赵润泽
同步歌词编辑：老谟深虑
回想这些年受过的伤
眼泪情不自禁往下淌
为了生活天南地北闯
我已不再是当年模样
这些年经历太多沧桑
已经学会把心事隐藏
为了养家常在外飘荡
始终找不到停靠的港
不知不觉人生已过上半场
还能留得住多少的时光
许下的理想够不够喂养
是不是就这样匆匆收场
不知不觉人生已过上半场
多少梦想没有来日方长
脚下的路可不可以丈量
是不是就这样草草散场
这些年经历太多沧桑
已经学会把心事隐藏
为了养家常在外飘荡
始终找不到停靠的港
不知不觉人生已过上半场
还能留得住多少的时光
许下的理想够不够喂养
是不是就这样匆匆收场
不知不觉人生已过上半场
多少梦想没有来日方长
脚下的路可不可以丈量
是不是就这样草草散场
不知不觉人生已过上半场
还能留得住多少的时光
许下的理想够不够喂养
是不是就这样匆匆收场
不知不觉人生已过上半场
多少梦想没有来日方长
脚下的路可不可以丈量
是不是就这样草草散场
是不是就这样草草散场`;

/*变量 ：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));
};



/*函数 ：处理当前歌词索引 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 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;
};
/*函数 ：关键帧动画状态切换*/
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); /*获得歌词数组*/
})();
mplayer.addEventListener('click', () => {aud.paused ? (aud.play(),paused) :( aud.pause(),running);});
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpic.style.animationPlayState = 'paused');

mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpicc.style.animationPlayState = 'paused');

mpip.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpip.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpip.style.animationPlayState = 'paused');
</script>

红影 发表于 2024-2-5 15:04

画面漂亮。欣赏老谟深虑老师好帖{:4_187:}

红影 发表于 2024-2-5 15:05

亚伦的帖子里有气泡按钮用来暂停音乐，这个里面没有音乐按钮么？{:4_204:}

老谟深虑 发表于 2024-2-5 16:04

红影 发表于 2024-2-5 15:04
画面漂亮。欣赏老谟深虑老师好帖

         谢谢红影老师首席收看，下午好！

老谟深虑 发表于 2024-2-5 16:06

红影 发表于 2024-2-5 15:05
亚伦的帖子里有气泡按钮用来暂停音乐，这个里面没有音乐按钮么？

          那个气泡按钮我删除了，点画面就可以暂停。

小辣椒 发表于 2024-2-5 17:03

欣赏老谟深虑老师的精彩制作{:4_187:}

小辣椒 发表于 2024-2-5 17:03

亚伦的代码帖就是漂亮{:4_177:}

亦是金 发表于 2024-2-5 17:52

本帖最后由 亦是金 于 2024-2-5 18:26 编辑

我试了试，鼠标滑过画面，没有指针出现。只有在美女鼻子附近处才有指针出现，点击才能播放歌曲！{:4_198:}

老谟深虑 发表于 2024-2-5 18:01

本帖最后由 老谟深虑 于 2024-2-5 18:10 编辑

亦是金 发表于 2024-2-5 17:52
我试了试，鼠标滑过画面，没有指针出现。要点击美女鼻子附近处才能播放歌曲！
          谢谢老师的指教，我把按钮删除了，所以无法暂停了。我又加了一个按钮。

老谟深虑 发表于 2024-2-5 18:09

小辣椒 发表于 2024-2-5 17:03
欣赏老谟深虑老师的精彩制作

         谢谢老师的支持，晚上好！

樵歌 发表于 2024-2-5 18:40

欣赏精彩视频{:4_199:}

红影 发表于 2024-2-5 20:56

老谟深虑 发表于 2024-2-5 16:04
谢谢红影老师首席收看，下午好！

客气呢，这个帖子很漂亮{:4_187:}

红影 发表于 2024-2-5 20:57

老谟深虑 发表于 2024-2-5 16:06
那个气泡按钮我删除了，点画面就可以暂停。

我点画面不行呢，看到您把按钮又加上了{:4_173:}

查看完整版本: 学习亚伦老师代码音画《人生上半场》