论坛 › 欢乐水吧 › 大风在刮大雪在下（对唱）演唱：烟嗓船长、魏佳艺

亚伦影音工作室 发表于 2026-2-5 18:40

大风在刮大雪在下（对唱）演唱：烟嗓船长、魏佳艺

本帖最后由 亚伦影音工作室 于 2026-3-12 10:06 编辑 <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: #fff887;--color-2: #fc89e5;--color-3: #fd27d2;--color-4: #9cf9fc;--color-5: #0dd7de;--color-6: #fbcb6d;--color-7: #fb8739;--color-8: #fa5f57;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8;}
.pa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1260px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background: #000 url(https://pic1.imgdb.cn/item/6984650a312b01a291a531e4.jpg) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
.player-title {position: absolute;top: 8%;left: 10%;text-align: center;font-size: 25pt;filter: drop-shadow(1px 2px 1px #080808);color: #fff888;line-height: 100%; cursive;z-index: 2;}
#papa{
width: 100%; height: 100%;
    background: url("https://pic1.imgdb.cn/item/6984650a312b01a291a531e4.jpg")no-repeat;
position: absolute;
    top: 0px;
    left: 0px;z-index: 1;
animation: c 6s linear infinite, rotd 2s linear infinite ;
background-size: cover;
}
@keyframes c {
   30%{transform: scale(1);opacity: 1;
    }
0%{transform: scale(4);opacity: 0;
    }
   
}
.lyric-container {position: absolute;left: 50%;bottom: 3%;transform: translateX(-50%);z-index: 12;display: flex;flex-direction: column;justify-content: center;height: 120px;width: 80%;text-align: center;}
.lyric-display {height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;animation: rotd 1s linear infinite ;}
.lyric-char {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards;margin: 0 2px;text-shadow: 1px 2px 1px rgba(0, 0, 0, 1);font-size: 3em;font-weight: 400;}
@keyframes charAppear {to {opacity: 1;transform: translateY(0);}}
@keyframes rotd {to {filter: hue-rotate(360deg);}}
#starfish-player {position: absolute;top: 30%;right: 5%;width: 220px;height: 220px;z-index: 100;transform-style: preserve-3d;cursor: pointer;margin: 1rem auto;}

.starfish-3d {position: absolute;width: 100%;height: 100%;cursor: pointer;display: grid;place-items: center;}
#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);
}
.playing .starfish-3d {animation: rot3d 8s linear infinite, swimColor 5s linear infinite, twinkle 1s ease-in-out infinite;}
.paused .starfish-3d {animation: none;}

.starfish-3d::after {content: '';position: absolute;width: 100%;height: 100%;animation: twinkle 3s ease-in-out infinite alternate;}
@keyframes twinkle {0%, 100% {opacity: .5;}50% {opacity: 1;}}
@keyframes rot3d {to {transform:rotateZ(360deg);}}
@keyframes swimColor {0%, 100% {filter: drop-shadow(0 0 40px rgba(255, 107, 107, 0.8)) hue-rotate(0deg);}50% {filter: drop-shadow(0 0 60px rgba(255, 107, 107, 0.9)) hue-rotate(30deg);}}
.starfish-sparkles {position: absolute;width: 100%;height: 100%;pointer-events: none;opacity: 1;transition: opacity 0.8s ease-out;}
.starfish-sparkles.fade-out {opacity: 0 !important;}
.sparkle {position: absolute;width: 6px;height: 6px;background-color: white;border-radius: 50%;filter: blur(1px);animation: sparkleFloat 3s ease-in-out infinite;opacity: 0;transition: all 0.6s ease-out;}
.sparkle.hidden {opacity: 0 !important;transform: translate(var(--tx, 30px), var(--ty, -40px)) scale(0);animation-play-state: paused;}
@keyframes sparkleFloat {0% {transform: translate(0, 0) scale(0);opacity: 0;}20% {opacity: 1;transform: translate(10px, -10px) scale(1);}80% {opacity: 1;transform: translate(30px, -30px) scale(1.2);}100% {transform: translate(50px, -50px) scale(1.5);opacity: 0;}}
.status-display {position: absolute;z-index: 1;font-size: 1.5em;font-weight: 500;left: 25%;top: 15%;color:#fff}


#fullscreen {position: absolute;top: 30px;right: 30px;font: normal 1.5em 楷体;color: #fff;text-shadow: 0 0 3px #000;opacity: 1;cursor: pointer;user-select: none;z-index: 98;transition: opacity 0.5s ease;}
#fullscreen:hover {font-style: italic;}
</style>
<div class="pa" id="pa">

<div class="player-title"> 大风在刮大雪在下（对唱）</div>
<div id="papa"></div>
<div class="status-display" id="statusDisplay">播放中: -2:20</div>
<div id="starfish-player" class="paused">
<div class="starfish-3d">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>
<div id="sparkles-container" class="starfish-sparkles"></div>
</div>
<div class="lyric-container">
<div id="lyricDisplay" class="lyric-display"></div>
</div>
<audio id="audioPlayer" src="https://s2.cldisk.com/sv-w7/audio/b6/04/bf/ce84a55c8e3ba87dc56ed2364408698f/audio.mp3" loop autoplay playsinline></audio>
<span id="fullscreen">全屏欣赏</span>
</div>
<script>
const pa = document.getElementById('pa');
const fullscreenBtn = document.getElementById('fullscreen');
const audioPlayer = document.getElementById('audioPlayer');

const starfishPlayer = document.getElementById('starfish-player');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');
const sparklesContainer = document.getElementById('sparkles-container');


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(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '播放中...';
startSparkleLoop();
})
.catch(error => {
console.error('播放失败:', error);
statusDisplay.textContent = '播放失败，请检查音频文件';
});
} else {
audioPlayer.pause();

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();
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 = 'lyric-char';
span.style.color = colorList;
if (char === ' ') {
span.innerHTML = '&nbsp;';
} 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();
})
.catch(error => {
console.log('自动播放被浏览器阻止，需要用户交互:', error);
statusDisplay.textContent = '请点击开始播放';
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
window.isPlaying = false;
});
}
document.addEventListener('click', () => {
if (audioPlayer.paused) {
tryAutoPlay();
}
}, { once: true });
let isFullscreen = false;
fullscreenBtn.onclick = () => {
if (!isFullscreen) {
fullscreenBtn.innerText = '退出全屏';
if (pa.requestFullscreen) {
pa.requestFullscreen();
} else if (pa.webkitRequestFullscreen) {
pa.webkitRequestFullscreen();
} else if (pa.msRequestFullscreen) {
pa.msRequestFullscreen();
}
} else {
fullscreenBtn.innerText = '全屏欣赏';
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
isFullscreen = !isFullscreen;
};
pa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreenBtn.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreenBtn.style.opacity = '0';
}, 3000);
});
document.addEventListener('fullscreenchange', () => {
isFullscreen = !!document.fullscreenElement;
fullscreenBtn.innerText = isFullscreen ? '退出全屏' : '全屏欣赏';
});
document.addEventListener('webkitfullscreenchange', () => {
isFullscreen = !!document.webkitFullscreenElement;
fullscreenBtn.innerText = isFullscreen ? '退出全屏' : '全屏欣赏';
});

let mState = () => audioPlayer.paused ? (papa.style.animationPlayState = 'paused',lyricDisplay.style.animationPlayState = 'paused') : (papa.style.animationPlayState = 'running',lyricDisplay.style.animationPlayState = 'running');

audioPlayer.addEventListener('play', () => mState());
audioPlayer.addEventListener('pause', () => mState());

</script>

杨帆 发表于 2026-2-5 18:55

看到亚伦老师的精彩分享很开心，祝马年大吉、安康幸福{:4_180:}

霜染枫丹 发表于 2026-2-5 19:17

感谢亚伦工作室的分享，精彩制作带来看帖的愉悦，祝制作愉快！{:4_204:}{:4_190:}

小辣椒 发表于 2026-2-5 19:54

亚纶终于出现了{:4_187:}

小辣椒 发表于 2026-2-5 19:58

这个背景移动代码小辣椒也是曾经套用玩过，只是这个歌词颜色不一样，

小辣椒 发表于 2026-2-5 19:59

亚纶手术后好好休息，别急着做帖，不要太累了

小辣椒 发表于 2026-2-5 19:59

感谢亚纶的精彩分享，小辣椒收藏代码，以后玩一个

梦油 发表于 2026-2-5 21:25

看到亚伦朋友好高兴，祝你健康快乐。

亚伦影音工作室 发表于 2026-2-5 21:41

梦油 发表于 2026-2-5 21:25
看到亚伦朋友好高兴，祝你健康快乐。

感谢老师关心！

红影 发表于 2026-2-5 23:23

很漂亮的制作，欣赏亚伦老师好帖{:4_199:}

梦油 发表于 2026-2-6 14:11

亚伦影音工作室 发表于 2026-2-5 21:41
感谢老师关心！

亚伦朋友多保重！

老谟深虑 发表于 2026-2-6 16:29

         欣赏老师的好制作，点赞学习！

查看完整版本: 大风在刮大雪在下（对唱）演唱：烟嗓船长、魏佳艺