论坛 › AI创作交流 › 暂享流年 尚文歌集

霜染枫丹 发表于 2026-8-1 21:45

暂享流年 尚文歌集

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa {
      --offsetX: 81px;
      --bg: url('https://imgimg.qqdsw8.cn/view.php/dcd77d773a1731b9ca2abb8fa703ce31.jpg') no-repeat center/cover;
      color: lightgreen;
      position: relative;
      overflow: hidden;
    }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .mpic {
      width: 50px;
      offset-anchor: 100% 50%;
      animation: offset-distance 3s linear infinite alternate var(--state), rot 3s linear infinite var(--state);
    }
    /* 底部单行歌词容器 */
    .lyric-box{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 60px;
      text-align: center;
      font-size: 26px;
      color: #ffffff;
      letter-spacing: 3px;
      text-shadow: 1px 1px 6px #000000;
      pointer-events: none;
      z-index: 10;
    }
</style>

<div id="pa" class="pa">
    <div class="lyric-box" id="lyricText"></div>
</div>

<script>
var options = {
    pa: '.pa',
    urls: [['https://imgimg.qqdsw8.cn/view.php/0bd097b7a5e6b293704f47bdde6d503b.mp3']],
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

// LRC歌词文本
const lrcRaw = `暂享流年
作曲：尚文歌集
作词：尚文歌集
风轻轻哟绕屋檐
时光悠悠伴流年
烹新茶哟意绵绵
远离尘嚣享清闲
壶水漾响似琴弦
弹得清梦自在欢
茶烟软哟心飘然
是非恩怨都看淡
云卷云舒过窗前
半生光阴似等闲
尘世纷扰诚难断
聊抛尘虑偷做仙
闲观风月忘尘烦
一盏清茶度暑寒
浮生起落随缘看
悠然度日且安然
云卷云舒过窗前
半生光阴似等闲
尘世纷扰诚难断
聊抛尘虑偷做仙
尘世纷扰诚难断
聊抛尘虑偷做仙`;

// LRC解析函数
function parseLrc(lrcStr){
    let lines = lrcStr.split(/\n/);
    let result = [];
    let reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
    lines.forEach(line=>{
      let match = line.match(reg);
      if(!match) return;
      let m = parseInt(match);
      let s = parseInt(match);
      let ms = parseInt(match);
      let time = m*60 + s + ms/1000;
      let text = match.trim();
      result.push({time,text});
    })
    result.sort((a,b)=>a.time-b.time);
    return result;
}
const lyricList = parseLrc(lrcRaw);
let lastIndex = -1;

function tzRun() {
    var aud = new AudPlayer(options);
    const paDom = document.getElementById('pa');
    const frg = new DocumentFragment(), num = 20;
    for (let i = 0; i <= num; i ++) {
      const img = document.createElement('img');
      img.src = 'https://imgimg.qqdsw8.cn/view.php/98492f8a95f84b60569d3bdfc32c523c.png';
      img.alt = '';
      img.className = 'mpic';
      img.style.filter = `hue-rotate(${Math.random() * 360}deg)`;
      img.style.offsetPath = `ray(${180 / num * i - 90}deg sides at 50% 95%)`;
      img.style.animationDuration = `${Math.random() * 8 + 8}s`;
      img.style.animationDelay = `${-10 * Math.random()}s`;
      frg.appendChild(img);
    }
    paDom.appendChild(frg);

    const lyricBox = document.getElementById('lyricText');
    // 循环等待内部音频实例初始化（修复时序问题）
    function bindLyric() {
      const audio = aud.aud; // ✅关键修改：aud.aud，不是aud.audio
      if (!audio) {
            setTimeout(bindLyric, 200);
            return;
      }
      lyricBox.innerText = "";
      // 监听播放进度
      audio.addEventListener('timeupdate',()=>{
            let curTime = audio.currentTime;
            let findIndex = 0;
            for(let i=0;i<lyricList.length;i++){
                if(lyricList.time <= curTime){
                  findIndex = i;
                }else{
                  break;
                }
            }
            if(findIndex !== lastIndex){
                lastIndex = findIndex;
                lyricBox.innerText = lyricList.text;
            }
      })
    }
    bindLyric();
}

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);
}
</script>

霜染枫丹 发表于 2026-8-1 21:47

AI制作了一个芦苇飞絮照片，替换了马老师的四叶草，得到了现在的画面。感谢马老师的分享

红影 发表于 2026-8-1 22:00

很悠然自在的美好时光。欣赏枫丹好帖，这样的帖子让人心境安宁{:4_199:}

杨帆 发表于 2026-8-1 22:34

学的很快哇，好听好看，谢谢枫丹老师精彩分享{:4_204:}

查看完整版本: 暂享流年 尚文歌集