套用马老师代码制作《花妖》
本帖最后由 霜染枫丹 于 2025-12-13 11:32 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; background: url('https://ff.xiaoqiaodali.top:5401/i/2025/12/13/693cddd426aef.png') no-repeat center/cover; }
.son { width: 75px; height: 160px; background: url('https://cccimg.com/view.php/6fc31f95ae1443613717c105916e9434.gif') no-repeat 50% 0/50% 50%; }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://cccimg.com/view.php/d5999df604e3d30f5bfc06beba8ec3d0.mp3'});
tz.add('video', '', 'pd-vid', {src: 'https://cccimg.com/view.php/25b9a93636a25f9eec7d2e26fef7096e.mp4'});
tz.add('div', 'player', 'wrap100 hue-rotate rotate-ani', {style: 'cursor: pointer'}).playmp3();
tz.lzRot(6, 'player', {className: 'son'});
tz.fs().style('right: 20px; bottom: 20px');
</script> 本帖最后由 霜染枫丹 于 2025-12-13 11:33 编辑 <br /><br /><style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 81px; background: url('https://ff.xiaoqiaodali.top:5401/i/2025/12/13/693cddd426aef.png') no-repeat center/cover; }
.son { width: 75px; height: 160px; background: url('https://cccimg.com/view.php/6fc31f95ae1443613717c105916e9434.gif') no-repeat 50% 0/50% 50%; }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {src: 'https://cccimg.com/view.php/d5999df604e3d30f5bfc06beba8ec3d0.mp3'});
tz.add('video', '', 'pd-vid', {src: 'https://cccimg.com/view.php/25b9a93636a25f9eec7d2e26fef7096e.mp4'});
tz.add('div', 'player', 'wrap100 hue-rotate rotate-ani', {style: 'cursor: pointer'}).playmp3();
tz.lzRot(6, 'player', {className: 'son'});
tz.fs().style('right: 20px; bottom: 20px');
</script> https://cccimg.com/view.php/571be7b3cf8eb13521f3fac35b37c728.png
本帖最后由 霜染枫丹 于 2025-12-2 18:45 编辑
量子纠缠的前世今生
在波函数坍缩之前
我们是同一束光的两个侧面
蜷缩在普朗克尺度的茧里
共享着未被观测的混沌与圆满
那时没有时间的刻度
前世是坍缩瞬间的一道折痕
我把自旋的方向刻进你的波粒
像把名字绣进对方的生命线
后来宇宙膨胀成无尽旷野
我们被掷向不同的时空象限
我变成碳基生命的尘埃
你在另一片星云凝结成盐
但纠缠从未消散
就像暗物质牵引着星系
我在人群中突然回头
你刚好抬眼——
波函数在此刻完成千年的坍缩
所有随机的相遇
都是量子早已写好的必然
四叶草的年轮
幸运的四叶草摇曳在你我中间
像一片绿色的星群在风中解缆
露珠在叶脉间折射出前世的光斑
我数着那些未被命名的光年
你睫毛上栖息着整个春天的震颤
当我们的影子在黄昏里重叠成茧
我听见泥土深处有根系相互问候
我不记得前世我们是否有缘
不必追问轮回的刻度是否精准
今生相遇是我最美的遇见，
你掌心的纹路是未完的棋局
灵犀是月光在伤口上结的茧
当所有语言都无需赘述
灵犀相通就是前世的纠缠
我们在彼此瞳孔里
打捞出整个银河系的碎片
就让四叶草继续旋转吧
在今生与来世的夹缝间
我们以光速生长成两株纠缠的藤蔓
用年轮镌刻这场无声的眷恋
竟然还有沙发 玩代码很累啊 图文并茂 霜染枫丹朋友真是一位才华横溢的人，难得的人才啊! 音画太棒了！
音画唯美
刀郎的《花妖》动听
制作大气
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢霜染枫丹带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 阿狄丽娜 发表于 2025-12-2 19:35
玩代码很累啊
阿狄丽娜晚上好！辛苦的是马老师，他都写好了代码，我只是想想要表现个什么内容。
感谢您的支持，冬安！{:4_204:}
梦油 发表于 2025-12-2 20:34
霜染枫丹朋友真是一位才华横溢的人，难得的人才啊!
梦老您过誉了，我再来这里之前对播放器知道的很少，这里有马老师的代码和教程，我就想跟着学学，
感谢您的支持，晚上好！天冷了您多保重！{:4_204:}
本帖最后由 霜染枫丹 于 2025-12-3 18:18 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐播放器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #fff;
min-height: 100vh;
font-family: sans-serif;
padding: 20px; /* 添加内边距，避免小屏幕时贴边 */
/* 移除了 display: flex，这可能是导致页面右移的原因 */
}
/* 外层容器：确保播放器始终居中 */
.player-wrapper {
width: 100%;
max-width: 1200px; /* 最大宽度限制 */
margin: 0 auto; /* 水平居中 */
}
#pa {
width: 100%; /* 宽度自适应父容器 */
height: 675px;
border: 1px solid #ddd;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
/* 修复居中问题的关键：确保容器正常显示 */
}
/* 背景MP4层 */
#bg-video {
position: absolute;
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
z-index: 0;
transform: translate(-50%, -50%); /* 修正居中 */
}
/* 静态图片层 */
#bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://picsum.photos/id/1035/1920/1080');
background-size: cover;
background-position: center;
opacity: 0.1;
z-index: 1;
}
#wrapper {
position: absolute;
padding: 10px;
font: bold 2.5rem/1.5 sans-serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
bottom: 150px;
z-index: 10;
text-align: center;
width: 90%; /* 限制歌词宽度，避免溢出 */
max-width: 800px;
left: 50%;
transform: translateX(-50%); /* 水平居中 */
}
.char {
display: inline-block;
padding: 0 3px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 0.3s var(--delay) forwards;
transition: all 0.3s ease;
}
/* 隐藏原生音频控件 */
audio {
display: none;
}
/* 自定义播放器控制面板 */
.player-controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%); /* 精确水平居中 */
z-index: 20;
display: flex;
align-items: center;
gap: 15px; /* 调整间距，避免溢出 */
width: 95%; /* 宽度自适应 */
max-width: 800px;
padding: 0 10px;
}
.control-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(240, 240, 240, 0.8);
border: 2px solid rgba(100, 100, 100, 0.8);
color: #333;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
flex-shrink: 0; /* 防止按钮缩小 */
}
.control-btn:hover {
background-color: rgba(220, 220, 220, 0.8);
transform: scale(1.1);
}
.play-btn {
width: 70px;
height: 70px;
background-color: rgba(255, 105, 180, 0.8);
border-color: #ff4785;
color: white;
}
.play-btn:hover {
background-color: rgba(255, 105, 180, 1);
}
/* 进度条 */
.progress-container {
flex: 1;
height: 8px;
background-color: rgba(200, 200, 200, 0.5);
border-radius: 4px;
cursor: pointer;
position: relative;
min-width: 100px; /* 最小宽度，避免太小时消失 */
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #ff69b4;
border-radius: 4px;
width: 0%;
transition: width 0.3s ease;
}
/* 时间显示 */
.time-display {
color: #333;
font-size: 14px;
min-width: 60px; /* 固定最小宽度，避免抖动 */
text-align: center;
flex-shrink: 0; /* 防止时间文字缩小 */
}
@keyframes fadeIn {
to {
transform: translate(0, 0);
opacity: 1;
}
}
/* 响应式调整：针对不同屏幕尺寸优化 */
@media (max-width: 1024px) {
#pa {
height: 550px; /* 中等屏幕减小高度 */
}
#wrapper {
font-size: 2.2rem;
bottom: 130px;
}
}
@media (max-width: 768px) {
#pa {
height: 480px; /* 平板屏幕进一步减小高度 */
}
#wrapper {
font-size: 1.8rem;
bottom: 110px;
}
.player-controls {
gap: 10px;
}
.control-btn {
width: 45px;
height: 45px;
font-size: 18px;
}
.play-btn {
width: 55px;
height: 55px;
}
.time-display {
font-size: 12px;
min-width: 50px;
}
}
@media (max-width: 480px) {
#pa {
height: 400px; /* 手机屏幕最小高度 */
}
#wrapper {
font-size: 1.5rem;
bottom: 90px;
}
.player-controls {
gap: 8px;
}
.control-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
.play-btn {
width: 50px;
height: 50px;
}
}
</style>
</head>
<body>
<!-- 外层容器，确保整体居中 -->
<div class="player-wrapper">
<div id="pa">
<!-- 背景MP4层 -->
<video id="bg-video" loop muted playsinline>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
<!-- 静态图片层 -->
<div id="bg-image"></div>
<!-- 音频元素 -->
<audio id="aud" src="https://cccimg.com/view.php/7404fa9c5e73097aefa645b90d63a7a2.mp3" autoplay></audio>
<!-- 歌词显示区 -->
<div id="wrapper">HUACHAO LRC</div>
<!-- 自定义播放器控制面板 -->
<div class="player-controls">
<div class="time-display" id="current-time">00:00</div>
<div class="progress-container" id="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="time-display" id="total-time">00:00</div>
<button class="control-btn" id="prev-btn">⏮</button>
<button class="control-btn play-btn" id="play-btn">⏸</button>
<button class="control-btn" id="next-btn">⏭</button>
</div>
</div>
</div>
<script>
const gc = `终于把你遇见 - 徐子崴/罗姣
词：徐子崴
曲：徐子崴
编曲：冯丹
吉他：孙越
萧：丁晓逵
伴唱：凌菲
录音：欧力
录音棚：崴IP•MUSIC
音频编辑 Audio Editor：刘璇
混音工程师 Mixing Engineer：王路遥
母带工程师 Mastering Engineer：王路遥
录音/混音/母带棚：@2496 Top Music
封面设计：李政
出品：福唱音乐
制作人：徐子崴
如果一生有一百年
不过是三万六千五百天
我穿过河流啊我越过高山
只为能和你见呀见一面
如果一生有一百年
说起来很长说来也很短
我仰望日月啊我祈求上天
只为能和你走呀走一段
多想把你遇见
恰好在对的时间
我愿用前世的苦难
换与你今生的情缘
终于把你遇见
恰好在对的时间
我愿以今生的相伴
许和你来世的圆满
如果一生有一百年
说起来很长说来也很短
我仰望日月啊我祈求上天
只为能和你走呀走一段
多想把你遇见
恰好在对的时间
我愿用前世的苦难
换与你今生的情缘
终于把你遇见
恰好在对的时间
我愿以今生的相伴
许和你来世的圆满
许和你来世的圆满`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
const aud = document.getElementById('aud');
const playBtn = document.getElementById('play-btn');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');
const currentTimeEl = document.getElementById('current-time');
const totalTimeEl = document.getElementById('total-time');
const bgVideo = document.getElementById('bg-video');
const wrapper = document.getElementById('wrapper'); // 添加这行，修复wrapper未定义的问题
// 初始化背景视频播放
window.addEventListener('load', () => {
bgVideo.play().catch(err => {
console.log('视频自动播放被阻止，用户交互后将播放:', err);
document.body.addEventListener('click', () => {
bgVideo.play();
}, { once: true });
});
});
// 音频时间更新事件
aud.ontimeupdate = () => {
updateProgress();
updateTimeDisplay();
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr && !isSeeking) {
const nextTime = gcAr?. || aud.duration;
const gap = nextTime - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
// 音频结束事件
aud.onended = () => {
curkey = 0;
playBtn.textContent = '▶';
aud.play();
};
// 音频就绪后显示总时长
aud.onloadedmetadata = () => {
totalTimeEl.textContent = formatTime(aud.duration);
};
// 音频跳转后重新计算歌词位置
aud.onseeked = () => {
calcKey();
updateProgress();
};
// 播放/暂停按钮点击事件
playBtn.addEventListener('click', () => {
if(aud.paused) {
aud.play();
bgVideo.play();
playBtn.textContent = '⏸';
} else {
aud.pause();
bgVideo.pause();
playBtn.textContent = '▶';
}
});
// 进度条点击事件
progressContainer.addEventListener('click', (e) => {
const rect = progressContainer.getBoundingClientRect();
const pos = (e.clientX - rect.left) / rect.width;
aud.currentTime = pos * aud.duration;
isSeeking = true;
});
// 格式化时间为 MM:SS 格式
function formatTime(seconds) {
if(isNaN(seconds)) return '00:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
// 更新进度条
function updateProgress() {
const percent = (aud.currentTime / aud.duration) * 100;
progressBar.style.width = `${percent}%`;
}
// 更新时间显示
function updateTimeDisplay() {
currentTimeEl.textContent = formatTime(aud.currentTime);
}
// 歌词解析函数
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr.length ? lrcAr : [];
}
// 计算当前应该显示的歌词索引
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey >= gcAr.length) curkey = gcAr.length - 1;
const nextTime = gcAr?. || aud.duration;
const time = nextTime - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
// 显示歌词
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const color = Math.floor(Math.random() * 0x666666 + 0x000000).toString(16).padStart(6, '0');
span.style.cssText += `
color: #${color};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey++;
setTimeout(() => isSeeking = false, time * 1000);
}
// 上一曲/下一曲功能
document.getElementById('prev-btn').addEventListener('click', () => {
aud.currentTime = Math.max(0, aud.currentTime - 10);
isSeeking = true;
});
document.getElementById('next-btn').addEventListener('click', () => {
aud.currentTime = Math.min(aud.duration, aud.currentTime + 10);
isSeeking = true;
});
</script>
</body>
霜染枫丹 发表于 2025-12-2 21:04
偶然晚上好！
很高兴有您的鼓励！得到支持很感谢，祝您冬安~~
{:4_180:}
页:
[1]
2