论坛 › 动画音画 › 孙艺琪-你是人间最美的景色(DJ默涵版)

亚伦影音工作室 发表于 2024-9-8 21:41

孙艺琪-你是人间最美的景色(DJ默涵版)

本帖最后由 亚伦影音工作室 于 2024-9-9 20:40 编辑 <br /><br /><style>
#papa { margin: 150px 0 20px calc(50% - 621px); background:#800 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/2cf99265f8799cfbe8fe54a7cdde10ca.mp4.jpg')no-repeat center/cover;width: 1164px; height: 600px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }

#mdiv {z-index: 10;
        --size: 160px;
        --color: teal;
        position: relative;
        left: calc(-20% - var(--size) / 2);
        top: 20px;
        width: var(--size);
        height: var(--size);
        display: grid;
        place-items: center;
        animation: rot 8s linear infinite ;
        cursor: pointer;
}
#mdiv::before, #mdiv::after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
        border-color: var(--color) transparent;
       
        border-radius: 100% 100% 100% 100%;
        filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }

#vid {z-index: 2;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask-image: radial-gradient(black 10% ,transparent 90%);
}
#vido {z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        }

#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="mdiv" title=""></div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://cccimg.com/view.php/a814e3dc5bec0d94b99d3ab9d9f50e98.mp3" autoplay loop></audio>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/70a9a1fd438f0bac7cd8060dfe27f068_preview.mp4" autoplay loop muted></video>
<video id="vido" src="https://video-qn.51miz.com/preview/video/00/00/16/53/V-165318-1D1F6794.mp4" autoplay loop muted></video>
</div>
<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play()):(aud.pause(),vid.pause(),vido.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };

</script>
<style type="text/css">
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 85%;transform: translate(-50%);font:normal 3em 华文新魏; font-weight:400;color: #000080;white-space: pre;-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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `孙艺琪-你是人间最美的景色(DJ默涵版)
作词：崔伟立
作曲：崔伟立
红尘中行人那么多
偏偏能和你擦肩而过
你是那爱情里珍珠在闪烁
时时刻刻温暖我心窝
陪你看春天的花朵
陪你去看冬日的雪落
微微的风儿脸庞轻轻吹过
看那幸福开花又结果
你是人间最美的景色
你是天上耀眼的星河
牵着你的手多少风雨走过
你是独一无二的选择
你是人间最美的景色
你是心上灿烂的烟火
天涯与海角不停流浪漂泊
你是一生唯一的执着
陪你看春天的花朵
陪你去看冬日的雪落
微微的风儿脸庞轻轻吹过
看那幸福开花又结果
你是人间最美的景色
你是天上耀眼的星河
牵着你的手多少风雨走过
你是独一无二的选择
你是人间最美的景色
你是心上灿烂的烟火
天涯与海角不停流浪漂泊
你是一生唯一的执着
你是人间最美的景色
你是天上耀眼的星河
牵着你的手多少风雨走过
你是独一无二的选择
你是人间最美的景色
你是心上灿烂的烟火
天涯与海角不停流浪漂泊
你是一生唯一的执着
`;
/*变量 ：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'),mdiv.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mdiv.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>

马黑黑 发表于 2024-9-8 21:47

美就一个字

彩云归 发表于 2024-9-9 06:52

{:4_199:}谢谢分享！

红影 发表于 2024-9-9 09:20

变色叶瓣播放器漂亮，两个视频也用得好看。
欣赏亚伦老师好帖{:4_199:}

查看完整版本: 孙艺琪-你是人间最美的景色(DJ默涵版)