献给母亲的歌《等我回来》
本帖最后由 亚伦影音工作室 于 2026-5-11 15:14 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
:root {--ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #ff0000;--color-2: #00aa00;--color-3: #fd27d2;--color-4: #000078;--color-5: #0dd7de;--color-6: #ff0000;--color-7: #000;--color-8: #ff0000;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8;}
#papa{margin: 10px -300px;
width: 1186px;
height: 620px;
background:#000 url(https://pic1.imgdb.cn/item/69fef2745a52df004a05f3e5.png) no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
z-index: 12345;}
#d1{margin: 0px 0px;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;mix-blend-mode: lighten;}
#d2{margin: 0px 50%;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;mix-blend-mode: lighten;}
#d3{margin: 25% 0%;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;mix-blend-mode: lighten;}
#d4{margin: 25% 50%;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;mix-blend-mode: lighten;}
#source1,#source2,#source3,#source4{width: 50%;}
#slider1{margin: 100px 10px;
width: 500px;
height: 280px;
position: absolute;
mix-blend-mode: lighten;
z-index: 2;cursor: pointer;}
#slider1 img{width: 100%;}
#lyric {position: absolute;left: 50%;bottom: 3%;transform: translateX(-50%);z-index: 12;display: flex;flex-direction: column;justify-content: center;height: 160px;width: 80%;text-align: center;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);font-size: 3.5em; }
#lyricDisplay{height: 100%;letter-spacing: 0px;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;}
.lyrichar {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards,hue-rotate 1.5s linear infinite;margin: 0 2px;}
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}}
@keyframes hue-rotate {50%{ filter: hue-rotate(360deg); }}
.stop .lyrichar{animation-play-state: paused;}
#player{position:absolute;top: 35%;z-index: 99;
left: 18%;
width: 100px;
height: 100px;
display: grid;
place-items: center;animation: rot 8s linear infinite ;}
#rect {position: absolute;
display: grid;
place-items: center;
width:35%;
height: 35%;
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);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 500;left: 18%;top: 32%;color:#fff}
#fullscreen{border-radius: 4px;position: absolute;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 20px;
border: none;
cursor: pointer;top: 5px;left: 13%;
}
</style>
<divid="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<divid="statusDisplay">播放中: -2:20 </div>
<divid="d1"><imgid="source1"src="https://pic1.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif"></div>
<divid="d2"><imgid="source2"src="https://pic1.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif"></div>
<divid="d3"><imgid="source3"src="https://pic1.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif"></div>
<divid="d4"><imgid="source4"src="https://pic1.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif"></div>
<img id="slider1" src="https://pic1.imgdb.cn/item/69fdafb140ff184685af3901.png" alt="轮播图">
<div id="player">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>
<div id="testImg" >
<div id="lyric">
<div id="lyricDisplay" ></div>
</div>
</div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w9/audio/f8/50/a6/0e8417d9e0a78ebd830ccf8fa9650be6/audio.mp3" loop autoplay ></audio>
<script>
constimags = ["https://pic1.imgdb.cn/item/69fdafb140ff184685af3901.png","https://pic1.imgdb.cn/item/69fdafb140ff184685af3902.png","https://pic1.imgdb.cn/item/69fdafb140ff184685af3904.png","https://pic1.imgdb.cn/item/69fdafb140ff184685af3903.png","https://pic1.imgdb.cn/item/69fdafb140ff184685af3905.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af3909.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390a.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390b.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390c.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390d.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390e.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3913.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3914.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3915.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3916.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3916.png","https://pic1.imgdb.cn/item/69fdb18d40ff184685af39e7.png","https://pic1.imgdb.cn/item/69fdb18d40ff184685af39e9.png","https://pic1.imgdb.cn/item/69fdb18d40ff184685af39ea.png","https://pic1.imgdb.cn/item/69fdb18d40ff184685af39eb.png"];
let index = 0;
setInterval(() => {if(!aud.paused){
index = (index + 1) % imags.length;
document.getElementById("slider1").src = imags;
}
}, 200); // 每3秒切换一次
</script>
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const starfishPlayer =document.getElementById('player');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');
let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let isMuted = true;
let fsTimer = null;
let sparkleInterval = null;
function createSingleSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
const x = Math.random() * 100;
const y = Math.random() * 100;
sparkle.style.left = `${x}%`;
sparkle.style.top = `${y}%`;
sparkle.style.animationDelay = `${Math.random() * 2}s`;
sparkle.style.setProperty('--tx', `${(Math.random() - 0.5) * 80}px`);
sparkle.style.setProperty('--ty', `${(Math.random() - 0.5) * 80}px`);
sparklesContainer.appendChild(sparkle);
setTimeout(() => {
if (sparkle && !sparkle.classList.contains('hidden')) {
sparkle.remove();
}
}, 3000);
}
function startSparkleLoop() {
stopSparkleLoop();
sparklesContainer.classList.remove('fade-out');
sparklesContainer.style.opacity = 1;
sparklesContainer.innerHTML = '';
for (let i = 0; i < 15; i++) {
createSingleSparkle();
}
sparkleInterval = setInterval(() => {
if (window.isPlaying) {
createSingleSparkle();
}
}, 500);
}
function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}
function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(sparkle => {
sparkle.classList.add('hidden');
});
setTimeout(() => {
sparklesContainer.innerHTML = '';
}, 800);
}
function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}
function togglePlayPause() {
if (audioPlayer.paused) {
if (audioPlayer.currentTime <= 0.5) {
resetLyrics();
}
audioPlayer.play()
.then(() => {
player.style.animationPlayState = 'running';
window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '播放中...';
startSparkleLoop();
})
.catch(error => {
console.error('播放失败:', error);
statusDisplay.textContent = '播放失败，请检查音频文件';
});
} else {
audioPlayer.pause();
player.style.animationPlayState = 'paused';
document.getElementById('testImg').classList.add('stop') ;
window.isPlaying = false;
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
statusDisplay.textContent = '已暂停';
fadeOutAllSparkles();
}
}
audioPlayer.addEventListener('play', () => {
animatedGif.classList.add('active');
staticImage.classList.remove('active');
});
audioPlayer.addEventListener('pause', () => {
staticImage.classList.add('active');
animatedGif.classList.remove('active');
});
starfishPlayer.addEventListener('click', (e) => {
e.stopPropagation();
document.getElementById('testImg').classList.remove('stop');
togglePlayPause();
});
function displayLyricCharByChar(text) {
lyricDisplay.innerHTML = '';
const chars = text.split('');
const colorList = ['var(--color-1)', 'var(--color-2)', 'var(--color-3)', 'var(--color-4)', 'var(--color-5)', 'var(--color-6)'];
chars.forEach((char, i) => {
const span = document.createElement('span');
span.className = 'lyrichar';
span.style.color = colorList;
if (char === ' ') {
span.innerHTML = ' ';
} else {
span.textContent = char;
}
const offset = i === 0 ? 0 : i * 30;
span.style.transform = `translateY(${offset}px)`;
span.style.animationDelay = `${i * 0.08}s`;
if (/[，。！？,.!?]/.test(char)) {
span.style.animationDelay = `${i * 0.08 + 0.08}s`;
}
lyricDisplay.appendChild(span);
});
}
audioPlayer.addEventListener('timeupdate', () => {
if (!window.isPlaying) return;
if (isUpdating) return;
isUpdating = true;
setTimeout(() => isUpdating = false, 100);
const currentTime = audioPlayer.currentTime;
const remainingTime = audioPlayer.duration - currentTime;
statusDisplay.textContent = `播放中: ${formatTime(-remainingTime)}`;
for (let i = 0; i < lyrics.length; i++) {
const currentLyricTime = lyrics.time;
const nextLyricTime = i < lyrics.length - 1 ? lyrics.time : Infinity;
if (currentTime >= currentLyricTime - 0.3 && currentTime < nextLyricTime + 0.3) {
if (currentLyricIndex !== i) {
currentLyricIndex = i;
displayLyricCharByChar(lyrics.text);
}
break;
}
}
});
function formatTime(seconds) {
const absSeconds = Math.abs(seconds);
const mins = Math.floor(absSeconds / 60);
const secs = Math.floor(absSeconds % 60);
const sign = seconds < 0 ? '-' : '';
return `${sign}${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
const lrcText = `
云朵 - 云朵
词：刀郎
曲：刀郎
我一定回来 越过那一片海
阿妈呼唤 萦绕耳畔
那年我离开像一朵云彩
单单的飘向天外
风拉着我的衣带
像阿妈慈母情怀
等着我回来 吻你双鬓洁白
向你倾吐 爱以及爱
年少读不懂亲人的关怀
傻傻的执着未来
痴迷在天外的色彩
不见你心泪似海
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
还是你的小孩
`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const lrcRegex = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
lines.forEach(line => {
const match = line.match(lrcRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const ms = parseInt(match);
const totalSeconds = minutes * 60 + seconds + ms / 100;
const text = match.trim();
lyrics.push({
time: totalSeconds,
text: text
});
}
});
return lyrics;
}
const lyrics = parseLrc(lrcText);
audioPlayer.addEventListener('ended', () => {
resetLyrics();
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});
audioPlayer.addEventListener('loadedmetadata', () => {
statusDisplay.textContent = '音频已加载，点击播放开始';
tryAutoPlay();
});
audioPlayer.addEventListener('error', (e) => {
console.error('音频错误:', e);
statusDisplay.textContent = '音频加载失败，请检查文件路径';
});
function tryAutoPlay() {
audioPlayer.play()
.then(() => {
window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '音乐加载中...';
startSparkleLoop();
})
}
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
</script>
<script>
const renderGif = function (dom) {
if (!dom || !dom.src) {
return;
}
// gif图片的url地址
const src = dom.src;
// 创建的用来播放gif的canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext("2d");
// 一些与GIF播放有关的变量
let imageDecoder = null;
let imageIndex = 0;
let paused = false;
// 绘制方法
const renderImage = function (result) {
context.drawImage(result.image, 0, 0);
const track = imageDecoder.tracks.selectedTrack;
// 如果播放结束，从头开始循环
if (imageDecoder.complete) {
if (track.frameCount === 1) {
return;
}
if (imageIndex + 1 >= track.frameCount) {
imageIndex = 0;
}
}
// 绘制下一帧内容
imageDecoder
.decode({ frameIndex: ++imageIndex })
.then((nextResult) => {
if (paused === false) {
setTimeout(() => {
renderImage(nextResult);
}, result.image.duration / 1200.0);
} else {
canvas.nextResult = nextResult;
}
})
.catch((e) => {
// imageIndex可能超出的容错处理
if (e instanceof RangeError) {
imageIndex = 0;
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
} else {
throw e;
}
});
};
// 判断地址能够请求
fetch(src).then((response) => {
// 可以请求，进行样式处理
// 设置canvas尺寸
canvas.width = dom.naturalWidth;
canvas.height = dom.naturalHeight;
// 实际显示尺寸
canvas.style.width = dom.clientWidth + 'px';
canvas.style.height = dom.clientHeight + 'px';
// 隐藏图片，显示画布
dom.after(canvas);
dom.style.position = 'absolute';
dom.style.opacity = '0';
// 将GIF绘制在canvas上
imageDecoder = new ImageDecoder({
data: response.body,
type: "image/gif"
});
// 解析第一帧并绘制
imageDecoder.decode({
frameIndex: imageIndex
}).then(renderImage);
});
// 事件绑定处理
dom.addEventListener('ended',function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
canvas.addEventListener('ended',function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
player.addEventListener('click', function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
};
renderGif(source1);renderGif(source2);renderGif(source3);renderGif(source4);
</script>
本帖最后由 杨帆 于 2026-5-9 21:46 编辑
好听好看，祝天下母亲节日快乐{:4_171:} 亚纶这个频谱没有反应哦，歌曲听到的 同祝母亲节快乐！ 制作漂亮，欣赏亚伦老师好帖，借帖祝全天下的母亲们节日快乐{:4_187:}
页:
[1]