套用马老师代码制作《时间是一片沉默的海》
本帖最后由 霜染枫丹 于 2026-1-11 17:35 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
--offsetX: 81px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2025/12/22/694910a7e8237.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: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; }
}
/* 歌词显示样式：顶部靠右单行显示 */
.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: #ef5b9c;
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/6650391bfd8f4e04eedef851615b04dc.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/6f6484b61a8ec07b84dcc2395870e31f.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 = [
,
,
,
,
,// 修正：01:03.11 = 63.11秒
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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>
https://ff.xiaoqiaodali.top:5401/i/2025/12/22/694910a7e8237.gif
时间是一片沉默的海
歌手: 文费毫
发行日期:2025-10-23
思念是漂泊的孤雁
回忆是无边的草原
每片白云都是远方
思念飘来汇成的海
在风中独自独白
时光是一片沉默的海
往事是雪地的洁白
每朵梨花都是一个
来不及说出的对白
月光下轻轻散开
等待是无声的钟摆
重逢是融雪的春天
每粒沙砾都是一个
被晚风遗忘的誓言
在掌心渐渐飘散
时光是一片沉默的海
往事是雪地的洁白
每朵梨花都是一个
来不及说出的对白
月光下轻轻散开
从草原走到雪
从白天走到黑夜
我遇到了盛开的雪莲
就放下了执念
放下了执念
时间是一片沉默的海
往事是时光的留白
每朵梨花都是一个
来不及说出的对白
月光下轻轻散开
你是漫天的星辰
我是沉默的孤雁
每道流星都是一个
无法言说的心愿
在夜空点亮黑暗
老年人在这样的环境下小憩太美了。 梦油 发表于 2025-12-23 17:04
老年人在这样的环境下小憩太美了。
梦老晚上好~~
这幅图片就是用AI制作的，现在玩起来正如您的打油诗所写，便捷很多。
现在我们衣食无忧，就是找的地方一坐，吹吹风，想想从前，珍惜当下，不惧未来，很惬意。
谢梦老的支持，祝您安好！！{:4_190:}{:4_204:}{:4_199:}
好个娴雅的大姐，在这涓涓溪流边，享受岁月静好聆听天籁之音，这日子不要太惬意了哈{:4_174:} 这歌曲我听了三遍，真好听！歌词也真得极好！ 樵歌 发表于 2025-12-23 19:17
好个娴雅的大姐，在这涓涓溪流边，享受岁月静好聆听天籁之音，这日子不要太惬意了哈
哈哈~~总得貌似一下有点格调，{:4_189:}这首歌10月23号发行的，歌手我不知道有什么其他作品，就这首就感到很好听，就存了下来。
到了我现在这个杰顿，就随心所欲了。谢谢小樵哥，晚上好！{:4_204:}{:4_190:}
霜染枫丹 发表于 2025-12-23 18:23
梦老晚上好~~
这幅图片就是用AI制作的，现在玩起来正如您的打油诗所写，便捷很多。
现在的老年人简直就是生活在蜜罐里，我很知足。 霜染枫丹 发表于 2025-12-23 19:29
哈哈~~总得貌似一下有点格调，这首歌10月23号发行的，歌手我不知道有什么其他作品，就这首就感 ...
大姐对音乐的鉴赏能力那是一个非常强悍哈{:4_172:}
您分享的歌都很有内蕴的歌，我也对歌词比较看重。 樵歌 发表于 2025-12-23 20:42
大姐对音乐的鉴赏能力那是一个非常强悍哈
您分享的歌都很有内蕴的歌，我也对歌词比较看重。
可能是年龄的原因，撕心裂肺的那种负我不负她之类我不喜欢听，可能自身没遇到？一听就想反驳{:4_173:}{:4_172:}
《时间是一片沉默的海》创作与意境全解析
您询问的是《时间是一片沉默的海》(注意歌名应为 "海" 而非 "活")，这是文费毫作词作曲并演唱的原创作品，于 2025 年 10 月正式完成发布。下面为您详细解析：
一、创作经历：行走山水间的灵感结晶
创作契机：2025 年 5 月，文费毫前往新疆采风，在那拉提草原的广袤天地间获得灵感，开始构思这首歌。
创作时长：从初稿到成品历时约 5 个月，2025 年 10 月才最终完成，期间经过反复打磨。
创作地点：新疆的自然景观为创作提供了丰富素材，从草原到雪山的地理跨度，从白昼到黑夜的时间流转，都融入了歌词意象中。
创作特点：文费毫曾在视频号 "文豪音乐" 分享："从草原走到雪山，从白天走到黑夜，时光是一片沉默的海"，透露了创作过程中对自然与时间关系的深刻观察。
二、歌词意境：以意象构建时间哲学
1. 核心意象解析
"沉默的海"：时间的本体象征，它 "从不言语却把所有故事揉进旋律起伏"，展现时间的包容性与深沉力量。
"孤雁" 与 "草原"：思念如漂泊的孤雁，回忆似无边的草原，勾勒出空间的辽阔与情感的绵长，暗示思念之深、回忆之广。
"梨花与白雪"："往事是雪地的洁白，每朵梨花都是来不及说出的对白"，将未表达的情感具象化，既纯洁又遗憾。
"月光与钟摆"：月光下的散开、无声的钟摆，营造静谧氛围，强化时间流动的永恒与无奈。
2. 整体意境：一曲生命的沉思
整首歌宛如 "一首现代抒情乐章，以意象为音符，以复沓为节奏，吟唱人类共通的记忆与释怀"。它不讲述具体故事，而是通过唤醒每个人心中的 "海"" 雪 ""雁" 与 "星"，让情感在其中映照、回荡，最终抵达 "沉默而澄明的开阔之境"。
歌词中，时间不再是冰冷的计量单位，而是有温度、有情感的存在 —— 它像海一样沉默，却承载一切；像雪一样洁白，却包容所有过往；像钟摆一样规律，却又充满变数。
三、情感内核：温柔的时间哲学
1. 核心情绪：深沉的宁静与释怀
《时间是一片沉默的海》最动人之处在于：它不写时间的残酷，而是唱透了时间的温柔。
歌曲传递的情绪不是对时光流逝的感伤，而是对 "时间包容性" 的领悟 —— 那些没说出口的遗憾、来不及圆满的告别，都被时间轻轻接住，沉淀成 "回头才懂的纹理"。
2. 情感层次分析
遗憾之美："来不及说出的对白"" 被晚风遗忘的誓言 "，这些意象承载着未完成的情感，却在时间的怀抱中获得了另一种圆满。
宁静力量："沉默不是无言，是心中万千思绪在静谧中绽放"，展现了在时间面前的从容与淡定，让心灵在喧嚣中找到安宁。
希望之光："重逢是融雪的春天"，在时间的循环中，蕴含着生生不息的希望，暗示一切失去的可能以新的形式归来。
四、艺术特色：诗与歌的完美融合
1. 文学性：凝练的诗意语言
歌词采用复沓手法，"时光是一片沉默的海" 多次重复，形成回环往复的韵律美，强化主题的同时，也让听众在循环中感受时间的永恒特质。
2. 音乐性：旋律与情感的共鸣
虽然具体曲谱信息有限，但从描述中可知：悠扬的曲调如海面柔光，看似平静却蕴含抑扬顿挫的暗涌，恰如人生不动声色的波澜。这种 "以静制动" 的表达方式，让情感在平静外表下暗流涌动，更具穿透力。
五、聆听启示：与时间和解的艺术
《时间是一片沉默的海》最终要告诉我们的是：时间不是敌人，而是最好的朋友。它以沉默的方式，包容我们的所有遗憾与错过，让那些未能圆满的故事，在记忆中获得永恒的价值。
当您聆听这首歌时，不妨闭上双眼，让思绪随旋律漂浮，想象自己站在辽阔海边，感受海风拂面，潮起潮落 —— 那是时间的呼吸，也是心灵与永恒的对话。
结语
文费毫的《时间是一片沉默的海》不仅仅是一首歌，更是一部关于时间的哲学诗篇。它通过优美的意象、舒缓的旋律和深沉的情感，邀请我们重新审视时间与生命的关系，在浮躁的世界中寻得一份难得的宁静与释怀。
若您想更深入感受这首歌，建议在安静的夜晚聆听，让自己完全沉浸在那片 "沉默的海" 中，体会时间温柔的拥抱。 很舒适的画面，歌曲也好听，节奏很舒缓悠然，带给人很自在的感觉{:4_187:} 梦油 发表于 2025-12-23 19:58
现在的老年人简直就是生活在蜜罐里，我很知足。
我和梦老同样的感觉。退休金不多也足够生活开销，论坛上有投脾气的聊几句，自己玩一会儿。很惬意。我是出门就首选搭公交车，边走边看风景，也不着急，心里敞亮，孩子们的生活不去干涉，保持自己的节奏。晚年衣食无忧，很知足了{:4_204:}{:4_190:}
樵歌 发表于 2025-12-23 20:49
《时间是一片沉默的海》创作与意境全解析
您询问的是《时间是一片沉默的海》(注意歌名应为 "海" 而非 "活" ...
我看了您的介绍，对这首歌更喜欢了！！{:4_190:}{:4_204:}{:4_199:}{:4_178:}
红影 发表于 2025-12-23 20:50
很舒适的画面，歌曲也好听，节奏很舒缓悠然，带给人很自在的感觉
红影晚上好~~
很感谢你的支持！马老师这组代码我特别喜欢，展示的空间很大，可以有很多变化，先做了这个，人物背景进行了优化，否则打开更慢。{:4_204:}{:4_190:}
霜染枫丹 发表于 2025-12-23 20:51
我和梦老同样的感觉。退休金不多也足够生活开销，论坛上有投脾气的聊几句，自己玩一会儿。很惬意。我是出 ...
是的，枫丹朋友。自己给自己找乐儿吧。 霜染枫丹 发表于 2025-12-23 20:55
红影晚上好~~
很感谢你的支持！马老师这组代码我特别喜欢，展示的空间很大，可以有很多变化，先做了这 ...
枫丹的图图都是高画质的，文件大，所以打开得慢。不过会享受到更好的效果呢{:4_187:} 霜染枫丹 发表于 2025-12-23 20:52
我看了您的介绍，对这首歌更喜欢了！！
大姐早上好{:4_190:}因为特别喜欢，就支让豆包搜索了，也跟着学习了，读了豆包的解析，我很感动，任何是一首好歌的诞生，都是作者艰辛的付出！这歌我找不到歌谱，跟唱了一下，不是那个味道，难听死了。{:4_189:} 霜染枫丹 发表于 2025-12-23 20:46
可能是年龄的原因，撕心裂肺的那种负我不负她之类我不喜欢听，可能自身没遇到？一听就想反驳{:4 ...
是的，我们更受听深沉而抒情的，内容又略带些回忆，稍有点沧桑的歌儿。
页:
[1]
2