路还好远啊学习马老师天干贴制作

霜染枫丹 发表于 2026-6-14 21:00

本帖最后由霜染枫丹于 2026-6-15 00:04 编辑 <br /><br />https://ff.xiaoqiaodali.top:5401/i/2026/06/14/6a2e8367298ac.gif

霜染枫丹 发表于 2026-6-14 21:02

本帖最后由霜染枫丹于 2026-6-15 00:03 编辑 <br /><br />
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/14/6a2e8367298ac.gif') no-repeat center/cover; color: white; position: relative; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#lrc { top: 4%; }

/* 蚊香盘样式 */
#msvg { width: 100%; height: 100%; use { fill: none; stroke: url(#grd); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 2; stroke-dashoffset: 0; opacity: .65; animation: move ease-in-out 8s infinite alternate var(--state); } }
@keyframes move { to { stroke-dashoffset: -180; } }

/* 自定义歌词框样式 */
.lyrics-box {
   position: absolute;
   bottom: 60px;
   left: 20px;
   right: 20px;
   background: rgba(0,0,0,0.0);
   backdrop-filter: blur(8px);
   border-radius: 16px;
   padding: 12px 10px;
   text-align: center;
   font-size: 14px;
   color: #ffd966;
   font-family: system-ui, 'Microsoft YaHei', sans-serif;
   pointer-events: none;
   z-index: 10;
   border-left: 3px solid #f7971e;
   box-shadow: 0 2px 10px rgba(0,0,0,0.3);
   transition: all 0.3s ease;
}
.lyrics-line {
   display: block;
   line-height: 1.6;
}
.lyrics-current {
   font-size: 16px;
   font-weight: bold;
   color: #ffb347;
   text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="" autoplay loop muted></video>

<div class="lyrics-box">
   <span class="lyrics-line lyrics-current" id="currentLyrics">♪ 路还好远啊 ♪</span>
   <span class="lyrics-line" id="nextLyrics" style="font-size:12px; opacity:0.7;">金色的雨打湿了红伞</span>
</div>

<svg id="msvg" xmlns="http://www.w3.org/2000/svg">
   <defs>
         <linearGradient id="grd">
            <stop offset="0" stop-color="#f7971e" />
            <stop offset="1" stop-color="#ffd200" />
         </linearGradient>
   </defs>
   <symbol id="sb" viewBox="0 0 160 90">
         <path d="M 80 45 C 80 30, 60 30, 60 45 C 60 60, 100 60, 100 45 C 100 20, 40 20, 40 45 C 40 70, 120 70, 120 45" />
   </symbol>
   <use href="#sb" x="0" y="0" />
   <use href="#sb" x="50" y="0" />
   <use href="#sb" x="100" y="0" />
</svg>
</div>

<script>
// ===== 歌词数据 =====
const lyricsData = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];

let currentLrcIndex = -1;
let audioElement = null;
let audioPlayerInstance = null; // 【修复2】全局保存 AudPlayer 实例
let isPolling = false;       // 轮询标记，防止重复启动

// ===== 更新歌词显示 =====
function updateLyrics(currentTime) {
   let foundIndex = -1;
   for (let i = lyricsData.length - 1; i >= 0; i--) {
         if (currentTime >= lyricsData) {
            foundIndex = i;
            break;
         }
   }

   if (foundIndex !== -1 && foundIndex !== currentLrcIndex) {
         currentLrcIndex = foundIndex;

         const currentText = lyricsData;
         const nextText = (currentLrcIndex + 1 < lyricsData.length)
            ? lyricsData
            : '—— 尾奏 ——';

         const currentSpan = document.getElementById('currentLyrics');
         const nextSpan = document.getElementById('nextLyrics');

         if (currentSpan && nextSpan) {
            currentSpan.textContent = `🎵 ${currentText} 🎵`;
            nextSpan.textContent = `⇢ ${nextText}`;
         }
   }
}

// ===== 绑定音频事件 =====
function bindAudioEvents() {
   let retryCount = 0;
   const maxRetry = 30;

   const checkInterval = setInterval(() => {
         let aud = null;

         // 【修复2】方式一：从 AudPlayer 实例中提取音频元素
         if (audioPlayerInstance) {
            // 常见的属性名，逐个尝试
            const props = ['audio', 'audioEl', 'audioElement', 'player', 'el', 'element', 'media'];
            for (const p of props) {
               if (audioPlayerInstance && typeof audioPlayerInstance.currentTime === 'number') {
                     aud = audioPlayerInstance;
                     console.log(`✅ 从 AudPlayer.${p} 获取到音频元素`);
                     break;
               }
            }
            // 也尝试遍历实例所有属性，找 HTMLAudioElement
            if (!aud) {
               for (const key of Object.keys(audioPlayerInstance)) {
                     const val = audioPlayerInstance;
                     if (val instanceof HTMLAudioElement) {
                        aud = val;
                        console.log(`✅ 从 AudPlayer.${key} 找到 HTMLAudioElement`);
                        break;
                     }
               }
            }
         }

         // 方式二：在 DOM 中查找 <audio>（限定在播放器容器内，排除背景 video）
         if (!aud) {
            aud = document.querySelector('#pa audio') ||
                  document.querySelector('.pa audio') ||
                  document.querySelector('audio');
         }

         // 【修复1】★★★ 绝对不要降级到 video！★★★
         // 页面中的 <video class="pd-vid"> 是背景装饰，不是音频播放器

         if (aud && !audioElement) {
            audioElement = aud;
            clearInterval(checkInterval);
            attachAudioListeners();
         } else if (!aud) {
            retryCount++;
            if (retryCount % 5 === 0) {
               console.log(`🔍 查找音频元素中... (${retryCount}/${maxRetry})`);
            }
            if (retryCount >= maxRetry) {
               clearInterval(checkInterval);
               console.warn('⚠️ 未在 DOM 中找到 <audio>，尝试 MutationObserver + 轮询兜底');
               startMutationObserver();
               startPollingFallback();
            }
         }
   }, 500);
}

// ===== 给音频元素绑定事件 =====
function attachAudioListeners() {
   if (!audioElement) return;

   audioElement.addEventListener('timeupdate', function () {
         updateLyrics(this.currentTime);
   });

   audioElement.addEventListener('playing', function () {
         console.log('🎵 音频开始播放');
         updateLyrics(this.currentTime);
   });

   audioElement.addEventListener('loadedmetadata', function () {
         console.log('音频已加载，时长:', this.duration);
         updateLyrics(0);
   });

   // 立即触发一次
   updateLyrics(audioElement.currentTime || 0);
   console.log('✅ 音频绑定成功', audioElement);
}

// ===== 兜底方案一：MutationObserver 监听 DOM 新增 <audio> =====
function startMutationObserver() {
   const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
               if (node.nodeName === 'AUDIO' || (node.querySelector && node.querySelector('audio'))) {
                     const aud = node.nodeName === 'AUDIO' ? node : node.querySelector('audio');
                     if (aud && !audioElement) {
                        audioElement = aud;
                        observer.disconnect();
                        attachAudioListeners();
                        return;
                     }
               }
            }
         }
   });
   observer.observe(document.body, { childList: true, subtree: true });
}

// ===== 兜底方案二：requestAnimationFrame 轮询 =====
function startPollingFallback() {
   if (isPolling) return;
   isPolling = true;

   function tick() {
         // 如果已经通过其他方式绑定，停止轮询
         if (audioElement) {
            isPolling = false;
            return;
         }

         // 再次尝试从 AudPlayer 实例中查找
         if (audioPlayerInstance) {
            for (const key of Object.keys(audioPlayerInstance)) {
               const val = audioPlayerInstance;
               if (val instanceof HTMLAudioElement ||
                     (val && typeof val.currentTime === 'number' && typeof val.play === 'function')) {
                     audioElement = val;
                     attachAudioListeners();
                     isPolling = false;
                     return;
               }
            }
         }

         // 再次尝试 DOM 查找
         const aud = document.querySelector('audio');
         if (aud) {
            audioElement = aud;
            attachAudioListeners();
            isPolling = false;
            return;
         }

         requestAnimationFrame(tick);
   }

   requestAnimationFrame(tick);
}

// ===== 播放器配置与初始化 =====
var options = {
   pa: '.pa',
   urls: [['https://imgimg.qqdsw8.cn/view.php/86b05114dd2f93951273ae8a577a48cb.mp3']],
};

function loadJs(url, callback) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = url;
   script.onload = function() {
         if (callback) callback();
   };
   document.head.appendChild(script);
}

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
   console.log('播放器脚本加载完成');
   audioPlayerInstance = new AudPlayer(options); // 【修复2】保存到全局

   // 打印实例结构，便于调试
   console.log('AudPlayer 实例属性:', Object.keys(audioPlayerInstance));

   // 等待播放器初始化完成
   setTimeout(bindAudioEvents, 1500);
});
</script>

杨帆发表于 2026-6-14 21:03

好漂亮，有特色，谢谢枫丹老师精彩分享{:4_204:}

霜染枫丹 发表于 2026-6-14 21:04

歌曲《路还好远啊》
作词/作曲‌/演唱：任素汐
路还好远啊人在哪里呀
青天烈日下一路往北啊
走过我的人啊不用看我啊
你就往前走你的我就自己吧‌‌

雨下得大吗可有人给你撑伞吗
风把路牌上的数刮走了我往哪儿去呀
我能变卦吗没有你怎么独往啊
这糟糕的雨啊何时停下停下
我等你吧你别不来啦‌‌

路还好远啊人在哪里呀
青天烈日下一路往北啊
走过我的人啊不用看我啊
你就往前走你的我就自己吧

雨下得大吗可有人给你撑伞吗
风把路牌上的数刮走了我往哪儿去呀
我能变卦吗没有你怎么独往啊
这糟糕的雨啊何时停下停下
我等你吧你别不来啦

霜染枫丹 发表于 2026-6-14 21:08

杨帆发表于 2026-6-14 21:03
好漂亮，有特色，谢谢枫丹老师精彩分享

扬帆晚上好~~

感谢您的支持鼓励！马老师的天干贴我听喜欢的，线条可以有很多变化，适应不同的需要。这个我做的有点大了，歌词也没弄好，留个以后的工作吧，今晚不干了{:4_173:}{:4_204:}{:4_190:}

红影发表于 2026-6-14 21:17

这个制作漂亮，枫丹变了线条的形状，很背景很相符。
欣赏枫丹好帖{:4_187:}

霜染枫丹 发表于 2026-6-14 21:38

红影发表于 2026-6-14 21:17
这个制作漂亮，枫丹变了线条的形状，很背景很相符。
欣赏枫丹好帖

吃完晚饭我就开工，可是歌词还是没弄好，眼睛有些累了，就这样听歌吧{:4_173:}任素汐的新歌。

https://ff.xiaoqiaodali.top:5401/i/2026/06/14/6a2eae4907423.gif

杨帆发表于 2026-6-14 21:53

本帖最后由杨帆于 2026-6-14 22:08 编辑 <br /><br />霜染枫丹发表于 2026-6-14 21:08
扬帆晚上好~~

感谢您的支持鼓励！马老师的天干贴我听喜欢的，线条可以有很多变化，适应不同的需要。这 ...

是，重在过程，乐在其中足矣{:4_187:}

<style>
#msvg {position: relative;margin-top: -180px;z-index: 1; left: calc(50%);transform: translateX(-50%);overflow: hidden;width:800px; height: 800px; use { fill: none; stroke: url(#grd); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 2; stroke-dashoffset: 0; opacity: .85; animation: move ease-in-out 8s infinite alternate } }
@keyframes move { to { stroke-dashoffset: -180; } }
</style>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg">
   <defs>
         <linearGradient id="grd">
            <stop offset="0" stop-color="#f7971e" />
            <stop offset="0.5" stop-color="#77FFCC" />
            <stop offset="1" stop-color="#ffd200" />
         </linearGradient>
   </defs>
   <symbol id="sb" viewBox="0 0 160 90">
         <path d="M 80 45 C 80 30, 60 30, 60 45 C 60 60, 100 60, 100 45 C 100 20, 40 20, 40 45 C 40 70, 120 70, 120 45" />
   </symbol>
   <use href="#sb" x="0" y="0" />
   <use href="#sb" x="0" y="50" />
   <use href="#sb" x="0" y="100" />
</svg>

红影发表于 2026-6-14 23:32

霜染枫丹发表于 2026-6-14 21:38
吃完晚饭我就开工，可是歌词还是没弄好，眼睛有些累了，就这样听歌吧任素汐的新歌。

等空了再弄就是了，别累到自己{:4_204:}

霜染枫丹 发表于 2026-6-14 23:36

红影发表于 2026-6-14 23:32
等空了再弄就是了，别累到自己

哈哈~~学艺不精，老伴说你这么大的空间，多喝几杯咖啡水货就更多了，填空快{:4_173:}可能是弄好了，我不敢编辑，下一页试试{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-6-14 23:36

本帖最后由霜染枫丹于 2026-6-15 00:05 编辑 <br /><br />{:4_204:} {:4_204:} {:4_204:}
{:4_204:} {:4_204:} {:4_204:}

霜染枫丹 发表于 2026-6-15 00:22

霜染枫丹发表于 2026-6-14 23:36
本帖最后由霜染枫丹于 2026-6-15 00:05 编辑
{:4 ...

{:4_204:}{:4_204:}{:4_204:}{:4_204:}{:4_204:}{:4_204:}

也曾年轻 发表于 2026-6-15 07:47

霜染枫丹发表于 2026-6-14 21:02
本帖最后由霜染枫丹于 2026-6-15 00:03 编辑

@import 'https://638183.freep.cn/638183/web/api ...

https://pic.rmb.bdstatic.com/bjh/250519/dump/70205c5d9458379762991e660f0eba48.jpeg

也曾年轻 发表于 2026-6-15 08:01

2#渐变色差别不明显

8#受2#设置影响渐变效果同2#，本楼设置没起作用

同一页面变量名相同不唯一的结果

霜染枫丹 发表于 2026-6-15 09:17

也曾年轻发表于 2026-6-15 08:01
2#渐变色差别不明显

8#受2#设置影响渐变效果同2#，本楼设置没起作用

也曾年轻上午好~~这个东东有点意思，相同的代码，发一遍一个样，旋转的线条也跟着变形，我试了好几遍。发了三个地方，我的根据地没问题，中画网和这里也不一样，三处三个样，可能是论坛模板不同形成的解析不同{:4_204:}

https://s3.bmp.ovh/2026/05/29/2xNd9viy.gif

霜染枫丹 发表于 2026-6-15 09:19

也曾年轻发表于 2026-6-15 07:47

谢谢也曾年轻的关照，很荣幸！恭祝您夏日安好~~

梦江南 发表于 2026-6-15 09:49

很漂亮的线条创新，欣赏学习。{:4_199:}

也曾年轻 发表于 2026-6-15 09:50

霜染枫丹发表于 2026-6-15 09:17
也曾年轻上午好~~这个东东有点意思，相同的代码，发一遍一个样，旋转的线条也跟着变形，我试了好几遍。发 ...

变量唯一就应该没问题
<style>
#oBlk {
width: 60vw;
height: 40vw;
position: relative;
margin: auto;
background: url(https://ff.xiaoqiaodali.top:5401/i/2026/06/14/6a2e8367298ac.gif) no-repeat center/cover;
margin:40px auto 32px calc(50% - 30vw - 81px);
/* 蚊香盘样式 */
#mySVG {
   width: 80%;
   height: 80%;

   use {
   fill: none;
   stroke: url(#grad);
   stroke-width: 1;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-dasharray: 4 2;
   stroke-dashoffset: 0;
   opacity: .65;
   animation: sMove ease-in-out 8s infinite alternate;
   }
}
}

@keyframes sMove {
to {
   stroke-dashoffset: -180;
}
}
</style>
<div id="oBlk">
<svg id="mySVG" viewBox="0 0 160 90">
<defs>
   <linearGradient id="grad">
   <stop offset="0" stop-color="red" />
   <stop offset="0.5" stop-color="green" />
   <stop offset="1" stop-color="blue" />
   </linearGradient>
</defs>
</defs>
<symbol id="symb">
   <path d="M 80 45 C 80 30, 60 30, 60 45 C 60 60, 100 60, 100 45 C 100 20, 40 20, 40 45 C 40 70, 120 70, 120 45" />
</symbol>
<use href="#symb" x="0" y="0" />
<use href="#symb" x="10" y="0" />
<use href="#symb" x="20" y="0" />
</svg>undefined
</div>

霜染枫丹 发表于 2026-6-15 10:45

梦江南发表于 2026-6-15 09:49
很漂亮的线条创新，欣赏学习。

感谢梦江南的支持鼓励，上午好~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-6-15 10:52

也曾年轻发表于 2026-6-15 09:50
变量唯一就应该没问题

#oBlk {

哈哈~~这个太好了！我是先听了任素汐的歌曲，就做了AI视频，线条的作用是歌词中唱的那些缠绕无奈。我想将线条缩小还没学会{:4_173:}颜色是我没想到的，这样的渐变和背景的深蓝相融，更符合歌词的内涵。谢谢也曾年轻！！{:4_204:}{:4_190:}{:4_199:}{:4_187:}

页: [1] 2

花潮论坛's Archiver

路还好远啊 学习马老师天干贴制作

路还好远啊学习马老师天干贴制作