童年老家

亚伦影音工作室 发表于 2025-7-13 14:04

本帖最后由亚伦影音工作室于 2025-7-13 17:34 编辑 <br /><br /><style>
#papa { margin: 10px -300px; width: 1186px;height: 620px;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative;}
.inmg{width:100%; height: 620px; position:absolute; TOP:0%;LEFT: 0%;}
.start{color: #fff;position: absolute; top:84%; left: 22%;}
.end{color: #fff;position: absolute;top:84%; left: 33%;}
#btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 27%; top: 82%;position: absolute;z-index: 20;}

.lrc { z-index: 21; position: absolute; top: 20%; left: 41%; width: 740px; height: 350px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #fff; font: 300 20px 'YouYuan', sans-serif; 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 { transform: scale(1.2); color: #00FFaa; font-weight: 650; }
</style>
<div id="papa">
<div>
<marqueeid="m" behavior="alternate"scrollamount="5"height=620>
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f34fec3fc5819925c7a613aa3ca95be3.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f34fec3fc5819925c7a613aa3ca95be3.jpg" title="" style="width: 1186px;height: 620px; transform: rotateY(180deg);"/><img alt=""src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f34fec3fc5819925c7a613aa3ca95be3.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f34fec3fc5819925c7a613aa3ca95be3.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg);" /><img alt=""src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f34fec3fc5819925c7a613aa3ca95be3.jpg" title="" style="width: 1186px;height: 620px;"/><img alt=""src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f34fec3fc5819925c7a613aa3ca95be3.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg); "/><img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f34fec3fc5819925c7a613aa3ca95be3.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f34fec3fc5819925c7a613aa3ca95be3.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg);" />
</marquee>
</div>
<marqueeclass="inmg" direction="down"
height="550"
behavior="alternate"
id="m4" style="transform: rotateY(180deg);"><marqueeid="m1" scrollamount="15"><imgsrc="https://pic1.imgdb.cn/item/6873472c58cb8da5c8a694d7.png"height="80" /></marquee></marquee>

<marqueeclass="inmg" direction="down"
height="550"
behavior="alternate"
id="m3"><marquee id="m2" scrollamount="23" ><imgsrc="https://pic1.imgdb.cn/item/6873472c58cb8da5c8a694d7.png"height="100" /></marquee></marquee>

<span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
<div class="lrc">
         <ul id="ul"></ul>
   </div>

</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w7/audio/9c/87/ff/bac4c143ae72fd92891e0c3cee7d39c3/audio.mp3" autoplay loop ></audio>
<script>
   var music = document.getElementById('aud');
   var m= document.getElementById('m');
var m4 = document.getElementById('m4');var m1 = document.getElementById('m1');var m2 = document.getElementById('m2');var m3 = document.getElementById('m3');
var btn = document.getElementById('btn');
   btn.onclick = function() {
         if (aud.paused) {
            aud.play();
            m.start();m4.start();m1.start();m2.start();m3.start();
            btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
            } else {

            aud.pause();m.stop();m4.stop();m1.stop();m2.stop();m3.stop();
            btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
}
};
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)

}, 1000)

</script>

<script>
   let lrc = `
童年老家
演唱：马健涛、魏佳艺
词曲：马健涛
亚伦影音工作室
马健涛：
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
魏佳艺：
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
马健涛：
小时候玩泥巴
弄脏了衣服啊
妈妈的手会拍我屁股两下
天亮下地耕田
妈妈腰还没弯
爸爸的白发还看不见
魏佳艺：
不知不觉长大
院子风吹雨打
当年的笑声再也没有了
小时候盼过年
长大后怕过年
童年的画面却只能怀念
马健涛：
家乡的白杨阿
守护着老家
我若回家你还记得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
魏佳艺：
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
马健涛：
不知不觉长大
院子风吹雨打
当年的笑声再也没有了
小时候盼过年
长大后怕过年
童年的画面却只能怀念
魏佳艺：
家乡的白杨阿
守护着老家
我若回家你还记得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
马健涛：
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
魏佳艺：
家乡的白杨阿
守护着老家
我若回家你还记得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
合：
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
`;
   let lrcArr = lrc.split('\n');
   let result = [];
   var audio = document.querySelector("#aud");
   var ul = document.querySelector("#ul");
   var 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;
   }

   function createElements() {
         let fragment = document.createDocumentFragment();

         for (let i = 0; i < result.length; i++) {
            let li = document.createElement("li");
            li.innerText = result.word;

            li.addEventListener("click", function () {
               audio.currentTime = result.time;
               setOffset();
            });

            fragment.appendChild(li);
         }

         ul.appendChild(fragment);
   }

   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;
         let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

         offset = Math.max(minOffset, Math.min(offset, maxOffset));

         ul.style.transform = `translateY(${-offset}px)`;

         ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
         if (index < ul.children.length) {
            ul.children.classList.add('active');
         }
   }

   audio.addEventListener("timeupdate", setOffset);
</script>

梦油发表于 2025-7-13 14:16

欣赏佳作，问候亚伦。

杨帆发表于 2025-7-13 14:50

视听盛宴，效果美妙，谢谢亚伦老师精彩分享{:4_190:}

愤怒的葡萄 发表于 2025-7-13 14:59

欣赏佳作，问候亚伦。

红影发表于 2025-7-13 16:02

很感人的歌曲，让人不觉想起小时候。
欣赏亚伦老师好帖{:4_199:}

红影发表于 2025-7-13 16:03

滚动画面选择漂亮，歌词同步准确，给亚伦老师点赞{:4_199:}

页: [1]

花潮论坛's Archiver

童年老家