论坛 › 人机音画视频 › 佛陀赞-陶莹

万顷湖 发表于 2026-7-1 07:04

佛陀赞-陶莹

本帖最后由 万顷湖 于 2026-8-22 08:14 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_497175">
<div style="position: absolute; left:0px;width:100%;margin-top:120px;">

<style>
#papa { margin: width: 640px;height: 640px;background: url(https://free.picui.cn/free/2026/07/27/6a66dee1388f2.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000; overflow: hidden; z-index: 1; position: relative;}
.inmg{width:100%; height: 640px; 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://free.picui.cn/free/2026/07/27/6a66dee1388f2.jpg) 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>
<marquee id="m" behavior="alternate" scrollamount="5" height=640>
<img alt=""
src="https://free.picui.cn/free/2026/07/27/6a66df389b245.jpg" title="" style="width: 640px;height: 640px;" /><img alt=""
src="https://free.picui.cn/free/2026/07/27/6a66df389b245.jpg" title="" style="width: 640px;height: 640px; transform: rotateY(180deg);"/><img alt="" src="https://free.picui.cn/free/2026/07/27/6a66df7ab16d8.jpg" title="" style="width: 640px;height: 640px;" /><img alt=""
src="https://free.picui.cn/free/2026/07/27/6a66df7ab16d8.jpg" title=""style=" width: 640px;height: 640px;transform: rotateY(180deg);" /><img alt="" src="https://free.picui.cn/free/2026/07/27/6a66dfb87e843.jpg" title="" style="width: 640px;height: 640px;"/><img alt=""
src="https://free.picui.cn/free/2026/07/27/6a66dfb87e843.jpg" title=""style=" width: 640px;height: 640px;transform: rotateY(180deg); "/><img alt=""
src="https://free.picui.cn/free/2026/07/27/6a66dee1388f2.jpg" title=""style=" width: 640px;height: 640px;" /><img alt=""
src="https://free.picui.cn/free/2026/07/27/6a66dee1388f2.jpg" title=""style=" width: 640px;height: 640px;transform: rotateY(180deg);" />
</marquee>
</div>


<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://www.joy127.com/url/156252.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>
</div>
<div style="height:960px;"></div>
</td></tr></table>

梦江南 发表于 2026-7-1 07:31

老师辛苦了！这么大的工程做起来不容易，向您致敬！祝您健康长寿！{:4_187:}{:4_204:}

红影 发表于 2026-7-1 08:16

这么多的可爱老人啊，真好，幸福的晚年生活。
欣赏万顷湖老师好帖，制作辛苦了{:4_187:}

查看完整版本: 佛陀赞-陶莹