寒冬残荷 发表于 2025-11-3 22:39

《贺花潮论坛AI专区开启》(AI歌曲）

<style>
#papa{position:relative; margin:90px auto 50px calc(50% - 721px); width:1280px; height:720px; background:url(https://cccimg.com/view.php/34b136f8abb7639be401eced1bcde070.jpg)0 0/100% 100%; z-index:1; color: #f00; box-shadow:3px 3px 20px #000;}
#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:9;width:100%;height:100%;top:0px;left:0px;}

.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://cccimg.com/view.php/6ac41d6f556cd25ae5334506f738051d.mp4" autoplay loop></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/af96ed627dee1ed55792b9b1f7c94751.mp3" autoplay loop ></audio>
<span id="bt">贺花潮论坛AI专区开启</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 = `《贺花潮论坛AI专区开启》
词曲：豆包AI
花潮论坛AI专区闪耀登场
我们在这里探索智能的新方向
科技的光芒把未来点亮
创新的思维在碰撞中激荡
激动人心的时刻即将开场
我们在这里开启智慧的窗
新的征程会有新的希望
新的挑战会有新的成长
我们都是追光者
在这个时代我们勇敢向前奔
新的思路会有新的突破
新的观念会有新的乾坤
我们都是追光者
在这个时代我们大胆去探索
新的技术会有新的创造
新的未来会新的的奇迹
　　
激动人心的时刻即将开场
我们在这里开启智慧的窗
新的征程会有新的希望
新的挑战会有新的成长
我们都是追梦人
在这个时代我们勇敢向前奔
新的思路会有新的突破
新的观念会有新的乾坤
我们都是追光者
在这个时代我们大胆去探索
新的技术会有新的创造
新的未来会有新的奇迹
谢谢观看！

`;
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-3 22:41

我也来玩玩AI制作歌曲。{:5_106:}

偶然~ 发表于 2025-11-3 23:14


寒冬残荷厉害{:4_199:}

偶然~ 发表于 2025-11-3 23:15

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

偶然~ 发表于 2025-11-3 23:16

唱的太棒了！我听的都醉了！

偶然~ 发表于 2025-11-3 23:16

太棒啦~玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

红影 发表于 2025-11-4 23:28

寒冬残荷 发表于 2025-11-3 22:41
我也来玩玩AI制作歌曲。

太厉害了，想做什么就能做出来，这也是本事呢。
这首歌很好听呢，这个音画制作也好{:4_199:}

红影 发表于 2025-11-4 23:28

寒冬残荷学东西好快啊，好羡慕你{:4_187:}

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

再来欣赏寒冬残荷精彩音画
页: [1]
查看完整版本: 《贺花潮论坛AI专区开启》(AI歌曲）