庆祝中华人民共和国成立76周年华诞【请你带上我的祝愿 】
本帖最后由 亚伦影音工作室 于 2025-9-28 21:35 编辑 <br /><br /><style>.blackhole {margin: 10px-300px ;
position: relative;
width: 1286px;
height: 700px;
background:#000 url(https://pic1.imgdb.cn/item/68d936ddc5157e1a8840e83e.jpg) no-repeat center / cover;
overflow: hidden;--state: running;
}
#dt1{position: absolute;top:20%; left:10%;
width: 500px;mix-blend-mode: lighten;
height: 500px;z-index: 3; }
#dt2{position: absolute;top:30%; left:40%;
width: 300px;mix-blend-mode: lighten;
height: 300px;z-index: 3; }
#dt3{position: absolute;top:0%; left:60%;
width: 400px;mix-blend-mode: lighten;
height: 400px;z-index: 3; }
#dt1 img,#dt2 img,#dt3 img{
width: 80%;
height: 80%;}
#dt{position: absolute;top:10%; left:10%;
width: 900px;
height: 320px;z-index: 1; }
#dt img{
width: 100%;
height: 100%;}
.lyrics{margin: 0;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px; /* 调整高度，只容纳当前歌词 */
text-align: center;
position: absolute;z-index: 10;
}
.lyric-line{
width: 100%;
position: relative;
height: 60px;
overflow: visible;
font: 300 50px '华文隶书', sans-serif;
line-height: 60px;
text-align: left;
white-space: nowrap; /* 禁止换行 */
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);
}
.lyric-mask {
position: absolute;
top: 0;
left: 0;
width: 0;
overflow: hidden;
color: #8B4513;
height: 100%;
white-space: nowrap;
}
.lyric-original {
color: #ag0000;
white-space: nowrap;
}
</style>
<div class="blackhole">
<div id='dt'><img id="image" src="https://pic1.imgdb.cn/item/68d93936c5157e1a8840ea9b.gif" ></div>
<div id='dt1'><img id="image1" src="https://pic1.imgdb.cn/item/68d7a7fdc5157e1a883b7508.gif" ></div>
<div id='dt2'><img id="image2" src="https://pic1.imgdb.cn/item/68d7a7fdc5157e1a883b7508.gif" ></div>
<div id='dt3'><img id="image3" src="https://pic1.imgdb.cn/item/68d7a7fdc5157e1a883b7508.gif" ></div>
<div class="lyrics" >
<div class="lyric-line">
<div class="lyric-mask"></div>
<div class="lyric-original"></div>
</div>
</div>
</div>
<audio id="aud" src="https://www.dda5.com/plug/down.php?ac=mp3&id=5bd004eed71b44e98bf9eea5f6f97a19&.mp3" loop autoplay></audio>
<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 = ''; image1.style.opacity = '';image2.style.opacity = '';image3.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("image");
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
var image3 = document.getElementById("image3");
</script>
<script>
dt1.onclick =dt2.onclick =dt3.onclick= () => aud.paused ? aud.play() : aud.pause();
(function(){
let mState = () => aud.paused ? (image.stop(),image1.stop(),image2.stop(),image3.stop()):(image.play(),image1.play(),image2.play(),image3.play());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
const blackhole= document.querySelector('.blackhole');
</script>
<script>
// 歌词解析ksc歌词或lrc歌词
const lrc = `庆国庆精品音画
请你带上我的祝愿 - 阿木古楞
望着北飞的大雁
我心潮激荡
大雁思念的地方
是我美丽富饶的家乡
大雁飞落的地方
有我母亲温暖的毡房
忘不了故乡隔不断的情
大雁啊请你带上我的祝愿
望着北飞的大雁
我泪眼迷蒙
大雁向往的地方
是我魂牵梦绕的故乡
大雁留连的地方
有我父亲碧绿的草原
忘不了故乡隔不断的情
大雁啊请你带上我的祝愿
大雁留连的地方
有我父亲碧绿的草原
忘不了故乡隔不断的情
大雁啊请你带上我的祝愿
大雁啊请你带上我的祝愿
`;
const lyrics = parseLyrics(lrc);
const lyricMask = document.querySelector('.lyric-mask');
const lyricOriginal = document.querySelector('.lyric-original');
let currentIndex = -1;
let currentLyric = null;
// 解析歌词（支持两种格式）
function parseLyrics(lrcText) {
const lyrics = [];
if (lrcText.includes('karaoke.add')) {
const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
let match;
while ((match = lineRegex.exec(lrcText)) !== null) {
const startTime = timeToMs(match);
const endTime = timeToMs(match);
const text = match.replace(/\[|\]/g, '').trim();
const durations = match.split(',').map(Number);
if (text) {
lyrics.push({startTime, endTime, text, durations});
}
}
}
else if (lrcText.includes('[')) {
const lines = lrcText.split('\n').filter(line => line.trim());
lines.forEach((line, index) => {
const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
if (timeMatch) {
const timeStr = timeMatch;
const text = line.replace(/\[.*?\]/, '').trim();
if (text) {
const startTime = timeToMs(timeStr);
const nextLine = lines;
const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
lyrics.push({
startTime,
endTime,
text,
durations: calculateCharDurations(text, startTime, endTime)
});
}
}
});
}
return lyrics;
}
function calculateCharDurations(text, startTime, endTime) {
const totalDuration = endTime - startTime;
const charCount = text.length;
const baseDur = Math.floor(totalDuration / charCount);
const durations = new Array(charCount).fill(baseDur);
const remainder = totalDuration % charCount;
for (let i = 0; i < remainder; i++) {
durations++;
}
return durations;
}
function timeToMs(timeStr) {
const parts = timeStr.split(':');
const minutes = parseInt(parts, 10);
const secondsAndMs = parts.split('.');
const seconds = parseInt(secondsAndMs, 10);
const ms = parseInt(secondsAndMs || 0, 10);
return minutes * 60 * 1000 + seconds * 1000 + ms;
}
function getCurrentLyricIndex(lyrics, currentTimeMs) {
for (let i = 0; i < lyrics.length; i++) {
if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
return i;
}
}
return -1;
}
function updateLyricDisplay(index) {
if (index < 0 || index >= lyrics.length) return;
currentIndex = index;
currentLyric = lyrics;
lyricOriginal.textContent = currentLyric.text;
lyricMask.textContent = currentLyric.text;
lyricMask.style.width = '0%';
}
function updateLyricMask(currentTimeMs) {
if (!currentLyric) return;
const lyricStartTime = currentLyric.startTime;
const elapsed = currentTimeMs - lyricStartTime;
const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
let charIndex = 0;
let accumulatedTime = 0;
for (let i = 0; i < currentLyric.durations.length; i++) {
accumulatedTime += currentLyric.durations;
if (elapsed <= accumulatedTime) {
charIndex = i + 1;
break;
}
}
if (elapsed >= totalDuration) {
charIndex = currentLyric.text.length;
}
charIndex = Math.min(charIndex, currentLyric.text.length);
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.fontSize = '50px';
tempSpan.style.fontWeight = '800';
document.body.appendChild(tempSpan);
const visibleText = currentLyric.text.substring(0, charIndex);
tempSpan.textContent = visibleText;
const width = tempSpan.offsetWidth;
document.body.removeChild(tempSpan);
lyricMask.style.width = `${width}px`;
}
// 监听更新歌词
aud.addEventListener('timeupdate', () => {
const currentTimeMs = aud.currentTime * 1000;
const index = getCurrentLyricIndex(lyrics, currentTimeMs);
if (index !== currentIndex) {
updateLyricDisplay(index);
}
updateLyricMask(currentTimeMs);
});
updateLyricDisplay(0);
</script> 亚纶这个背景不是动图，其他动图可以一键停止了，但我没有看见播放器？ 烟花动图很漂亮，收藏了，谢谢亚纶 借美帖祝大家双节快乐！ 欣赏亚伦老师好帖，同祝祖国华诞{:4_199:} 大赞亚伦老师精彩美贴，共庆祖国华诞！{:4_374:} 祝亚伦老师双节快乐{:4_176:} 音画合一、美轮美奂 歌曲好听 感谢亚伦影音工作室带来的精彩 载歌载舞庆华诞
鼓乐齐鸣贺国庆 欣赏亚伦老师的美帖，祝老师双节快乐！
页:
[1]