论坛 › 人机音画视频 › 《论坛心灵之园》

寒冬残荷 发表于 2025-11-4 21:56

《论坛心灵之园》

本帖最后由 寒冬残荷 于 2025-11-4 23:08 编辑 <br /><br /><style>
#papa{position:relative; margin:90px auto 50px calc(50% - 721px); width:1280px; height:720px; background: url('https://pic1.imgdb.cn/item/6909fa653203f7be00d0db83.jpg') no-repeat 0 0/100% 100%;z-index:1; color: #f00; box-shadow:3px 3px 20px #000;overflow:hidden;}
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#fff; opacity: .7; cursor: pointer;z-index: 11; }

#vid {position:absolute; z-index:1;width:115%;height:115%;top:-15%;left:-10px; opacity: 0.3 }

.lrc{position:absolute;bottom:50px;left:0px;width:70%;height:80px;z-index:9;overflow:hidden;display:block;padding-top: 10px;}
.lrc #ullrc{width:100%;padding:0;list-style:none;transition:0.3s all ease;margin: 0;}
.lrc #ullrc li{height:50px;line-height:50px;font-family:KaiTi;font-size:0px;color:#000078;font-weight:normal;transition:.3s all ease;list-style-type: none;text-align:center; display:block;width:100%;filter:drop-shadow(#00bfff 1px 0 0) drop-shadow(#00bfff 0 1px 0) drop-shadow(#00bfff -1px 0 0) drop-shadow(#00bfff 0 -1px 0);margin:0 auto;letter-spacing:5px;}
.lrc #ullrc li.active{font-size:54px;font-weight:700;background-image: linear-gradient(to right, #f00, #0f0);color: transparent;background-clip:text;-webkit-background-clip: text;text-align:center;transform:translate(0%,0%);filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#ccc -2px 0 0) drop-shadow(#ccc 0 -2px 0);}

#bt{width:200px;overflow:hidden;color:#ff0;position:absolute;right:50px;bottom:20px;font-size:15px;z-index:9;}
</style>
<div id="papa">
<videoid="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e8b08c6531.mp4" autoplay loop muted ></video>
<span id="fullscreen">全屏欣赏</span>
<div class="lrc"><ul id="ullrc"></ul></div>
<css-doodle   id="mplayer">
:doodle {z-index:80;@grid: 2 / 260px 80px;position: absolute;bottom: 30px;right:30px;   --prog:0%;--size: 50px;--ttmsg1: '00:00';--ttmsg2: '00:00';color: var(--color);--color:radial-gradient(#ff0000, #DC143C, #adff2f, #FA8072, #feca57);--state: paused; }
/* 时间信息 : 左 */
@nth(1) { @place: 10% 80%; :after { content: var(--ttmsg1); } }
/* 控制器 */
@nth(2) { @size: var(--size);clip-path:@shape(points:360; r:abs.sin(6.0t)*1.14;);@place: 45% 35%;background: var(--color);animation: rot 6s infinite linear var(--state); }
/* 时间信息 : 右 */
@nth(3) { @place: 80% 80%; :after { content: var(--ttmsg2); } }
/* 进度条 */
@nth(4) { @place: 40% 80%; @size: 100% 4px; background: #bbb; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: var(--color); } }
@keyframes rot { to { transform: rotate(1turn); } }/* 控制器旋转 */
</css-doodle>
<audio id="aud" src="https://cccimg.com/view.php/6ddf37145783f1a1880c4380c3fabb70.mp3" autoplay loop ></audio>
<span id="bt">《论坛心灵之园》</span>
</div>
<div style="height:100px;"></div>

<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
(function() {let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
});
mplayer.onclick = () => {
if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
if(clickIdx === 2) aud.currentTime = progChg;
}
mplayer.onmousemove = (e) => {
let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
mplayer.style.cursor = cursors;
if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
}
})();
</script>

<script >
var lrc = `
《论坛心灵之园》
词：寒冬残荷&豆包
曲：豆包
不同的语言 在这里交流碰撞
不同的文化 在这里相互影响
心灵的相通 是我们最美的期望
真诚的互动 是我们永远的乐章
交流的地方 我们共同的向往
每一次沟通 都闪耀智慧的光芒
交流的地方 我们耕耘的土壤
每一次分享 都书写情谊的诗行
　　
情感的交融 让我们不再迷茫
思想的火花 让我们充满希望
世界的多彩 是我们探索的方向
心灵的契合 是我们追求的远方
交流的地方 我们成长的课堂
每一次互动 都点燃梦想的火光
交流的地方 我们温馨的海港
每一次远航 都承载美好的愿望
交流的地方 我们成长的课堂
每一次互动 都点燃梦想的火光
交流的地方 我们温馨的海港
每一次远航 都承载美好的愿望
交流的地方 我们成长的课堂
每一次互动 都点燃梦想的火光
谢谢欣赏！　

`;
function $(id) {
return document.getElementById(id);
}
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 50, lrc_ul_height = 50;   
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
lrc.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>lrc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => lrc.style.animationPlayState = 'paused');
</script>

偶然~ 发表于 2025-11-4 21:59

音画唯美

偶然~ 发表于 2025-11-4 22:00

歌声动听

偶然~ 发表于 2025-11-4 22:00

制作大气

偶然~ 发表于 2025-11-4 22:01

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

寒冬残荷 发表于 2025-11-4 22:02

《论坛心灵之园》
词：寒冬残荷&豆包
曲：豆包
不同的语言 在这里交流碰撞
不同的文化 在这里相互影响
心灵的相通 是我们最美的期望
真诚的互动 是我们永远的乐章
交流的地方 我们共同的向往
每一次沟通 都闪耀智慧的光芒
交流的地方 我们耕耘的土壤
每一次分享 都书写情谊的诗行
　　
情感的交融 让我们不再迷茫
思想的火花 让我们充满希望
世界的多彩 是我们探索的方向
心灵的契合 是我们追求的远方
交流的地方 我们成长的课堂
每一次互动 都点燃梦想的火光
交流的地方 我们温馨的海港
每一次远航 都承载美好的愿望
交流的地方 我们成长的课堂
每一次互动 都点燃梦想的火光
交流的地方 我们温馨的海港
每一次远航 都承载美好的愿望
交流的地方 我们成长的课堂
每一次互动 都点燃梦想的火光

寒冬残荷 发表于 2025-11-4 22:16

本帖最后由 寒冬残荷 于 2025-11-4 23:10 编辑

偶然~ 发表于 2025-11-4 21:59
音画唯美
谢谢偶然超版，我正在试贴，{:5_106:}不知道为什么，原来的代码直接放这里LRC歌词不显示，只好改代码换另一种LRC显示方式。

寒冬残荷 发表于 2025-11-4 22:18

偶然~ 发表于 2025-11-4 22:00
歌声动听

用<iframe>标签就不能自动播放，是不是这样？

红影 发表于 2025-11-5 19:56

又是人机合作的歌曲呢，带着花潮特色。这个制作太好了。
感谢寒冬残荷好帖，花潮有你真好{:4_199:}

红影 发表于 2025-11-5 20:00

寒冬残荷 发表于 2025-11-4 22:02
《论坛心灵之园》
词：寒冬残荷&豆包
曲：豆包


这歌还真好听，AI的谱曲和演唱都那么好。
这个应该选 人机歌曲 的分类才是{:4_204:}

小九 发表于 2025-11-5 20:03

很好听呢，居然豆包有这样的功效，能做曲写词，太神奇了{:4_199:}

寒冬残荷 发表于 2025-11-6 15:13

红影 发表于 2025-11-5 19:56
又是人机合作的歌曲呢，带着花潮特色。这个制作太好了。
感谢寒冬残荷好帖，花潮有你真好

谢谢红影管管的鼓励和支持！

豆包AI制作歌曲比AI图、生视频还容易，而且现还免费。

生视频我感觉做得好的纳米AI现在没有免费送积分的了。即梦现还送积分，但送的积分每天清零，而每天送的积分都不够制作时长长一点的视频。小云雀和即梦相似……

寒冬残荷 发表于 2025-11-6 15:15

小九 发表于 2025-11-5 20:03
很好听呢，居然豆包有这样的功效，能做曲写词，太神奇了

谢谢小九超版的鼓励和支持。

是的，豆包有这个功能，而且现在还免费的，快快去学一学。{:5_106:}

小九 发表于 2025-11-6 15:34

寒冬残荷 发表于 2025-11-6 15:15
谢谢小九超版的鼓励和支持。

是的，豆包有这个功能，而且现在还免费的，快快去学一学。

好的哈，谢谢寒冬残荷{:4_187:}

偶然~ 发表于 2025-11-17 11:23

再来欣赏寒冬残荷精彩音画

查看完整版本: 《论坛心灵之园》