论坛 › 欢乐水吧 › 西海情歌 - 降央卓玛

亚伦影音工作室 发表于 2024-12-26 19:07

西海情歌 - 降央卓玛

本帖最后由 亚伦影音工作室 于 2024-12-26 19:07 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
        width: 1286px;
        height: 720px;
        background:#000;
position: relative;overflow: hidden;
        z-index: 12345;}

#cndpt{margin: 150px 410px ; z-index: 10;mix-blend-mode: lighten;cursor: pointer;
   position:relative;width: 740px; height: 460px;transform: rotatez(20deg)rotateX(0deg);
    background: url(https://pic.imgdb.cn/item/676cc476d0e0a243d4ea71ce.gif)no-repeat center/100% 100%; }
#enopg{
    position: relative;width: 740px; height: 460px;
   background: url(https://pic.imgdb.cn/item/676cc2fcd0e0a243d4ea70e3.png) no-repeat center/100% 100%;
    display:none;
}


#vid1{width: 60%; height: 60%;z-index: 1;
position:absolute;
top:15%; left:8%;
object-fit: cover; pointer-events: none;
}
.vid{width: 60%; height: 60%;z-index: 2;
position:absolute;
top:15%; left:8%;
border-radius: 20px;border: 2px solid #000;
opacity: 0;object-fit: cover; pointer-events: none;
animation: round 100s linear infinite ;}
@keyframes round {0% {opacity: 0;}
4% {
opacity: 1;}
10% {
opacity: 1;}
15% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}

.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6),
.stop .vid:nth-child(7),
.stop .vid:nth-child(8),
.stop .vid:nth-child(9),
.stop .vid:nth-child(10){animation-play-state: paused;}
#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: #880000;
      position: absolute;z-index: 6;
      left: 40%;
      transform: translate(-50%);
      top: 60%;
      font:normal 3em 华文新魏;
color: #000;
      
      -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: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
-webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style>
<div id="papa">
<div id="cndpt">
<div id="enopg" ></div>
</div>

<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/13/73/V-137379-ED6D74D3.mp4" loop muted autoplay=""></video>

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/21/V-642144-D5E8D07B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/14/71/V-147117-32B4CEF3.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/19/V-641906-C15A6FE2.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/04/V-640493-88502DD5.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/22/V-642242-676CD49F.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/13/V-641347-C500102B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/17/39/V-173954-7FEE64E3.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/17/V-641787-0EE5A51F.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/15/53/V-155306-C6C67A1F.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/17/53/V-175304-FCADEF3A.mp4" loop muted autoplay=""></video>
</div>
<div data-lrc="西海情歌" id="lrc">西海情歌</div>
</div>
<audio id="aud" src="https://bbs.cnzv.cc/mp3.php/3509-1735207331.mp3" autoplay loop></audio>
<script >

(function() {
      const vids = document.querySelectorAll('.vid');
      var mState = () => {
         vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
      };
      aud.onplaying = aud.onpause = () => mState();
      })();
varimgElement= document.getElementById('enopg');
cndpt.onclick = () => {aud.paused ? (aud.play(),imgElement .style.display = 'none',vid1.play()) : (aud.pause(),imgElement.style.display = 'block',vid1.pause())};
</script >
<script >
var image = document.getElementById("testImg");
let mState = () => aud.paused ? image.classList.add('stop'):image.classList.remove('stop');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</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')) : (lrc.style.setProperty('--state','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-12-26 19:46

西海情歌好听，谢谢亚伦老师分享{:4_191:}

梦油 发表于 2024-12-26 19:51

欣赏精彩，问候亚伦。

红影 发表于 2024-12-26 19:58

这些视频组合设置得漂亮。还以为播放机也是视频，原来是动图{:4_199:}

红影 发表于 2024-12-26 19:59

这个制作效果真好，好像在看电视一样。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-12-26 20:00

这个需要找寻相似的视频，还需要对版面排布设计，真不容易{:4_187:}

世外桃源 发表于 2024-12-26 20:53

欣赏欣赏

世外桃源 发表于 2024-12-26 20:54

感谢佳作分享

查看完整版本: 西海情歌 - 降央卓玛