论坛 › 翻唱朗诵 › 翻唱：《人民军队忠于党》

寒冬残荷 发表于 2025-10-25 20:22

翻唱：《人民军队忠于党》

<style>
#bj {position:relative; margin:90px auto 45px calc(50% - 721px); width:1286px; height:720px; overflow:hidden; z-index:1; background:radial-gradient(ellipse farthest-corner at center center, transparent 78%,#000 100%),url('')no-repeat center/cover,linear-gradient(135deg, #e56420, #c22525, #3d9c31, #000078);letter-spacing: 1px; border:#d0d0d0 15px inset; border-top:#e0e0e0 15px inset; border-bottom:#adadad 15px inset; }
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: .3; cursor: pointer; z-index: 111}
#lyricsCanvas {position: absolute; top: 10%; left: 1%; width: 800px; height: 550px; z-index: 2; letter-spacing: 11px; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0); }
.controls-containe{ position: absolute; bottom: 30px; left: 10px; width: 100%; display: flex; justify-content: center; }
.controls { width: 85%; display: flex; align-items: center; gap: 10px; z-index: 4; }
#progress {position:relative; bottom: 8px; flex-grow: 1; width: 100%; height: 4px; -webkit-appearance: none; background-color: transparent; outline: none; }
#progress::-webkit-slider-container { height: 18px;border-radius: 20px; overflow: hidden;}
#progress::-webkit-slider-runnable-track { height: 4px;border-radius: 20px; background: #EEE;}
#progress::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 20px; background: #880000; border: 1px solid transparent; margin-top: -4px; border-image: linear-gradient(#880000,#880000) 0 fill / 4 11 4 0 / 0px 0px 0 2000px;}
.play-btn { width: 90px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent; border: none; cursor: pointer;font: 400 30px '隶书', sans-serif; color: #00ffff; display: flex; align-items: center; justify-content: center; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0); }
.time-display {font: 300 20px '华文隶书', sans-serif; color: #eee; min-width: 110px; text-align: center; }
#vid{position:absolute; width:100%;height:100%; z-index:1;top:0px;left:0px;}
</style>
<div id="bj">
<video id="vid" src="https://up.mediy.cn/wbmjl_1afa1c4445c97d2589c795d1a0e58879.mp4" autoplay loop muted></video>
<span id="fullscreen">全屏欣赏</span>
<canvas id="lyricsCanvas" width="850" height="450"></canvas>
<div class="controls-containe">
<div class="controls">
<span id="playBtn" class="play-btn">暂停</span>
<input type="range" id="progress" min="0" max="100" value="0"></input>
<span id="timeDisplay" class="time-display">00:00 / 00:00</span>
</div>
</div>
</div>
<audio id="audio" src="https://up.mediy.cn/rmjdzyd_9766c691595f5df3a2a1673477b4046a.mp3" autoplay loop ></audio>
<div style="height:100px;"></div>
<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', bj.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' + secs : secs}`;
}
function updateTimeDisplay() {
const currentTime = audio.currentTime;
const duration = audio.duration || 0;
timeDisplay.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
}
const dom = {
lyricsCanvas: document.getElementById('lyricsCanvas'),
playBtn: document.getElementById('playBtn'),
progress: document.getElementById('progress'),
timeDisplay: document.getElementById('timeDisplay')
};
const lyricsCtx = dom.lyricsCanvas.getContext('2d');
const lrcText =`《人民军队忠于党》
作词:张永枚
作曲:肖民
雄伟的井岗山
八一军旗红
开天辟地第一回
人民有了子弟兵
从无到有靠谁人
伟大的共产党
伟大的毛泽东
伟大的毛泽东
两万五千里
万水千山
突破重围去抗日
高举红旗上延安
转危为安靠谁人
伟大的共产党
伟大的毛泽东
伟大的毛泽东
抗战八年整
打败侵略者
解放战争得胜利
建立人民新中国
成长壮大靠谁人
伟大的共产党
伟大的毛泽东
伟大的毛泽东
万里长江水
奔腾向海洋
保卫祖国作栋梁
人民军队忠于党
共产主义定胜利
伟大的共产党
伟大的毛泽东
伟大的毛泽东
伟大的共产党
伟大的毛泽东
伟大的毛泽东
`;
function parseLRC() {
return lrcText.split('\n')
.filter(line => line.trim() && line.includes('['))
.map(line => {
const timeMatch = line.match(/\[(\d+):(\d+)\.(\d+)\]/);
if (!timeMatch) return null;
const time = parseInt(timeMatch) * 60 + parseInt(timeMatch) + parseInt(timeMatch)/100;
const text = line.replace(/\[.*?\]/g, '').trim();
return text ? { time, text } : null;
})
.filter(item => item)
.sort((a, b) => a.time - b.time);
}
const lyricsList = parseLRC();
let currentLyricIndex = -1;
let floatingLyrics = [];
class FloatingLyric {
constructor(text) {
this.text = text;
this.x = Math.random() * (dom.lyricsCanvas.width - 100);
this.y = Math.random() * (dom.lyricsCanvas.height - 30);
this.vx = (Math.random() - 0.5) * 0.5;
this.vy = (Math.random() - 0.5) * 0.5;
this.opacity = 0;
this.targetOpacity = 0.8 + Math.random() * 0.2;
this.size = 30 + Math.random() * 7;
this.color = `hsl(${Math.random() * 100}, 100%, 50%)`; //会生成 0-60 之间的随机数，对应色环上红色到黄色的暖色调范围。饱和度固定为100%，表示颜色非常鲜艳饱满。亮度固定为70%，表示颜色比较明亮但不刺眼。
this.life = 0;
this.maxLife = 10;
this.fadeInDuration = 1;
this.fadeOutDuration = 2;
this.isActive = true;
lyricsCtx.font = `${this.size}px 微软雅黑 `;
this.textWidth = lyricsCtx.measureText(this.text).width;
}
update(deltaTime) {
this.life += deltaTime;
this.x += this.vx;
this.y += this.vy;
if (this.x < 10) {
this.x = 10;
this.vx *= -0.8;
} else if (this.x + this.textWidth > dom.lyricsCanvas.width - 10) {
this.x = dom.lyricsCanvas.width - this.textWidth - 10;
this.vx *= -0.8;
}
if (this.y < this.size + 10) {
this.y = this.size + 10;
this.vy *= -0.8;
} else if (this.y > dom.lyricsCanvas.height - 10) {
this.y = dom.lyricsCanvas.height - 10;
this.vy *= -0.8;
}
if (this.life < this.fadeInDuration) {
this.opacity = (this.life / this.fadeInDuration) * this.targetOpacity;
} else if (this.life > this.maxLife - this.fadeOutDuration) {
this.opacity = ((this.maxLife - this.life) / this.fadeOutDuration) * this.targetOpacity;
} else {
this.opacity = this.targetOpacity;
}
}
draw() {
if (this.opacity <= 0) return;
lyricsCtx.save();
lyricsCtx.globalAlpha = this.opacity;
lyricsCtx.font = `${this.size}px 微软雅黑`;
lyricsCtx.fillStyle = '#000';
for (let i = 1; i <= 3; i++) {
lyricsCtx.fillText(this.text, this.x + i, this.y + i);
}
lyricsCtx.fillStyle = this.color;
lyricsCtx.fillText(this.text, this.x, this.y);
lyricsCtx.shadowBlur = 10;
lyricsCtx.shadowColor = this.color;
lyricsCtx.shadowOffsetX = 0;
lyricsCtx.shadowOffsetY = 0;
lyricsCtx.restore();
}
startFadeOut() {
this.maxLife = this.life + this.fadeOutDuration;
this.isActive = false;
}
}
class LastLyric {
constructor(text) {
this.text = text;
this.opacity = 0;
this.size = 40;
this.color = "#fff666";
this.isActive = false;
this.fadeInDuration = 2;
this.fadeOutDuration = 2;
this.life = 0;
this.maxLife = 40;
}
update(deltaTime) {
this.life += deltaTime;
if (!this.isActive) {
this.opacity = 0;
return;
}
if (this.life < this.fadeInDuration) {
this.opacity = (this.life / this.fadeInDuration);
} else if (this.life > this.maxLife - this.fadeOutDuration) {
this.opacity = ((this.maxLife - this.life) / this.fadeOutDuration);
if (this.opacity <= 0) {
this.deactivate();
}
} else {
this.opacity = 1;
}
}
draw() {
if (!this.isActive || this.opacity <= 0) return;
lyricsCtx.save();
lyricsCtx.globalAlpha = this.opacity;
lyricsCtx.font = `bold ${this.size}px 微软雅黑`;
lyricsCtx.textAlign = 'center';
lyricsCtx.textBaseline = '10';
lyricsCtx.fillStyle = '#000';
lyricsCtx.fillText(this.text, dom.lyricsCanvas.width / 2 + 2, dom.lyricsCanvas.height / 2 + 2);
lyricsCtx.fillStyle = this.color;
lyricsCtx.fillText(this.text, dom.lyricsCanvas.width / 2, dom.lyricsCanvas.height / 2);
lyricsCtx.shadowBlur = 15;
lyricsCtx.shadowColor = this.color;
lyricsCtx.restore();
}
activate() {
this.isActive = true;
this.life = 0;
this.opacity = 0;
}
deactivate() {
this.isActive = false;
this.opacity = 0;
this.life = 0;
}
}
const lastLyric = new LastLyric("谢谢聆听！");
let isLastLyricActive = false;
// 核心动画循环
let lastTime = 0;
function animate(timestamp) {
if (audio.paused) {
requestAnimationFrame(animate);
return;
}
const deltaTime = (timestamp - lastTime) / 1000;
lastTime = timestamp;
lyricsCtx.clearRect(0, 0, dom.lyricsCanvas.width, dom.lyricsCanvas.height);
const currentAudioTime = audio.currentTime;
let targetLyricIndex = -1;
for (let i = 0; i < lyricsList.length; i++) {
if (currentAudioTime >= lyricsList.time) {
targetLyricIndex = i;
} else {
break;
}
}
if (targetLyricIndex !== -1 && targetLyricIndex !== currentLyricIndex) {
if (targetLyricIndex !== lyricsList.length - 1) {
lastLyric.deactivate();
isLastLyricActive = false;
}
const targetLyric = lyricsList;
if (targetLyricIndex === lyricsList.length - 1) {
lastLyric.activate();
isLastLyricActive = true;
} else {
const newLyric = new FloatingLyric(targetLyric.text);
const nextLyricTime = lyricsList?.time || (audio.duration || currentAudioTime + 5);
newLyric.maxLife = nextLyricTime - targetLyric.time + 1;
floatingLyrics.push(newLyric);
}
currentLyricIndex = targetLyricIndex;
}
floatingLyrics = floatingLyrics.filter(lyric => {
lyric.update(deltaTime);
lyric.draw();
return lyric.life < lyric.maxLife && lyric.opacity > 0.01;
});
lastLyric.update(deltaTime);
lastLyric.draw();
if (audio.duration) {
const progressPercent = (audio.currentTime / audio.duration) * 100;
dom.progress.value = progressPercent;
updateTimeDisplay();
}
requestAnimationFrame(animate);
}
dom.playBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play().then(() => {
dom.playBtn.textContent = '暂停';
if (isLastLyricActive) {
lastLyric.deactivate();
isLastLyricActive = false;
}
lastTime = performance.now();
requestAnimationFrame(animate);
}).catch(e => console.error('音频播放失败:', e));
} else {
audio.pause();
dom.playBtn.textContent = '播放';
}
});
dom.progress.addEventListener('input', () => {
if (!audio.duration) return;
const targetTime = (dom.progress.value / 100) * audio.duration;
audio.currentTime = targetTime;
currentLyricIndex = -1;
floatingLyrics = [];
lastLyric.deactivate();
isLastLyricActive = false;
updateTimeDisplay();
let targetLyricIndex = -1;
for (let i = 0; i < lyricsList.length; i++) {
if (targetTime >= lyricsList.time) {
targetLyricIndex = i;
} else {
break;
}
}
if (targetLyricIndex !== -1) {
const targetLyric = lyricsList;
if (targetLyricIndex === lyricsList.length - 1) {
lastLyric.activate();
isLastLyricActive = true;
} else {
const newLyric = new FloatingLyric(targetLyric.text);
newLyric.life = targetTime - targetLyric.time;
const nextLyricTime = lyricsList?.time || (audio.duration || targetTime + 5);
newLyric.maxLife = nextLyricTime - targetLyric.time + 1;
if (newLyric.life > newLyric.maxLife) {
newLyric.startFadeOut();
}
floatingLyrics.push(newLyric);
}
}
dom.playBtn.textContent = audio.paused ? '播放' : '暂停';
});
audio.addEventListener('ended', () => {
audio.currentTime = 0;
audio.play();
dom.playBtn.textContent = '暂停';
currentLyricIndex = -1;
floatingLyrics = [];
lastLyric.deactivate();
isLastLyricActive = false;
lastTime = performance.now();
requestAnimationFrame(animate);
});
audio.addEventListener('loadedmetadata', updateTimeDisplay);
audio.play().then(() => {
dom.playBtn.textContent = '暂停';
lastTime = performance.now();
requestAnimationFrame(animate);
}).catch(() => {
console.log('自动播放被阻止，请点击播放按钮开始');
dom.timeDisplay.textContent = '00:00 / --:--';
});
</script>

寒冬残荷 发表于 2025-10-25 20:23

2025年10月22日是红军长征胜利89周年，特学唱了《人民军队忠于党》这首红歌，现分享给大家。

漫云儿 发表于 2025-10-25 20:26

是AI制作吗？很棒！

漫云儿 发表于 2025-10-25 20:26

唱的有气势！{:4_204:}

寒冬残荷 发表于 2025-10-25 20:47

漫云儿 发表于 2025-10-25 20:26
是AI制作吗？很棒！

感谢云儿临贴！是的，我的作品的背景都是我用AI文生视频或图生视频的。目的是学习贴切题意的MV{:5_117:}

寒冬残荷 发表于 2025-10-25 20:50

漫云儿 发表于 2025-10-25 20:26
唱的有气势！

是不是很像男人声音？{:5_106:}

漫云儿 发表于 2025-10-25 21:02

寒冬残荷 发表于 2025-10-25 20:50
是不是很像男人声音？

哪有！是浑厚的声音，女中音，很好听。合适唱草原歌曲。比如德德玛的歌，，很适合你唱。

红影 发表于 2025-10-25 21:28

这首红歌还挺冷门的，寒冬残荷为了纪念红军长征胜利89周年，特地学唱的呢，真不容易。
给寒冬残荷点赞{:4_199:}

红影 发表于 2025-10-25 21:30

视频制作也漂亮，还是寒冬残荷自己照片做的AI视频呢，很漂亮。
欣赏寒冬残荷好帖{:4_199:}

偶然~ 发表于 2025-10-26 10:19

演绎精彩

偶然~ 发表于 2025-10-26 10:20

歌声大气

偶然~ 发表于 2025-10-26 10:20

感谢寒冬残荷带来的精彩，辛苦了！祝你开心幸福、阖家幸福！

澜天 发表于 2025-10-26 11:43

寒冬残荷 发表于 2025-10-25 20:23
2025年10月22日是红军长征胜利89周年，特学唱了《人民军队忠于党》这首红歌，现分享给大家。

视频里的主人公
大概就是歌者了
{:4_178:}

寒冬残荷 发表于 2025-10-27 14:10

红影 发表于 2025-10-25 21:30
视频制作也漂亮，还是寒冬残荷自己照片做的AI视频呢，很漂亮。
欣赏寒冬残荷好帖

谢谢红影管管的鼓励和支持。是的，我的许多AI视频都是用我自己的照片制作的，用别人的担心侵权。{:5_106:}

所以，我不喜欢别人用我制作的视频！

寒冬残荷 发表于 2025-10-27 14:10

偶然~ 发表于 2025-10-26 10:20
感谢寒冬残荷带来的精彩，辛苦了！祝你开心幸福、阖家幸福！

谢谢偶然版主的鼓励和支持。

寒冬残荷 发表于 2025-10-27 14:11

澜天 发表于 2025-10-26 11:43
视频里的主人公
大概就是歌者了

谢谢您的鼓励和支持。是的，我的许多AI视频都是用我自己的照片制作的，用别人的担心侵权。

所以，我不喜欢别人用我制作的视频！

偶然~ 发表于 2025-10-27 17:25

寒冬残荷 发表于 2025-10-27 14:10
谢谢偶然版主的鼓励和支持。

健康幸福

澜天 发表于 2025-10-27 18:50

寒冬残荷 发表于 2025-10-27 14:11
谢谢您的鼓励和支持。是的，我的许多AI视频都是用我自己的照片制作的，用别人的担心侵权。

所以，我不 ...

知道是你
别人一般不会拿去用的

红影 发表于 2025-10-29 21:16

寒冬残荷 发表于 2025-10-27 14:10
谢谢红影管管的鼓励和支持。是的，我的许多AI视频都是用我自己的照片制作的，用别人的担心侵权。{:5_106: ...

理解，随意使用别人的视频，本身就不应该呢。{:4_187:}

偶然~ 发表于 2025-11-16 16:19

寒冬残荷唱的太棒了！我听的都醉了！

查看完整版本: 翻唱：《人民军队忠于党》