论坛 › 动画音画 › 一首‘抄袭’的歌曲【又一年离别】旋律你知道

亚伦影音工作室 发表于 2026-3-11 11:06

一首‘抄袭’的歌曲【又一年离别】旋律你知道

本帖最后由 亚伦影音工作室 于 2026-3-11 13:45 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{
            position: relative;
            width: 1186px;
            height: 680px;
            margin-left: -300px;
            margin-top: 150px;
            overflow: hidden;z-index:12345;
            background: url(https://pic1.imgdb.cn/item/69b0d7af89a0c32ecc529b8f.jpg) no-repeat center / cover;
font-family: "Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif";--state:paused;
      }
      .intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background: url(https://pic1.imgdb.cn/item/69b0d7af89a0c32ecc529b8f.jpg), linear-gradient(125deg, #e56420, #c555aa, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 2s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
#bfq{ transform:scale(0.6);
   position: absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:0%;background:#0000;
   left: 60%;z-index: 20;--state:paused;}
#tmsg{position: absolute;width: 150px; height: 60px;font:400 18px sans-serif;color: #000;top:20px;left: 160px;}
#tu{   
      position:absolute;
      width: 300px;box-shadow:0px 0px 0px 1px #000,0px 0px 0px 0px #880000;
      height:300px;border-radius: 10px;
      top:10%;background:#000 url(https://pic1.imgdb.cn/item/69b0d7af89a0c32ecc529b8f.jpg) no-repeat center / cover;
   left: 2%;z-index: 2;}
#cp{   
      position:absolute;
      width: 260px;border-radius: 50%;
      height:260px;animation: rotating 6s infinite linear var(--state);
      top:15%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   transition: all 1s;
   left: 41%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
   @keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 260px;
height: 260px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 1px #fff;
background:#000 url(https://pic1.imgdb.cn/item/69b0d7af89a0c32ecc529b8f.jpg) no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
}
#bnt{margin: 240px 20px ; width: 30px; height: 30px;position: relative; cursor: pointer; }
#cndpt{position: absolute; width: 30px; height: 30px;
background:#000;transition: all 1s;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
opacity:0; background:#000;transition: all 1s;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(90deg, #e56420, #c22525, #000078, #00aa00, #ff0000);
position: absolute;z-index: 16;left: 50%; top: 86%;transform: translate(-50%);font-size: 3em;font-weight: 400;color:#000078;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); } }

#fullscreen{border-radius: 4px;position: absolute;
color:#000;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 18px;
border: none;
cursor: pointer;top: 5px;left: 3%;
}
</style>
   <divid="papa">
    <div id="fullscreen" title="屏展模式">全屏欣赏</div>
    <div id="bfq">
<div id="tu">
<div id="tmsg">00:00 | 00:00</div>
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
</div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class='intro'></div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="audio" src="https://s2.cldisk.com/sv-w9/audio/01/51/90/e5ca9b7b9ddb0736a158fccc59123120/audio.mp3" loop autoplay ></audio>

<script>
audio.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});
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 fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
   
const intro= document.querySelector('.intro');
letmState = () => audio.paused ?
( bfq.style.setProperty('--state', 'paused'),bnt.title = '点击播放',intro.style.animationPlayState = 'paused' ) :
( bfq.style.setProperty('--state', 'running'),bnt.title = '点击暂停',intro.style.animationPlayState = 'running' );
audio.onplaying = audio.onpause = () => mState();

bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',document.getElementById("cp").style.left = '41%') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',document.getElementById("cp").style.left = '15%');

(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 (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);
};

/**/
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 = () => audio.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/**/
audio.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('play', () => mState());
audio.addEventListener('seeked', () => calcKey());
let lrcAr = getLrcAr(lrcStr);
})();
</script>
   

杨帆 发表于 2026-3-11 12:24

好听好看，精致漂亮，谢谢亚伦老师精彩分享{:4_191:}

凤舞九天 发表于 2026-3-11 13:08

这个旋律太经典了，
这个嗓音也很经典{:5_116:}

梦油 发表于 2026-3-11 14:21

画面太美了。

朵拉 发表于 2026-3-11 14:30

好听 好看，向亚伦老师学习{:4_190:}

亦是金 发表于 2026-3-11 20:37

最美！谢谢分享！欣赏学习了！{:4_180:}

红影 发表于 2026-3-11 21:02

漂亮的变色音画，欣赏亚伦老师好帖{:4_187:}

查看完整版本: 一首‘抄袭’的歌曲【又一年离别】旋律你知道