论坛 › 欢乐水吧 › 错过了那个爱我的人 (DJ何鹏版) - 南宫嘉骏

亚伦影音工作室 发表于 2025-4-14 23:47

错过了那个爱我的人 (DJ何鹏版) - 南宫嘉骏

本帖最后由 亚伦影音工作室 于 2025-10-1 13:32 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 720px); background:url(https://pic1.imgdb.cn/item/68731d9b58cb8da5c8a6128f.jpg) no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative;--state: running; }
#dt{
      position:absolute;
      width: 100%;
      height: 100%;
      top:0%;
   left: 0%;    }
#dt img{width: 100%;
      height: 100%;
    }

#dta{
      position:absolute;
      width: 100%;
      height: 100%;
      top:0%;
   left: 0%;display: none;}
#dta img{width: 100%;
      height: 100%;
    }

#dhgc{position:absolute;width:100%;
    height: 80px;z-index: 6;top: 80%;
   border: 0px solid white;cursor: pointer;
    overflow: hidden;margin: 0 0px;
}
    .lrc { position: absolute; width:100%; height:100%;margin: 0px 0px; color: #000;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
    .lrc #ul { width: 100%;list-style: none; margin: 0; display: flex; flex-direction: column; align-items: center; }
    .lrc #ul li {font:300 3em 华文隶书;list-style-type: none; text-align: center; padding: 0 10px; height: 80px; line-height: 80px; cursor: pointer; }
   .lrc #ul li span { margin: 0px 6px; }
    .lrc #ul li span.active {color:#ff0000; margin: 0px 0px;font:300 1.5em 华文隶书;}

#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 80%;font:300 3em 华文隶书;color:#000;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;cursor: pointer;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); } }

#bfq{height: 40px; width:96%; position:absolute;left: 2%; top: 92%;overflow: hidden; background:url('https://pic1.imgdb.cn/item/66c40607d9c307b7e912340a.png') no-repeat center/cover; border-radius: 6px;box-shadow: 0px 0px 0px 0.25px #fff;}


        #mboard { height: 40px; width:100%;justify-content: center; align-items: center; gap: 8px; position: absolute;display: flex;left: -5%;}
        #mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
        #tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;color: #eee; }
        #volwrap { position: absolute; width: 120px; height: 40px; right: -40px; display: grid; place-items: center; background: none; border-radius: 20px; }
        input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 4 11 4 0 / 0px 0px 0 2000px;
}

        #btnMute:hover ~ #volwrap ;
        #volume { position: absolute; width: 40px; height: 2px;display: none; }
        #prog { --track:#eee; --prog: #ff0000; --prg: 0%; width: 900px; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; border-radius: 20px;}
.playbtn, .pausebtn, .dtbtn, .dttbtn{border-radius: 4px;position: relative;
color:#fff;background:#000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 30px 2px;left: 3%;
}
</style>
<div id="papa">
<div id="dt">
<img src="https://upfile.mp3.wf/view.php/ada5d0baf47a80da32be15b52a840968.gif"id="IMG" />
</div>

<div id="dta">
<img src="https://pic1.imgdb.cn/item/67fdf5c388c538a9b5d15ab9.gif"id="IMGA" />
</div>
<p>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
<button class="pausebtn" onclick="btn2()"title="逐字歌词模式">逐字歌词</button>
<button class="dtbtn" onclick="btn3()"title="切换背景">切换背景</button>
<button class="dttbtn" onclick="btn4()"title="切换背景">复原背景</button>
</p>
<div id="geci"></div>
<div id="dhgc">
<div class="lrc">
    <ul id="ul"></ul>
      </div>
</div>

<div id="bfq">
<div id="mboard">
        <img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
        <span id="tMsg1">00:00</span>
        <span id="prog"></span>
        <span id="tMsg2">00:00</span>
        <img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
        <div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
</div>
</div>
</div>
<p><audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/89/d7/03/b085480e01cdba5105e42528b04d1e4c/audio.mp3" autoplay loop></audio></p>

<script>
       
var lastVolume = 1, muted = false;

var imgAr = [
        'https://638183.freep.cn/638183/web/icon/play.svg',
        'https://638183.freep.cn/638183/web/icon/pause.svg',
        'https://638183.freep.cn/638183/web/icon/unmuted.svg',
        'https://638183.freep.cn/638183/web/icon/muted.svg',
];

var setVolume = (val) => Math.min(1, Math.max(0, val));

var setMute = () => {
        if(lastVolume === 0) return;
        muted = !muted;
        muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};

var s2m = (seconds) => {
    const secs = Math.floor(seconds || 0);
    return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};

var mState = () => {
        btnPlay.src = aud.paused ? imgAr : imgAr;
        btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};

document.addEventListener('keydown', e => {
        if(!e.altKey) return;
        switch (e.keyCode) {
                case 88:
                        btnPlay.click();
                        break;
                case 74:
                        setMute();
                        break;
                case 187: case 107:
                        aud.volume = setVolume(aud.volume + 0.1);
                        lastVolume = aud.volume;
                        break;
                case 189: case 109:
                        aud.volume = setVolume(aud.volume - 0.1);
                        lastVolume = aud.volume;
                        break;
                default:
                        return;
        }
});

aud.onplaying = aud.onpause = () => mState();

aud.ontimeupdate = () => {
        prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
        tMsg1.innerText = s2m(aud.currentTime);
        tMsg2.innerText = s2m(aud.duration);
};

aud.onvolumechange = () => {
        btnMute.src = aud.volume === 0 ? imgAr : imgAr;
        volume.value = aud.volume;
}

btnPlay.onclick = () => aud.paused ? (aud.play(),image.play() ,imagee.play()): (aud.pause(),image.stop(),imagee.stop());
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)';
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() {
         document.getElementById('dt').style.display = 'none';
            document.getElementById('dta').style.display = 'block';
      }
function btn4() {
         document.getElementById('dt').style.display = 'block';
            document.getElementById('dta').style.display = 'none';
      }

</script>

<script>
let lrc = `错过了那个爱我的人 (DJ何鹏版) - 南宫嘉骏
词：汪立生
曲：笑天
录音：郑浩
混音：苏州
分开后才懂回忆多残忍
往事分分秒秒将我囚困
也想一了百了斩断爱恨
却始终忘不了你的吻
漫漫长夜想念开始沸腾
思绪调回到从前的我们
曾经炙热的爱逐渐冰冷
幸福转身只剩下余温
错过了那个爱我的人
从此人海里孤单地沉沦
邂逅过魅力也心痛认真
到了最后还是有缘无分
错过了那个爱我的人
多年后想起心还是会疼
编织的美梦破碎后无痕
只有眼泪陪我孑然一身
亚伦影音工作室
— — — —
分开后才懂回忆多残忍
往事分分秒秒将我囚困
也想一了百了斩断爱恨
却始终忘不了你的吻
漫漫长夜想念开始沸腾
思绪调回到从前的我们
曾经炙热的爱逐渐冰冷
幸福转身只剩下余温
错过了那个爱我的人
从此人海里孤单地沉沦
邂逅过魅力也心痛认真
到了最后还是有缘无分
错过了那个爱我的人
多年后想起心还是会疼
编织的美梦破碎后无痕
只有眼泪陪我孑然一身
错过了那个爱我的人
从此人海里孤单地沉沦
邂逅过魅力也心痛认真
到了最后还是有缘无分
错过了那个爱我的人
多年后想起心还是会疼
编织的美梦破碎后无痕
只有眼泪陪我孑然一身
编织的美梦破碎后无痕
只有眼泪陪我孑然一身
`;
let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud"),
            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 words = lrcData.trim().split('');
            let lineWords = [];
            let startTime = parseTime(lrcTime);
            let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
                (parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
            words.forEach((word, index) => {
                lineWords.push({ time: startTime + index * wordDuration, text: word });
            });
            result.push(lineWords);
      }

      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 __Ox1264a5=["\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","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\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 _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
      createElements();

      let containerHeight = container.clientHeight;
      let liHeight = 80;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;
      const visibleLines = 1;
      let prevIndex = -1;

      function setOffset() {
            let index = getIndex();
            if (index === -1) index = 0;

            let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
            ul.style.transform = `translateY(-${offset}px)`;

            if (prevIndex !== -1) {
                let prevLi = ul.children;
                if (prevLi) {
                  prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
                  prevLi.classList.remove('active');
                }
            }
            let currentLi = ul.children;
            if (currentLi) currentLi.classList.add('active');

            let currentTime = audio.currentTime;
            let currentLine = result;
            if (currentLine) {
                currentLine.forEach((wordObj, wordIndex) => {
                  let span = currentLi.children;
                  if (currentTime >= wordObj.time &&
                        (wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
                        span.classList.add('active');
                  } else {
                        span.classList.remove('active');
                  }
                });
                const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
                if (!currentLyric) return;
               
                let charIndex = 0;
                for (let j = 0; j < currentLine.length; j++) {
                  if (currentLine.time <= currentTime) {
                        charIndex = j + 1;
                  }
                }
            
            }
prevIndex = index;
      }
aud.addEventListener("timeupdate", setOffset);

</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 = '';   imagee.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");
var imagee= document.getElementById("IMGA");
</script>


<script>
aud.addEventListener("seeked", myFunction)
aud.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 - (aud.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;
                }
      }
}

aud.addEventListener('play', playing,false);
aud.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>

梦油 发表于 2025-4-15 09:18

欣赏佳作，问候亚伦。

幸运草 发表于 2025-4-15 10:45

真好看吖{:4_187:}

红影 发表于 2025-4-15 19:44

这个还能换背景和歌词方式，而且逐字很准确呢。
欣赏亚伦老师好帖{:4_199:}

寻梦花园 发表于 2025-4-16 12:11

红影 发表于 2025-4-15 19:44
这个还能换背景和歌词方式，而且逐字很准确呢。
欣赏亚伦老师好帖

逐字歌词准确不准确都是模拟原歌词必须准确

红影 发表于 2025-4-16 20:34

寻梦花园 发表于 2025-4-16 12:11
逐字歌词准确不准确都是模拟原歌词必须准确

做到准确还是挺难的呢。

老谟深虑 发表于 2025-4-18 15:04

         有一个新代码，很不错。点赞！

亚伦影音工作室 发表于 2025-4-18 17:35

寻梦花园 发表于 2025-4-16 12:11
逐字歌词准确不准确都是模拟原歌词必须准确

这个是偷老师你的，我只知皮毛。欢迎你来到花潮！

查看完整版本: 错过了那个爱我的人 (DJ何鹏版) - 南宫嘉骏