完美歌词

亚伦影音工作室 发表于 2025-12-4 08:51

本帖最后由亚伦影音工作室于 2026-3-27 16:56 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#pa {
margin: 20px -300px;
width: 1182px ;
height: 620px;
border: 1px solid gray;
display: grid;overflow: hidden;
place-items: center;background: url(https://pic1.imgdb.cn/item/692e211611af9ce9c3e936f1.png) no-repeat center/cover;
position: relative;font-family: "Ma Shan Zheng","华文隶书","SimHei", "Arial", "sans-serif";
}
zxx-slide {display: block;
z-index: 1;
width: 100%; height:105%;
position: absolute;
}
.zxx-slide-a {width: 100%; height: 100%;
position: absolute;
display: none;
}
.zxx-slide-a.in {
z-index: 1;
}
.zxx-slide-img { position: absolute;
height:100%;width: 100%;
display: block;}

.zxx-slide-index-x {
position: absolute;
left: 0px;bottom: 0px;
text-align: center;
font-size: 0;
z-index: 1;
}

@keyframes seed {
0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100}
}
zxx-slide .in {
-webkit-mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
-webkit-mask-size: 50px;
mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
mask-size: 50px;
animation: seed 1s;
}

#player {position:absolute;top: 65%;z-index: 99;
         left: 45%;
width: 200px;
height: 200px;
display: grid;
place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#progressBar{width:50%;background:#55aa55;position: absolute;border-radius: 20px;cursor: pointer;top: 92%;z-index: 99;
         left: 30%;}
#playProgressBar{position: relative;left:0;background:ff0000;height:2px;width:100%;border-radius: 20px; cursor: pointer;}
.now {
   position: absolute;
   left: 0%;
   display: inline-block;
   height: 2px;border-radius: 20px;
   width: 100%; cursor: pointer;
   background: #ff0000;
}

.now::after {
   content: '';
   position: absolute;
   left: 100%;
   width: 12px;margin: -4px -2px;
   height: 12px;border-radius: 20px;
   background-color: #ff0000;
}
.start{color: #fff; font: 400 14px sans-serif;margin: -40px 0%;position: absolute;
   }
.end{color: #fff; font: 400 14px sans-serif;margin: -40px 0%;right:0px; position: absolute;}
#wrapper {
position: absolute;
padding: 10px;
font-weight:300;font-size:3.5em;
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
   width: 100%;left: 50%;transform: translateX(-50%);z-index: 12;text-align: center;
bottom: 380px;
}
.char {
display: inline-block;
padding: 0 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
}
audio { position: absolute; left: 160px; top: 20px; }
@keyframes fadeIn {
100% {
transform: translate(0, 0);
opacity: 1;
}

}
@keyframes flash {
100% {filter: hue-rotate(360deg);}

}
.stop .char{animation-play-state: paused;}
</style>

<div id="pa">
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/64/06/55/1173813b72075fc166c110ce893bdfe3/audio.mp3" loop autoplay></audio>
<zxx-slide>
<div class="zxx-slide-x">
   <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/692e211611af9ce9c3e936f1.png"></p>
   <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/6930d4a8d5fdcd03ca9d195b.png"></p>
   <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/692e224511af9ce9c3e936fa.png"></p>


</div>
</zxx-slide>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<divid="progressBar">
<spanclass="start"></span>

<divid="playProgressBar">

<spanclass="now"></span>

</div>
<spanclass="end"></span>
</div>

<div id="testImg" >
<div id="wrapper"></div>

</div>

</div>

<script>

const gc = ` 《与你走过的老路》

作词：许玲玲

作曲：许玲玲

演唱：许玲玲

LRC歌词编制：亚伦影音工作室

晚风漫过巷口吹过你的脸

影子跟着脚步叠了又几圈

你曾把我手攥在你掌心间

说这条路要走满岁岁年年

许多年后街景换了新容颜

可是你不在我的身边

想念总让我在深夜辗转难眠

是否我们今生注定无缘

想回到那条老路上和你慢慢走

再听你说那句“等我好久”

当风吹过落叶飘满肩头我才懂

原来最珍贵是你给的细水长流

许多年后街景换了新容颜

可是你不在我的身边

想念总让我在深夜辗转难眠

是否我们今生注定无缘

想回到那条老路上和你慢慢走

再听你说那句“等我好久”

当风吹过落叶飘满肩头我才懂

原来最珍贵是你给的细水长流

就算世界在变你仍是我的温柔`;

   const gcAr = lrc2HC(gc);
   let curkey = 0, isSeeking = false;

   aud.ontimeupdate = () => {
            if(curkey > gcAr.length - 1) return;
            if(aud.currentTime >= gcAr) {
                     const gap = gcAr?. ?? 0 - gcAr;
                     showLrc(gcAr, wrapper, gap);
            }
   };

   aud.onended = () => {
            curkey = 0;
            aud.play();
   }

   aud.onseeked = () => calcKey();

   function lrc2HC(text) {
            let lrcAr = [];
            let ar = text.trim().split('\n');
            ar.sort();
            let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
            ar.forEach(item => {
                     if(reg.test(item)) {
                           let result = item.match(reg);
                           let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                           lrcAr.push(.trim()]);
                     }
            });
            return lrcAr ? lrcAr : ;
   };

   function calcKey() {
            for (let j = 0; j < gcAr.length; j++) {
                     if (aud.currentTime <= gcAr) {
                           curkey = j - 1;
                           break;
                     }
            }
            if (curkey < 0) curkey = 0;
            if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
            let time = gcAr?. ?? 0 - gcAr;
            isSeeking = false;
            showLrc(gcAr, wrapper, time);
   }

   function showLrc(str, targetElm, time) {
            if(isSeeking) return;
            targetElm.innerHTML = '';
            const chars = str.split('').map(c => c === ' ' ? ' ' : c);
            const frg = document.createDocumentFragment();
            chars.forEach((char, idx) => {
                     const span = document.createElement('span');
                     span.innerHTML = char;
                     span.classList.add('char');
                     const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                     const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                     span.style.cssText += `
                           color: #${Math.random().toString(10).substring(2,8)};
                           --x: ${x}px;
                           --y: ${y}px;
                           --delay: ${Math.random() * 0.5}s;
                     `;
                     frg.appendChild(span);
            });
            targetElm.appendChild(frg);
            curkey ++;
            setTimeout(() =>isSeeking = false, time);
   }
</script>

<script>var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
var timerSlide = null;
var indexSlide = 0;
container.addEventListener('mouseover', function () {
clearTimeout(timerSlide);
});
container.addEventListener('mouseout', function () {
clearTimeout(timerSlide);
funSlide();
});

var eleSlides = [].slice.call(container.querySelectorAll('p'));
var eleButtons = [].slice.call(container.querySelectorAll('button'));

eleButtons.forEach(function (button, index) {
['mouseover', 'click'].forEach(function (eventType) {
button.addEventListener(eventType, function () {
clearTimeout(timerSlide);
indexSlide = index;
funSlide();
});
});
});

eleSlides.forEach(function (slide, index) {
slide.addEventListener('animationend', function () {
eleSlides.forEach(function (slide2) {
if (slide2.classList.contains('in') == false) {
slide2.style.display = '';
}
});
});
});

var funSlide = function() {
eleSlides.forEach(function (slide, index) {if(!aud.paused){
if (indexSlide == index) {
slide.classList.add('in');
slide.style.display = 'block';
} else if (slide.classList.contains('in')) {
slide.classList.remove('in');
}
}});
eleButtons.forEach(function (button, index) {
button.classList.remove('active');
if (indexSlide == index) {
button.classList.add('active');
}
});

timerSlide = setTimeout(function () {
indexSlide++;
if (indexSlide == eleSlides.length) {
indexSlide = 0;
}
funSlide();
}, 6000);
}

indexSlide++;

setTimeout(funSlide, 2000);
});

// Audiotimeupdate
aud.addEventListener("timeupdate",function(){

///
var percent= aud.currentTime / aud.duration

//,*,100%
var sp = 600 / 100 ;

//width
var swidth =(percent * 100 * sp) + "px";
console.log(percent*100,swidth)

//
document.getElementById("playProgressBar").style.width = swidth;
const now = document.querySelector('.now')//
progressBar.addEventListener('click', function (event) {
let coordStart = this.getBoundingClientRect().left
let coordEnd = event.pageX
now.style.width = p.toFixed(3) * 100 + '%'
})

progressBar.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / progressBar.offsetWidth; }//})
//2λС
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
})

//
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}`
}

aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)

console.dir(aud)
image=document.getElementById('testImg');

player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',image.classList.remove('stop')) :( aud.pause(),player.style.animationPlayState = 'paused',image.classList.add('stop'));
</script>

偶然~ 发表于 2025-12-4 09:12

来欣赏亚伦影音工作室精品佳作！

偶然~ 发表于 2025-12-4 09:13

音画唯美

偶然~ 发表于 2025-12-4 09:13

背景歌曲动听

偶然~ 发表于 2025-12-4 09:13

制作大气

偶然~ 发表于 2025-12-4 09:13

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2025-12-4 09:13

期待亚伦影音工作室佳作频出！

偶然~ 发表于 2025-12-4 09:14

愿亚伦影音工作室事事如意吉祥，幸福快乐绵长。

偶然~ 发表于 2025-12-4 09:14

感谢亚伦影音工作室支持花潮论坛，辛苦了，祝您和家人岁岁安康，幸福吉祥！

杨帆发表于 2025-12-4 13:17

漂亮~谢谢亚伦老师精彩分享，祝开心{:4_191:}

页: [1]

花潮论坛's Archiver

完美歌词