论坛 › 欢乐水吧 › 我们都老了-马健涛【独家动画】

亚伦影音工作室 发表于 2025-4-23 19:13

我们都老了-马健涛【独家动画】

本帖最后由 亚伦影音工作室 于 2025-4-23 19:13 编辑 <br /><br /><style>
      #bj {
            position: relative;
            width: 1286px;
            height: 720px;
            margin: 140px -300px;
            overflow: hidden;
            background:#000 url('https://pic1.imgdb.cn/item/6808725558cb8da5c8c46fb3.jpg') no-repeat center / cover;
      }
#dt{mix-blend-mode:overlay;
      position:absolute;
      width: 100%;
      height: 100%;
      top:0%;
   left: 0%;    }
#dt img{width: 100%;
      height: 100%;
    }

.lrc {
            position: absolute;
            top: 24%;
            left: 45%;
         
            width: 540px;
            height: 350px;
            overflow: hidden;
filter:drop-shadow(#000 0.8px 0 0)drop-shadow(#000 0 0.8px 0)drop-shadow(#000 -0.8px 0 0) drop-shadow(#000 0 -0.8px0);
      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
            font-size: 22px;
            color: #ccc;
            font-weight: 400;
            transition: .3s all ease;
         list-style-type: none;
    text-align: center;
       display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
             margin: 0 auto;
            cursor: pointer;
      }

      .lrc #ul li.active {
         font-size: 28px;
            color: #EE7700;
            font-weight: 990;
             text-align: center;
            
      }
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 86%;font:300 3.2em 华文隶书;color:#000;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 0.8px 0 0)drop-shadow(#fff 0 0.8px 0)drop-shadow(#fff -0.8px 0 0) drop-shadow(#fff 0 -0.8px0);z-index: 6;display: none;}
#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); } }
.hide{display: none;}
#pa{margin: 520px 85%;position:absolute;width: 200px; height: 150px; overflow: hidden;transform:rotate(0deg)scale(0.6);z-index: 60;}
#bnt{ left:85px;top: 40%;z-index: 6;
position: absolute; cursor: pointer;}
#cndpt{position: absolute; width: 100%; height: 100%;display:block;
align-items: center; }
#enopg{ position: absolute;width: 100%; height: 100%; display:none;
align-items: center; }
.start{color: #fff;position: absolute; top:68px; left: 42px;}
.end{color: #fff;position: absolute;top:68px; right: 42px;}
#prog {position: absolute; display: grid; place-items: center; width: 140px; height: 140px; right: 32px; bottom: 5px;border-radius: 50%;-webkit-mask: radial-gradient( transparent 63%, #000 66%, #000 0);cursor: pointer; z-index: 5;}

.klokgcbtn, .dhgcbtn,#pabtn{border-radius: 4px;position: relative;
color:#000;background:#0000;box-shadow:0px 0px 0px 1px #000;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 70%;
}
    </style>

    <div id="bj">
<div id="dt">
<img src="https://pic1.imgdb.cn/item/68087f2658cb8da5c8c4b828.gif"id="IMG" />
</div>

<button class="klokgcbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
    <button class="dhgcbtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="pabtn" onclick="btn3()"title="播放器模式">bfq隐藏</button>
<div id="dhgc"><div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>
       <div id="geci"></div>
      <div id="pa">
<span class="end">00:00</span><div id="bnt">
<div id="cndpt" > <svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" />
    </svg></div>
<div id="enopg"><svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M18 12L0 24V0" />
    </svg></div>
</div>
<span class="start">00:00</span>
<div id="prog" title="播放进度条"></div>
</div>

    </div>
    <audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w7/audio/4f/0b/4f/ea2af65a95ce1eb4c3ad12ef8ff78bfa/audio.mp3" loop autoplay ></audio>
    <script>
      let lrc = `我们都老了
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：亚伦影音
我在细心帮你盘头发
岁月让你青丝变白发
镜子里的我们都老了
这些年让你受累了
自从牵了你的手
誓言要爱你到永久
匆匆忙忙的秋后
结婚证拿到手
你的青春与美貌
被时光偷偷带走
我也沧桑了许多
这些年欠你的太多太多
时光时光请你慢些走
我爱的人还没有爱够
你陪我吃苦的这些年
从来没一句抱怨
我在细心帮你盘头发
岁月让你青丝变白发
镜子里的我们都老了
这些年让你受累了
你的青春与美貌
被时光偷偷带走
我也沧桑了许多
这些年欠你的太多太多
时光时光请你慢些走
我爱的人还没有爱够
你陪我吃苦的这些年
从来没一句抱怨
我在细心帮你盘头发
岁月让你青丝变白发
镜子里的我们都老了
这些年让你受累了
时光时光请你慢些走
我爱的人还没有爱够
你陪我吃苦的这些年
从来没一句抱怨
我在细心帮你盘头发
岁月让你青丝变白发
镜子里的我们都老了
这些年让你受累了
`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
            

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1263fc=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            ul.children?.classList.add('active');

            const currentLyric = result.word.trim();
            if (!currentLyric) return;
            const nextTime = result?.time || audio.duration;
            const duration = nextTime - result.time;
            const charIndex = duration > 0 ?
                Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
                currentLyric.length;
}

      let rafId;
      audio.addEventListener("timeupdate", () => {
            rafId = requestAnimationFrame(setOffset);
      });
</script>
<script>
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 >
bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.display= 'none',cndpt.style.display= 'block',image.play() ): (audio.pause(),enopg.style.display= 'block',cndpt.style.display='none',image.stop());
var marquee= document.getElementById('marquee');
const start = document.querySelector('.start')
   const end= document.querySelector('.end')
function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

audio.onloadedmetadata = function () {
    end.innerHTML = conversion(audio.duration)
    start.innerHTML = conversion(audio.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(audio.currentTime)
   
}, 1000)

prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                audio.currentTime = audio.duration * deg / 360;
                }
audio.addEventListener('timeupdate', () => {
               audio.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg, red, red, red ' + audio.currentTime / audio.duration * 100 + '%, #fff 0)';});
                });

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("pa");

                        if(document.getElementById("pabtn").innerHTML=="bfq隐藏"){
                                pa.className="hide";
                                document.getElementById("pabtn").innerHTML="显示bfq";
                        }else{
                                pa.className="";
                                document.getElementById("pabtn").innerHTML="bfq隐藏";
                        }
                }

</script >
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      //
      var width = this.width, height = this.height;
      if (width && height) {
            // 洢
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvasС
            canvas.width = width;
            canvas.height = height;
            //
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            //
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                //
                this.removeAttribute('src');
                // canvas
                canvas.style.position = 'absolute';
                //
                this.parentElement.insertBefore(canvas, this);
                //
                this.style.opacity = '0';
                // 洢canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image= document.getElementById("IMG");

</script>

红影 发表于 2025-4-23 21:47

这个没有换地图的选项了。还有歌词的不同表现方式。
漂亮的制作，好听的歌儿。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-4-23 21:48

这个居中上还差了点。完全居中就好了。{:4_204:}

杨帆 发表于 2025-4-23 22:53

本帖最后由 杨帆 于 2025-4-23 22:55 编辑

独具匠心，独树一帜，独有特色，恭喜亚伦老师屡创新高{:4_191:}

老谟深虑 发表于 2025-4-24 10:19

         欣赏老师的新代码，学习了！

查看完整版本: 我们都老了-马健涛【独家动画】