桃花春水 （播放器）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
--offsetX: 81px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/04/16/69e100c5354c0.gif') no-repeat center/cover;
}
/* 图片播放按钮 */
.play-btn {
position: absolute;
bottom: 30px;
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: 30%;
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: 48px;
color: #ef5b9c;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
font-family: "LiSu", "隶书", serif;
margin: 0 8px;
line-height: 1.5;
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/2025/12/13/693c562039ba9.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/0fb59fceea9320abf6cd432cd9c154f1.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: 280px; bottom: 25px; 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>
https://wx1.sinaimg.cn/mw1024/c91c596aly4h93j1kl362g208c08caan.gif 优美的制作无与伦比。{:5_116:} 漂亮~谢谢枫丹老师精彩分享{:4_204:} 好漂亮，欣赏枫丹好帖{:4_187:} 也曾年轻 发表于 2026-4-17 06:58
感谢也曾年轻的支持，下午好！{:4_204:}{:4_190:}
梦油 发表于 2026-4-17 11:04
优美的制作无与伦比。
梦老下午好~~感谢您的鼓励，过誉了{:4_173:}，很荣幸。祝您安好！{:4_204:}{:4_190:}
杨帆 发表于 2026-4-17 12:31
漂亮~谢谢枫丹老师精彩分享
感谢扬帆的支持，下午好！喜欢听这首歌就又做了这个。祝您制作愉快~~{:4_204:}{:4_190:}
红影 发表于 2026-4-17 16:42
好漂亮，欣赏枫丹好帖
红影下午好~~
播放器这种模式流行了这么多年，我一直不算喜欢，就是感到没有视频内容丰富，来到这里才开始学习的。现在AI出图丰富了内容，我开始做了才有了体会，觉得这个东东的张力很大，以前观点片面了些。谢你的支持！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-4-17 17:21
梦老下午好~~感谢您的鼓励，过誉了，很荣幸。祝您安好！
枫丹朋友别客气。 霜染枫丹 发表于 2026-4-17 17:28
红影下午好~~
播放器这种模式流行了这么多年，我一直不算喜欢，就是感到没有视频内容丰富，来到这里才 ...
任何时候开始喜欢都来得及的啊，喜欢了就会好好地去玩了呢{:4_187:}
页:
[1]