贺岁 天籁合鸣
本帖最后由 霜染枫丹 于 2025-12-31 19:43 编辑 <br /><br /><style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
--offsetX: 81px;
--bg: url('https://cccimg.com/view.php/7ef504a04ccf9ebf9e7bef563fce442e.gif') no-repeat center/cover;
}
.title-text {
font-size: 40px;
cursor: pointer;
transition: .5s;
animation: flash .5s infinite alternate var(--state);
}
.title-text:hover {
transform: scale(1.2) rotate(15deg);
}
/* 椭圆遮罩样式 */
.pd-vid {
opacity: 1;
--ellipse-w: 15%;
--ellipse-h: 20%;
--ellipse-x:50%;
--ellipse-y: 80%;
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; }
}
/* 歌词显示样式：顶部靠右单行显示 */
.lyrics-container {
position: absolute;
top: 20px;
right: 20px; /* 改为右侧定位，更简单可靠 */
left: auto; /* 取消左侧设置 */
width: auto; /* 自适应宽度 */
text-align: right;
z-index: 99;
pointer-events: none;
padding: 10px 20px;
border-radius: 10px;
max-width: 80%; /* 防止过长 */
}
.lyrics-text {
font-size: 30px;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 隐藏原生音频播放条 */
audio {
display: none !important;
}
</style>
<div id="pa" class="pa">
<!-- 歌词容器 -->
<div class="lyrics-container">
<div id="lyrics-text" class="lyrics-text">点击标题开始播放</div>
</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: 'https://cccimg.com/view.php/1db11bb3029377bb42c428c838e3eaeb.mp3'
});
const audio = audioEl.el || document.querySelector('audio');
// 获取视频元素
const videoEl = tz.add('video', 'https://cccimg.com/view.php/6f6484b61a8ec07b84dcc2395870e31f.mp4', 'pd-vid', {
src: 'https://cccimg.com/view.php/3f3de3ce5b5b2ac2358d5df215230ab8.mp4',
autoplay: true,
muted: true,
loop: true
});
tz.add('div', 'player', 'wrap100', {style: 'bottom: 20px'});
const txtAr = '贺岁天籁合鸣'.split('');
const pos = tz.ringPos(txtAr.length, {cx: 50, cy: 50, r1: 180, r2: 90, a: 180, startA: -180, offsetX: 15});
pos.forEach((p, k) => {
tz.add('span', '', 'title-text', {style: `left: ${p}px; top: ${p}px; color: ${tz.colorHSL()}`})
.text(txtAr)
.to(player)
.playmp3(() => {
// 点击标题时播放音频（解除静音）
audio.muted = false;
audio.play().catch(e => {
console.log('播放失败，需要用户交互');
lyricsText.textContent = '请点击标题播放';
});
});
});
tz.bgprog().style('width: 120px; bottom: 25px; color: cyan');
tz.fs().style('top: 30px');
// ------------------- 歌词配置和同步逻辑 -------------------
const lyrics = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
const lyricsText = document.getElementById('lyrics-text');
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('play', () => {
lyricsText.textContent = lyrics;
});
// 音频播放结束时
audio.addEventListener('ended', () => {
lyricsText.textContent = '播放结束';
});
// ------------------- 椭圆拖拽移动 + 滚轮缩放逻辑 -------------------
const vidElement = document.querySelector('.pd-vid');
let isDragging = false;
let startX = 0;
let startY = 0;
let startEllipseX = 70;
let startEllipseY = 50;
vidElement.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
startEllipseX = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-x'));
startEllipseY = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-y'));
vidElement.style.userSelect = 'none';
vidElement.style.transition = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const deltaX = (e.clientX - startX) / vidElement.offsetWidth * 100;
const deltaY = (e.clientY - startY) / vidElement.offsetHeight * 100;
const newX = Math.max(0, Math.min(100, startEllipseX + deltaX));
const newY = Math.max(0, Math.min(100, startEllipseY + deltaY));
vidElement.style.setProperty('--ellipse-x', `${newX}%`);
vidElement.style.setProperty('--ellipse-y', `${newY}%`);
});
document.addEventListener('mouseup', () => {
isDragging = false;
vidElement.style.userSelect = '';
vidElement.style.transition = '';
});
vidElement.addEventListener('wheel', (e) => {
e.preventDefault();
let ellipseW = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-w'));
let ellipseH = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-h'));
const step = e.deltaY > 0 ? -2 : 2;
const newW = Math.max(10, Math.min(100, ellipseW + step));
const newH = Math.max(10, Math.min(100, ellipseH + step));
vidElement.style.setProperty('--ellipse-w', `${newW}%`);
vidElement.style.setProperty('--ellipse-h', `${newH}%`);
}, { passive: false });
</script>
古稀贺岁·辞旧迎新霜染枫丹
岁聿云暮送壬寅乙巳辞尘丙午临风雨一程勤作伴霜华几度志如金回望岁月无遗恨细数耕耘有赤心古稀再踏新程路笑揽春风贺岁深
我和静静正在聆听中。。。。。{:4_205:}{:4_208:}{:4_206:} 千言万语一句实在话：祝大姐新年快乐，阖家安康，万事如意！特别问好咱姐夫，俺们虽然未蒙面，但是战友呢！敬战友姐夫三杯{:4_176:}{:4_176:}{:4_176:} 本帖最后由 霜染枫丹 于 2025-12-31 22:14 编辑
樵歌 发表于 2025-12-31 20:59
千言万语一句实在话：祝大姐新年快乐，阖家安康，万事如意！特别问好咱姐夫，俺们虽然未蒙面，但是战友呢！ ...
谢谢小https://www.yueyijyw.com/data/attachment/forum/202512/31/220300v6644bjbmq6yeeaz.png樵哥，吴彤得发歌我很喜欢听。这首歌有好几个版本，我挺喜欢这个版本。跨年了，元旦快乐！！{:4_204:}{:4_190:}
非常美好的贺岁帖子。
祝枫丹元旦快乐{:4_177:} 红影 发表于 2026-1-1 11:01
非常美好的贺岁帖子。
祝枫丹元旦快乐
感谢红影发支持鼓励，下午好！我们一起跨年了，特别高兴！恭祝红影2026吉祥平安，顺心顺意，前程锦绣，阖家幸福！
https://www.yueyijyw.com/data/attachment/forum/202601/01/150428tj3k96k683kd0u9f.png
霜染枫丹 发表于 2026-1-1 15:48
感谢红影发支持鼓励，下午好！我们一起跨年了，特别高兴！恭祝红影2026吉祥平安，顺心顺意，前程锦绣，阖 ...
谢谢枫丹的美好祝福，很开心，在新年的第一天，我们相守在一起{:4_187:} 来欣赏霜染枫丹的精品佳作！
音画太棒了！
背景歌声动听
制作大气
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢霜染枫丹带来的精彩，辛苦了！祝你开心幸福、阖家安康！
页:
[1]