论坛 › 欢乐水吧 › 命中注定(男女对唱版) TO：亚纶 & 老谟

小辣椒 发表于 2025-5-4 20:28

命中注定(男女对唱版) TO：亚纶 & 老谟

<style>
#bj{position: relative;margin: 140px 0 20px calc(50% - 781px); width: 1400px;height:
792px;;overflow:hidden;background:url(https://wj.zp68.com/lxx/yunhua/2025/05/05/05.jpg)no-repeat center / cover;border-radius: 0px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #227700; --state:paused;}

#papa{position: absolute;width: 100%;height: 100%;MARGIN-LEFT:0px;margin-top:0px;background:url(https://wj.zp68.com/lxx/yunhua/2025/05/05/ku.jpg)no-repeat center / cover;}

#tu{position: absolute;top:5%; left:50%;
        width: 100%;
        height: 100%;animation: round 10s linear infinite var(--state); }
#tu img{width: 40%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);transform: rotateY(180deg);
        }

@keyframes round{
0% {
-webkit-transform:rotate(0deg)scale(3)translate(-100%,50%);
opacity:0}

30% {
-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);
opacity:1}
80% {
-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(3)translate(-20%,-50%);
opacity:0}
}

#tuu{position: absolute;top:4%; left:10%;
        width: 100%;
        height: 100%;animation: roud 10s linear infinite var(--state); }
#tuu img{width: 40%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
        }

@keyframes roud{
0% {
-webkit-transform:rotate(0)scale(3)translate(100%,-50%);
opacity:0}

30% {
-webkit-transform:rotate(0)scale(1)translate(40%,0%);
opacity:1}
80% {
-webkit-transform:rotate(0deg)scale(1)translate(40%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(3)translate(100%,50%);
opacity:0}
}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 70%;font:300 2.8em 华文隶书;color:#227700;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);z-index: 6;display: none;cursor: pointer;}
#geci::before{position: absolute;content: attr(data-geci);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); } }
#mplayer { position: absolute; text-align: center; top: 95%;transform: translate(-50%); left: 50%;z-index: 60;color:#ffffff;}
.hide{display: none;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 400px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {position: relative;width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state);margin: -90px 0px;border-radius: 50px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 4px #227700;}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#world,#zs,#bjqh{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 66%;
}

</style>

<style>
#dhgc{position:absolute;width: 540px;
    height: 450px;z-index: 6;
   border: 0px solid white;cursor: pointer;
    overflow: hidden;margin: 8% 10px;
}

.lrc {position:absolute;width: 100%;
    height: 100%;
   border: 0px solid white;
    margin: 0px 0px;
}

.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0}
.lrc #ul li {
font:300 1.2em 微软雅黑;
    color: #f7e309;
   
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;
    height: 50px;
    line-height: 35px;
}

.lrc #ulli.active{   font:450 1.6em 微软雅黑;
    color: #fff;
text-align: center; filter:drop-shadow(#000 1px 1px 0px);
}
</style>


<div id="bj">
<div id="papa"></div>
<div id="tu">
<img src="https://wj.zp68.com/lxx/yunhua/2025/05/05/n.png" alt="">
</div>
<div id="tuu">
<img src="https://wj.zp68.com/lxx/yunhua/2025/05/05/nan.png " alt="">
</div>
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://xlaj.cn/upfile/2025/04/12/ann.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
      <audio id="audio" src="https://aod.cos.tx.xmcdn.com/storages/4f2a-audiofreehighqps/F7/80/GAqh4zIL5vy0ACAAAAOjU5uR.m4a" loop autoplay></audio>
   <div id="geci"></div>
<div id="dhgc"><div class="lrc" >
      <ul id="ul">
      </ul>
    </div>
</div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
    <button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="world" onclick="btn3()"title="播放器模式">播放器隐藏</button>
<button id="bjqh" onclick="btn4()"title="背景模式">背景TWO</button>
<buttonid="zs"onclick="btnClick()"title="屏展模式" >屏展模式</button>
<div id="全屏"></div><div id="退出" ></div>
</div>
<script>
let lrc = `命中注定(男女对唱版)
歌手：基地小虎&俞子欣
词Lyricist：刘悠然
曲Composer：王元华
混音Mixing Engineer：卢晓武
和声Backing Vocal：俞子欣
出品人Publisher：王婷婷   
命中注定轮回中爱上你
生生不息痴痴缠绵意
茫茫人海里 一眼望见你
是缘是劫 我都认了命
转动经轮不为修来世
只为途中能与你相遇
纵使路崎岖 也不会舍弃
魂牵梦萦 只为找寻你
我放下天地 不曾有过放下你
为你倾尽所有的力气
踏过了荆棘走过了风雨
陪你一程我也愿意
我放下天地 不曾有过放下你
爱你的心无人可代替
永恒的眷恋 刻在灵魂里
生命有你才有了意义
LRC编辑：小辣椒
转动经轮不为修来世
只为途中能与你相遇
纵使路崎岖 也不会舍弃
魂牵梦萦 只为找寻你
我放下天地 不曾有过放下你
为你倾尽所有的力气
踏过了荆棘走过了风雨
陪你一程我也愿意
我放下天地 不曾有过放下你
爱你的心无人可代替
永恒的眷恋 刻在灵魂里
生命有你才有了意义
我放下天地 不曾有过放下你
为你倾尽所有的力气
踏过了荆棘走过了风雨
陪你一程我也愿意
我放下天地 不曾有过放下你
爱你的心无人可代替
永恒的眷恋 刻在灵魂里
生命有你才有了意义
谢谢欣赏

`;
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function 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));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (audio.currentTime - lrcAr);
      showLrc(time);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}

audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
var mseek = false;
var mState = () => audio.paused ?
( btnplay.style.setProperty('--state', 'paused'), bj.style.setProperty('--state', 'paused'),btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'),bj.style.setProperty('--state', 'running'),btnplay.title = '点击暂停' );

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;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());
</script>

<script>
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
    audio: document.querySelector("#audio"),
    ul: document.querySelector("#ul"),
    container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
    var lrcData = lrcArr.split(']');
    var lrcTime = lrcData.substring(1);
    var obj = {
      time: parseTime(lrcTime),
      word: lrcData
    }
    result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
    lrcTimeArr = lrcTime.split(":")
    return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
    let Time = doms.audio.currentTime;
    for (let i = 0; i < result.length; i++) {
      if (result.time > Time) {
            return i - 1;
      }
    }
}
// 创建歌词列表
function createElements() {
    let frag = document.createDocumentFragment(); // 文档片段
    for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
    let index = getIndex();
    // 计算滚动距离
    let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
    if (offset < minOffset) {
      offset = minOffset;
    };
    if (offset > maxOffset) {
      offset = maxOffset;
    };
    // 滚动
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 清除之前的active
    let li = doms.ul.querySelector(".active")
    if (li) {
      li.classList.remove("active");
    }
    // 为当前所唱到的歌词添加active
    li = doms.ul.children;
    if (li) {
      li.classList.add("active");
    }
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>


<script>
      function btn1() {
         document.getElementById('geci').style.display = 'block';
            document.getElementById('dhgc').style.display = 'none';
      }

      function btn2() {
         document.getElementById('geci').style.display = 'none';
            document.getElementById('dhgc').style.display = 'block';
      }

function btn3(){
                        var img=document.getElementById("mplayer");

                        if(document.getElementById("world").innerHTML=="播放器隐藏"){
                                mplayer.className="hide";
                                document.getElementById("world").innerHTML="显示播放器";
                        }else{
                                mplayer.className="";
                                document.getElementById("world").innerHTML="播放器隐藏";
                        }
                }

   function btn4(){
                        var img=document.getElementById("papa");

                        if(document.getElementById("bjqh").innerHTML=="背景TWO"){
                                papa.className="hide";
                                document.getElementById("bjqh").innerHTML="背景ONE";
                        }else{
                                papa.className="";
                                document.getElementById("bjqh").innerHTML="背景TWO";
                        }
                }

function btnClick() {
            var zs= document.getElementById("zs");
            if (this.isFullscreen()) {
            全屏.style.opacity= '1'; 退出.style.opacity = '0';
                zs.style.cursor="ne-resize";
                exitFullScreen();
            } else {
         全屏.style.opacity= '0'; 退出.style.opacity = '1';
            zs.style.cursor="se-resize";
zs.style.visibility='visible';
                        if (zs.requestFullscreen) {
               bj.requestFullscreen();
                } else if (zs.webkitRequestFullScreen) {
                   zs.webkitRequestFullScreen();
                } else if (zs.mozRequestFullScreen) {
                bj.mozRequestFullScreen();
                } else if ( zs.msRequestFullscreen) {
                  zs.msRequestFullscreen();
                }

            }
      }
      // 退出全屏
      function exitFullScreen() {
            let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
            if (exitFullScreen) {
                exitFullScreen.call(document);
            }
      }
      // 判断是否全屏
      function isFullscreen() {
            return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      }
        </script>

小辣椒 发表于 2025-5-4 20:32

@亚伦影音工作室
谢谢亚纶源码制作，小辣椒简单的用了一对人儿的图片效果，直接按老谟的代码套用了，谢谢二位一并致谢！@老谟深虑

樵歌 发表于 2025-5-4 20:36

越做越精致，总有新的他创意层出不穷！{:4_178:}

小辣椒 发表于 2025-5-4 20:38

樵歌 发表于 2025-5-4 20:36
越做越精致，总有新的他创意层出不穷！

樵哥哥晚上好，这个是前几天答应做一个的，昨天晚上赶出来的，背景图片做的简单了一点了

梦油 发表于 2025-5-4 20:46

祝老青年、小青年们节日快乐！

亚伦影音工作室 发表于 2025-5-4 20:50

选材很好，制作精良！

小辣椒 发表于 2025-5-4 20:51

梦油 发表于 2025-5-4 20:46
祝老青年、小青年们节日快乐！

梦油晚上好，今天五四青年节，是啊，老青年、小青年都要快乐！{:4_205:}

红影 发表于 2025-5-4 21:04

这个制作漂亮，有两个人儿的移动图，连两个背景上也有两个人的影子呢。这构思好{:4_199:}

红影 发表于 2025-5-4 21:05

这么功能的集合，觉得亚伦老师的这个代码特别好呢。
欣赏亲爱的精美制作{:4_199:}

梦江南 发表于 2025-5-5 08:35

很精美的制作，两个人分分合合，很有创意！{:4_187:}

老谟深虑 发表于 2025-5-5 11:10

            精彩的制作，背景图片制作的真好，欣赏学习了！

梦油 发表于 2025-5-5 13:11

小辣椒 发表于 2025-5-4 20:51
梦油晚上好，今天五四青年节，是啊，老青年、小青年都要快乐！

老青年越活越年轻。小青年越活越成熟。

小辣椒 发表于 2025-5-5 14:10

亚伦影音工作室 发表于 2025-5-4 20:50
选材很好，制作精良！

谢谢亚纶精彩的源码分享{:4_187:}

小辣椒 发表于 2025-5-5 14:11

红影 发表于 2025-5-4 21:04
这个制作漂亮，有两个人儿的移动图，连两个背景上也有两个人的影子呢。这构思好

亲爱的，只是偷懒，没有漂亮的图图就这样增加一点看点了

小辣椒 发表于 2025-5-5 14:12

红影 发表于 2025-5-4 21:05
这么功能的集合，觉得亚伦老师的这个代码特别好呢。
欣赏亲爱的精美制作

最近发现亚纶几个播放器代码我都很喜欢的，只是没有时间玩就先做一个，以后再抽空做一些

小辣椒 发表于 2025-5-5 14:13

梦江南 发表于 2025-5-5 08:35
很精美的制作，两个人分分合合，很有创意！

阿姨好，这个我是套用亚纶老师的代码

小辣椒 发表于 2025-5-5 14:15

老谟深虑 发表于 2025-5-5 11:10
精彩的制作，背景图片制作的真好，欣赏学习了！

问好老谟，谢谢你的，套用了你用一对人儿的代码，我是想速度完成这个帖，纯一对人儿没有亚纶的效果好，我就加了图图背景人物，增加一点看点而已。

红影 发表于 2025-5-5 20:45

小辣椒 发表于 2025-5-5 14:11
亲爱的，只是偷懒，没有漂亮的图图就这样增加一点看点了

这个设计很棒的，特别温馨{:4_187:}

红影 发表于 2025-5-5 20:45

小辣椒 发表于 2025-5-5 14:12
最近发现亚纶几个播放器代码我都很喜欢的，只是没有时间玩就先做一个，以后再抽空做一些

是啊，效果很赞的，很出彩{:4_187:}

小辣椒 发表于 2025-5-5 21:32

红影 发表于 2025-5-5 20:45
这个设计很棒的，特别温馨

这个比较方便，我求速度，就上去一对人儿，应该多对会效果比较好吧

查看完整版本: 命中注定(男女对唱版) TO：亚纶 & 老谟