钢琴演奏：《梦中的婚礼》 同玩岁月频谱效果
<style>
#papa {
position: relative;
width: 1280px;
height: 683px;
background: #000 url('https://wj.zp68.com/lxx/yunhua/2026/02/11/2F.jpg');
box-shadow: 2px 2px 6px #000;
z-index: 1;
margin: 140px 0 20px calc(50% - 723px);
overflow: hidden;
border-radius: 32px;
}
#Player {
position: absolute;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
z-index: 10;
width: 100px;
height: 100px;
left: 52%;
top: 10%;
}
#Player:hover {
filter: hue-rotate(60deg) drop-shadow(0 0 28px #1b28d3);
--state: paused;
}
@keyframes rot {
to { transform: rotate(1turn); }
}
.dancer {
position: absolute;
z-index: 1;
}
.lrcShow {
font: normal 32px sans-serif;
position: absolute;
bottom: 10%;
left: 35%;
color: Lavender;
filter: drop-shadow(1px 2px 1px #000);
letter-spacing: 2px;
cursor: pointer;
z-index: 999;
white-space: nowrap;
text-align: center;
}
.lrc-char {
position: relative;
display: inline-block;
}
.lrc-char::before {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: transparent;
background-image: linear-gradient(60deg, #FF0000, #FFFF00, #5fb4d3, #5fb4d3, #5fb4d3);
-webkit-background-clip: text;
background-clip: text;
overflow: hidden;
animation: charReveal var(--char-duration) linear forwards;
animation-delay: var(--char-delay);
animation-play-state: var(--aniPlayState);
}
@keyframes charReveal {
from { width: 0; }
to { width: 100%; }
}
</style>
<div id="papa">
<img id="Player" src="https://wj.zp68.com/lxx/yunhua/2026/02/11/ann.png" alt="播放">
<img class="dancer" id="mainGif" src="https://wj.zp68.com/lxx/yunhua/2026/02/11/2F.gif" style="left:0;top:0;width:99.9%">
<img class="dancer" src="https://wj.zp68.com/lxx/yunhua/2026/02/11/bt.png" alt="" style="left: 32%; top: 10%; width: 28%;">
<div class="lrcShow" id="lrcContainer"></div>
</div>
<script>
class LrcPlayer {
constructor(options) {
this.lrcText = options.lrcTxt;
this.audioURL = options.audioURL;
this.currentIndex = -1;
this.isPaused = false;
this.lrcArray = this.parseLrc();
this.lrcContainer = document.getElementById('lrcContainer');
this.mainGif = document.getElementById('mainGif');
this.gifStatic = 'https://wj.zp68.com/lxx/yunhua/2026/02/11/2F.jpg';
this.gifAnimated = 'https://wj.zp68.com/lxx/yunhua/2026/02/11/2F.gif';
this.hasUserInteracted = false;
this.initAudio();
this.bindEvents();
this.showInitialLyric();
setTimeout(() => this.tryAutoPlay(), 1000);
}
parseLrc() {
const result = [];
this.lrcText.trim().split(/\r?\n/).forEach(line => {
const timeTags = line.match(/\[\d{1,2}:\d{2}(?:\.\d+)?\]/g);
if (timeTags) {
const text = line.split(']').pop().trim();
if (text) timeTags.forEach(tag => {
const = tag.slice(1, -1).split(':');
result.push({ time: +m * 60 + +s, text });
});
}
});
result.sort((a, b) => a.time - b.time);
for (let i = 0; i < result.length - 1; i++) {
result.duration = result.time - result.time;
}
if (result.length) result.duration = 2;
return result;
}
showInitialLyric() {
if (this.lrcArray.length > 0) {
this.showLyric(this.lrcArray.text, this.lrcArray.duration, true);
this.currentIndex = 0;
}
}
initAudio() {
this.audio = new Audio(this.audioURL);
this.audio.loop = true;
this.audio.style.display = 'none';
document.getElementById('papa').appendChild(this.audio);
}
bindEvents() {
document.getElementById('Player').onclick = (e) => {
e.stopPropagation();
this.hasUserInteracted = true;
if (this.audio.paused) {
this.audio.play();
} else {
this.audio.pause();
}
};
this.audio.addEventListener('timeupdate', () => this.updateLyrics());
this.audio.addEventListener('play', () => this.updatePlayState(true));
this.audio.addEventListener('pause', () => this.updatePlayState(false));
}
updateLyrics() {
if (this.isPaused) return;
const ct = this.audio.currentTime;
for (let i = 0; i < this.lrcArray.length; i++) {
if (ct >= this.lrcArray.time && (i === this.lrcArray.length - 1 || ct < this.lrcArray.time)) {
if (this.currentIndex !== i) {
this.currentIndex = i;
this.showLyric(this.lrcArray.text, this.lrcArray.duration, false);
}
break;
}
}
}
showLyric(text, duration, isInitial = false) {
if (this.isPaused && !isInitial) return;
this.lrcContainer.innerHTML = '';
const chars = text.split('');
const charDuration = duration / chars.length;
chars.forEach((char, index) => {
const charSpan = document.createElement('span');
charSpan.className = 'lrc-char';
charSpan.textContent = char;
charSpan.setAttribute('data-char', char);
charSpan.style.setProperty('--char-duration', charDuration + 's');
charSpan.style.setProperty('--char-delay', (index * charDuration) + 's');
charSpan.style.setProperty('--aniPlayState', isInitial ? 'running' : 'running');
this.lrcContainer.appendChild(charSpan);
});
}
updatePlayState(playing) {
this.isPaused = !playing;
const playerEl = document.getElementById('Player');
const papaEl = document.getElementById('papa');
papaEl.style.setProperty('--state', playing ? 'running' : 'paused');
playerEl.title = playing ? '暂停' : '播放';
if (playing) {
playerEl.style.animationPlayState = 'paused';
playerEl.style.animation = 'none';
// 这里通过一个极短的延时（requestAnimationFrame）确保浏览器应用了‘none’状态
requestAnimationFrame(() => {
requestAnimationFrame(() => {
playerEl.style.animation = 'rot 8s linear infinite running';
});
});
} else {
playerEl.style.animationPlayState = 'paused';
}
document.querySelectorAll('.lrc-char').forEach(char => {
char.style.setProperty('--aniPlayState', playing ? 'running' : 'paused');
});
this.mainGif.src = playing ? this.gifAnimated : this.gifStatic;
}
tryAutoPlay() {
this.audio.play().catch(() => console.log('等待用户交互'));
}
}
const lrcText =`《梦中的婚礼》
是由保罗·赛内维尔
和奥利佛·图森作曲
理查德·克莱德曼演奏的钢琴曲
这首曲子是为理查德·克莱德曼
量身定制的
出自他的专辑《水边的阿狄丽娜》
理查德·克莱德曼
以其优美的钢琴演奏而闻名
尤其擅长演绎流行和古典音乐作品
音乐配词：小辣椒
歌曲背景故事
《梦中的婚礼》
这首钢琴曲
背后隐匿着一个动人的故事
一位平凡的少年
却爱上了梦之国的公主
他深知自己配不上这个
倾国倾城的公主
但是却无法压抑心中的爱
并勇敢地说了出来
被现实打败的他伤心地离开了
心中却无法忘却这位公主
他在离开的日子里刻苦地学习
掌握了多种技能
他以为自己离开了
忙碌起来了
就可以不想她了
但是
对她的思念却越发强烈
六年后
当他回来的时候
发现公主正在举办自己的婚礼
失落的他在最后一刻
为公主挡住了
来自刺客发射的弓箭
在公主的怀中死去
整首作品正如标题所示
刻画了这个少年
梦中的那个婚礼
虽然无果
但心中却充满幻想与期待
谢谢欣赏
`;
new LrcPlayer({
lrcTxt: lrcText,
audioURL: "https://wj.zp68.com/lxx/yunhua/2026/02/11/001.mp3"
});
document.addEventListener('click', function initPlay() {
const audio = document.querySelector('audio');
const player = new LrcPlayer({});
if (audio && audio.paused && !player.hasUserInteracted) {
audio.play();
}
}, { once: true });
</script> @走过岁月
同玩一个音频效果，用了钢琴演奏的纯音乐
别说再见 TO：小辣椒
https://www.huachaowang.com/forum.php?mod=viewthread&tid=90593&fromuid=4275
(出处: 花潮论坛)
来了 这么快就做出来了，可以啊 音乐不错，跟频谱搭配完美 走过岁月 发表于 2026-2-13 21:08
来了
岁月晚上好{:4_187:} 还有美女弹钢琴，画面增添动感 走过岁月 发表于 2026-2-13 21:09
这么快就做出来了，可以啊
这个白天在脑子里面想好加什么效果，晚上很快就完成了 必须表扬一下 {:5_116:} 走过岁月 发表于 2026-2-13 21:10
音乐不错，跟频谱搭配完美
我非常喜欢的一首理查德·克莱德曼演奏的钢琴曲 走过岁月 发表于 2026-2-13 21:11
还有美女弹钢琴，画面增添动感
哈哈，必须要加效果进去啊 走过岁月 发表于 2026-2-13 21:12
必须表扬一下
谢谢岁月的表扬，主要你那个频谱效果制作的特别美 小辣椒 发表于 2026-2-13 21:11
岁月晚上好
晚上好 小辣椒 发表于 2026-2-13 21:12
这个白天在脑子里面想好加什么效果，晚上很快就完成了
小辣椒头脑灵活，冰雪聪明 小辣椒 发表于 2026-2-13 21:13
哈哈，必须要加效果进去啊
嗯，很好 走过岁月 发表于 2026-2-13 21:19
小辣椒头脑灵活，冰雪聪明
哇塞，又夸我啊，其实我白天动脑子想好，晚上做起来速度就快了 走过岁月 发表于 2026-2-13 21:20
嗯，很好
只是有的效果自己做也是花时间的，有的效果就要重复用了 小辣椒 发表于 2026-2-13 21:29
哇塞，又夸我啊，其实我白天动脑子想好，晚上做起来速度就快了
嗯，有构想做起来就顺手 走过岁月 发表于 2026-2-13 21:44
嗯，有构想做起来就顺手
白天上班思想开小差{:4_170:} 小辣椒 发表于 2026-2-13 21:47
白天上班思想开小差
这样子啊，被领导知道要批评的
页:
[1]
2