花又落——张大伟杨燕婷演唱 - AI创作交流 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › AI创作交流 › 花又落——张大伟杨燕婷演唱

霜染枫丹 发表于 2026-5-25 20:02

花又落——张大伟杨燕婷演唱

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
   --offsetX: 81px;
   --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/05/25/6a14394075063.gif') no-repeat center/cover;
}
/* 图片播放按钮 */
.play-btn {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   width: 20%;
   height: 20%;
   border-radius: 50%;

   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 100;
   transition: all 0.3s ease;
   overflow: hidden;
}
.play-btn:hover {
   transform: translateX(-50%) scale(1.15);

}
.play-img {
   width: 65%;
   height: 65%;
   object-fit: contain;
   pointer-events: none;
}

/* 椭圆遮罩样式 */
.pd-vid {
   opacity: 1;
   --ellipse-w: 15%;
   --ellipse-h: 20%;
   --ellipse-x:80%;
   --ellipse-y: 50%;
   clip-path: ellipse(var(--ellipse-w) var(--ellipse-h) at var(--ellipse-x) var(--ellipse-y));
   cursor: move;
   position: relative;
}
@keyframes flash {
   from { opacity: 1; }
   to { opacity: 0.7; }
}
/* 旋转动画 */
@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

/* 播放状态下的旋转效果 */
.play-img.playing {
   animation: rotate 8s linear infinite;
}

/* 歌词显示样式：右侧竖式显示 */
.lyrics-container {
   position: absolute;
   top: 40%;
   right: 20px;
   transform: translateY(-50%);
   width: auto;
   text-align: center;
   z-index: 99;
   pointer-events: none;
   padding: 10px 20px;
   border-radius: 10px;
   max-height: 80vh;
   overflow-y: auto;
   writing-mode: vertical-rl;
   text-orientation: mixed;
}
.lyrics-text {
   font-size: 36px;
   color: #ef5b9c;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
   font-family: "LiSu", "隶书", serif;
   margin: 0 4px;
   line-height: 1.2;
   white-space: pre-line;
   overflow-wrap: break-word;
}
/* 隐藏原生音频播放条 */
audio {
   display: none !important;
}
</style>

<div id="pa" class="pa">
<div class="lyrics-container">
   <div id="lyrics-text" class="lyrics-text"></div>
</div>
<div id="playBtn" class="play-btn">
   <img src="https://ff.xiaoqiaodali.top:5401/i/2026/05/16/6a08360e4889f.png" class="play-img">
</div>
</div>

<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');

const audioEl = tz.add('audio', '', '', {
   src: 'http://cccimg.com/view.php/003697e9190c939589186056f2fbb533.mp3'
});
const audio = audioEl.el || document.querySelector('audio');

const videoEl = tz.add('video', 'http://cccimg.com/view.php/3e8ea5a337c2db1ae322937e2c90d16d.mp4', 'pd-vid', {
   src: '',
   autoplay: true,
   muted: true,
   loop: true
});

tz.bgprog().style('width: 380px; bottom: 20px; color: cyan');
tz.fs().style('top: 30px');

const playBtn = document.getElementById('playBtn');
const lyricsText = document.getElementById('lyrics-text');
const playImg = document.querySelector('.play-img');

// —————— 核心修改：页面加载后自动播放音乐 + 自动旋转 ——————
window.addEventListener('load', () => {
   audio.muted = false;
   audio.play().then(() => {
         playImg.classList.add('playing'); // 同步旋转
         lyricsText.textContent = lyrics;
   }).catch(err => {
         lyricsText.textContent = '点击图标播放音乐';
   });
});

// 点击按钮切换播放/暂停 + 旋转/停止
playBtn.addEventListener('click', () => {
   if (audio.paused) {
         audio.play();
         playImg.classList.add('playing');
   } else {
         audio.pause();
         playImg.classList.remove('playing');
   }
});

const lrcString = `
花又落
作词：许冬子
作曲:范春华
演唱：张大伟杨燕婷
岁月长河纷繁终寂寞
淘尽浪花千万朵
有你也有我
深情凝眸几多
雨露滋润几多
星辉斑斓几多
尘缘牵挂几多
爱己过梦已过
昨日春满园
今夕花又落
叶凋零花又落
缘来有因果
缘去无对错
时光蹉跎驻足却漂泊
山重水复总沉默
懂你也懂我
深情凝眸几多
雨露滋润几多
星辉斑斓几多
尘缘牵挂几多
爱己过梦已过
昨日春满园
今夕花又落
叶凋零花又落
缘来有因果
缘去无对错
爱已过梦已过
昨日春满园
今夕花又落
叶凋零花又落
缘来有因果
缘去无对错
缘来有因果
缘去无对错‌‌‌
`;

function parseLRC(lrcText) {
const lines = lrcText.split('\n');
const lyricsArray = [];
const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2})\]/;

for (let line of lines) {
   const match = line.match(timeRegex);
   if (match) {
         const minutes = parseInt(match);
         const seconds = parseInt(match);
         const centiseconds = parseInt(match);
         const timeInSeconds = minutes * 60 + seconds + centiseconds / 100;
         const text = line.replace(timeRegex, '').trim();
         if (text) {
            lyricsArray.push();
         }
   }
}
return lyricsArray;
}

const lyrics = parseLRC(lrcString);
let currentLyricIndex = 0;

audio.addEventListener('timeupdate', () => {
const currentTime = audio.currentTime;
for (let i = lyrics.length - 1; i >= 0; i--) {
   if (currentTime >= lyrics) {
         if (currentLyricIndex !== i) {
            currentLyricIndex = i;
            lyricsText.textContent = lyrics;
         }
         break;
   }
}
});

audio.addEventListener('ended', () => {
lyricsText.textContent = '播放结束';
playImg.classList.remove('playing');
});

const vidElement = document.querySelector('.pd-vid');
let isDragging = false;
let startX, startY;
let startEllipseX, startEllipseY;

vidElement.addEventListener('mousedown', (e) => {
   isDragging = true;
   startX = e.clientX;

   startEllipseX = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-x'));

   vidElement.style.userSelect = 'none';

});

document.addEventListener('mousemove', (e) => {
   if (!isDragging) return;
   const deltaX = (e.clientX - startX) / vidElement.offsetWidth * 100;

   const newX = Math.max(0, Math.min(100, startEllipseX + deltaX));

   vidElement.style.setProperty('--ellipse-x', `${newX}%`);

});

document.addEventListener('mouseup', () => {
   isDragging = false;
   vidElement.style.userSelect = '';

});

vidElement.addEventListener('wheel', (e) => {
   e.preventDefault();
   let ellipseW = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-w'));

   const step = e.deltaY > 0 ? -2 : 2;
   const newW = Math.max(10, Math.min(100, ellipseW + step));

   vidElement.style.setProperty('--ellipse-w', `${newW}%`);

}, { passive: false });
</script>

霜染枫丹 发表于 2026-5-25 20:10

本帖最后由霜染枫丹于 2026-5-25 22:47 编辑 <br /><br />{:4_204:} {:4_204:} {:4_172:} {:4_172:}

霜染枫丹 发表于 2026-5-25 20:22

本帖最后由霜染枫丹于 2026-5-25 20:24 编辑

花又落

作词：许冬子
作曲:范春华
演唱：张大伟杨燕婷
岁月长河纷繁终寂寞
淘尽浪花千万朵
有你也有我
深情凝眸几多
雨露滋润几多
星辉斑斓几多
尘缘牵挂几多
爱己过梦已过
昨日春满园
今夕花又落
叶凋零花又落
缘来有因果
缘去无对错
时光蹉跎驻足却漂泊
山重水复总沉默
懂你也懂我
深情凝眸几多
雨露滋润几多
星辉斑斓几多
尘缘牵挂几多
爱己过梦已过
昨日春满园
今夕花又落
叶凋零花又落
缘来有因果
缘去无对错
爱已过梦已过
昨日春满园
今夕花又落
叶凋零花又落
缘来有因果
缘去无对错
缘来有因果
缘去无对错‌‌‌

也曾年轻 发表于 2026-5-25 20:54

本帖最后由也曾年轻于 2026-5-25 22:25 编辑 <br /><br />https://editor-img.888ban.com/gif_complete_img/2021-12-10/small_38497c74dbaf564c56f16e6079946836.png?auth_key=2277561600-0-0-69fe3a67d6bc3e8288fbd367fcbb860e

</script>

红影发表于 2026-5-25 21:32

二楼的好像出问题呢，让后面的版面都受影响了呢{:4_204:}

霜染枫丹 发表于 2026-5-25 21:46

红影发表于 2026-5-25 21:32
二楼的好像出问题呢，让后面的版面都受影响了呢

二楼是我为这首歌做的几幅图，发上来就不显示卡住了，是的，后面就都不显示了，发上来4幅显示一幅。您看看就这样还是把帖子删了我再重发，图片不发也可以

霜染枫丹 发表于 2026-5-25 21:47

也曾年轻发表于 2026-5-25 20:54

谢谢也曾年轻的支持，晚上好~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-25 22:31

也曾年轻发表于 2026-5-25 22:30
二楼可以改下

我打不开了，请客容易送客难{:4_173:}{:4_204:}

也曾年轻 发表于 2026-5-25 22:41

霜染枫丹发表于 2026-5-25 22:31
我打不开了，请客容易送客难

或编辑链接

https://www.huachaowang.com/forum.php?mod=post&action=edit&fid=103&tid=93202&pid=2574218

霜染枫丹 发表于 2026-5-25 22:49

本帖最后由霜染枫丹于 2026-5-25 22:53 编辑

也曾年轻发表于 2026-5-25 22:41
或编辑链接

https://www.huachaowang.com/forum.php?mod=post&action=edit&fid=103&tid=93202&pid=25 ...
太感谢也曾年轻了！！当那个大白框消失的时候，真是痛快~~

霜染枫丹 发表于 2026-5-25 22:52

也曾年轻发表于 2026-5-25 22:37
查看源代码 -->找第二个

我把这个收藏了，您费心了，特别感谢~~

页: [1]

查看完整版本: 花又落——张大伟杨燕婷演唱