论坛 › 欢乐水吧 › 爱我就别想太多(DJ何鹏版) - 郭玲

亚伦影音工作室 发表于 2025-3-1 06:43

爱我就别想太多(DJ何鹏版) - 郭玲

本帖最后由 亚伦影音工作室 于 2025-3-2 08:01 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 680px); background:url('https://file.uhsea.com/2502/96f23c8e4e3bde0f279f91bc4f542fefHG.gif') no-repeat center/cover;width: 1186px; height: 680px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; --showbackface: visible;}
#dt{
      position:absolute;z-index: 2;
      width: 100%;
      height: 100%;mix-blend-mode: lighten;
      top:0%;
   left: 0%;    }
#dt img{width: 100%;
      height: 100%;
    }

#vid {width: 100%; height: 100%; z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#mb{width: 100%; height: 100%;z-index: 2;
position:absolute;background: linear-gradient(0deg, #03305D 6%,#Fff 6.5%,rgba(26, 188, 156, 0) 5%);
top:100%; left:0%;opacity:1;}
      #mboard {width:100%;height:200px;display: flex; justify-content: center; align-items:center;gap: 8px; position: absolute; bottom: -140px;right: 20px; z-index: 3;opacity:1;}

#papa:hover #mboard{opacity:1;bottom: -80px;}
#papa:hover #mb{opacity:1;top:0%;}

      #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: 100px; height: 80px;place-items: center;border-radius: 20px;transform:rotate(-90deg);right: -14px;bottom: 130px;}
      input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
input::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
input::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:#039C09;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient( #039C09, #039C09) 0 fill / 4 11 4 0 / 0px 0px 0 2000px;
}

#volwrap:hover #volume { opacity:1;}
      #btnMute:hover ~ #volwrap > #volume {opacity:1; }
#volume { position: absolute; width: 100px; height: 2px;opacity:0;}
      #prog { --track:#eee; --prog:#039C09 ; --prg: 0%; width: 78%; 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;align-items: center;}

#loopbnt{   z-index: 91;
      position:absolute;
      width: 25px;
      height: 20px;
      bottom: 92px;border-radius: 0px;
   right:0%;filter:invert(0%)hue-rotate(180deg);
      cursor: pointer;
    }
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 640px; cursor: pointer;right: 45px;z-index: 40;filter:invert(0%)hue-rotate(180deg);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 16;left: 50%; top: 84%;transform: translate(-50%);font:400 3.5em/1em 华文行楷;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>
<div id="papa">
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif"id="IMG" />
</div>

<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5316da4cec4c963506d54c6b9ec46392_preview.mp4" autoplay loop muted></video>
<div id="mb"> </div>
<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>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
   
</div>

<div data-lrc="" id="lrc"></div>
<div id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1932604902.mp3" autoplay ></audio>

<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;
}
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
btnPlay.onclick = () => aud.paused ? (aud.play(),vid.play(),image.play() ): (aud.pause(),vid.pause(),image.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++/-)'

let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
</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>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `爱我就别想太多(DJ何鹏版) - 郭玲
作词：李小红
作曲：何鹏
演唱：郭玲
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
出品 亚伦影音工作室
看着你黯然失色
手中玫瑰在滑落
千言和万语对你说
好像说什么都是错
风吹痛满天云朵
像你猜测我难过
跳进了黄河难解脱
唱首情歌送你亲爱的
爱我就别想太多
付出真心谁舍得
爱情美酒陪你喝
红尘路上相互依托
爱我就别想太多
永远把你放心窝
一生只爱你一个
牵手共食人间烟火
(Music)
风吹痛满天云朵
像你猜测我难过
跳进了黄河难解脱
唱首情歌送你亲爱的
爱我就别想太多
付出真心谁舍得
爱情美酒陪你喝
红尘路上相互依托
爱我就别想太多
永远把你放心窝
一生只爱你一个
牵手共食人间烟火
爱我就别想太多
付出真心谁舍得
爱情美酒陪你喝
红尘路上相互依托
爱我就别想太多
永远把你放心窝
一生只爱你一个
牵手共食人间烟火
(Music)
☆★谢谢欣赏★☆
=亚伦影音工作室=
`;
/*变量 ：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>

红影 发表于 2025-3-1 08:29

这场景真美。欣赏亚伦老师好帖{:4_187:}

红影 发表于 2025-3-1 08:30

好像全屏按钮点了没反应？看代码好像有歌词的？

亚伦影音工作室 发表于 2025-3-1 11:55

红影 发表于 2025-3-1 08:30
好像全屏按钮点了没反应？看代码好像有歌词的？

代码有误有时间再改吧！

红影 发表于 2025-3-1 17:23

亚伦影音工作室 发表于 2025-3-1 11:55
代码有误有时间再改吧！

好的{:4_204:}

查看完整版本: 爱我就别想太多(DJ何鹏版) - 郭玲