论坛 › 欢乐水吧 › 云边的思念

亚伦影音工作室 发表于 2026-9-13 17:07

云边的思念

本帖最后由 亚伦影音工作室 于 2026-9-16 03:48 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{
    margin: 10px 0 30px calc(50% - 680px);
    width: 1286px;
    height: 720px;
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ffb415741169f1137bf73dafba61b63f.jpg)no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;--state: paused;
}
      /* ===== 播放器容器 ===== */
      #amazingaudioplayer-1 {
            width: 420px;
            max-width: 100%;
            margin: 0 60%;
            margin-top: 150px;
            /* 整体下移50px */
            background: rgba(254, 252, 245, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 16px;
                   box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3);
   padding: 6px 0 8px 0;
            font-family: 'Segoe UI', 'Noto Sans', system-ui, 'Microsoft YaHei', sans-serif;
            position: relative;
      }

      /* ===== 歌词区域 ===== */
      #amazingaudioplayer-1 .amazingaudioplayer-text {
            padding: 2px 12px 0px;
            text-align: center;
      }

      .amazingaudioplayer-lyrics {
            position: relative;
            top: 10px;
            display: inline-block;
            max-width: 100%;
            font-size: 18px;
            font-weight: 400;
            line-height: 1.3;
            text-align: center;
            letter-spacing: 1px;
            white-space: nowrap;
            min-height: 36px;
      }

      /* ===== 核心歌词元素（带颜色填充） ===== */
      #lrc {
            position: relative;
            display: inline-block;
font-family:"Ma Shan Zheng","STKaiti","SimHei",   cursive, serif;
            font-size: 24px;
            font-weight: 400;
            color: #fff123;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            white-space: nowrap;
            background: transparent;
      }

      /* ===== 渐变填充伪元素 —— 流光效果 ===== */
      #lrc::before {
            position: absolute;
            content: attr(data-lrc);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: transparent;
            overflow: hidden;
            white-space: pre;
          background: linear-gradient(45deg,#ff0000, #800000, #fff, #00ff00, #000078);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            
            clip-path: inset(0 100% 0 0);
            animation: shineFlow 3s linear infiniteforwards, lrcFill var(--tt) linear forwards;

            animation-play-state: var(--state, paused);
            text-shadow: 0 0 2px rgba(26, 77, 62, 0.2);
      }

      /* 流光移动动画 */
      @keyframes shineFlow {
             0% { background-position: 150% 60%; filter: hue-rotate(0deg)brightness(140%)contrast(350%);}
         
      }

      /* 歌词填充动画 */
      @keyframes lrcFill {
            0% { clip-path: inset(0 100% 0 0); }
            100% { clip-path: inset(0 0% 0 0); }
      }

      /* 用于切换动画类名 */
      #lrc::before {
            animation-name: shineFlow, cover1;
      }
      #lrc::before {
            animation-name: shineFlow, cover2;
      }
      @keyframes cover1 { to { clip-path: inset(0 0 0 0); } }
      @keyframes cover2 { to { clip-path: inset(0 0 0 0); } }

      /* ===== 控制栏 ===== */
      #amazingaudioplayer-1 .amazingaudioplayer-bar {
            position: relative;
            height: 100px;top: 10px;
      }

      /* 播放/暂停 - 居中 */
      #amazingaudioplayer-1 .amazingaudioplayer-playpause {
            position: absolute;
            left: 50%;
            margin-left: -24px;
            top: 12px;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-play,
      #amazingaudioplayer-1 .amazingaudioplayer-pause {
            width: 48px;
            height: 48px;
            background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/playpause-48-48-1.png');
            background-repeat: no-repeat;
            background-size: auto;
            cursor: pointer;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-play {
            background-position: left top;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-pause {
            background-position: right top;
            display: none;
      }

       /* 上一首 */
      #amazingaudioplayer-1 .amazingaudioplayer-prev {
            position: absolute;
            left: 50%;
            margin-left: -72px;
            top: 12px;
            width: 48px;
            height: 48px;
            background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/prevnext-48-48-1.png');
            background-repeat: no-repeat;
            background-size: auto;
            background-position: left top;
            cursor: pointer;
      }

      /* 下一首 */
      #amazingaudioplayer-1 .amazingaudioplayer-next {
            position: absolute;
            left: 50%;
            margin-left: 24px;
            top: 12px;
            width: 48px;
            height: 48px;
            background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/prevnext-48-48-1.png');
            background-repeat: no-repeat;
            background-size: auto;
            background-position: right top;
            cursor: pointer;
      }
      /* 循环按钮 */
      #amazingaudioplayer-1 .amazingaudioplayer-loop {
            position: absolute;
            top: 24px;
            left: 50%;
            margin-left: 78px;
            width: 24px;
            height: 24px;
            background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/loop-24-24-2.png');
            background-repeat: no-repeat;
            background-size: auto;
            background-position: left top;
            cursor: pointer;
      }

      /* 列表切换按钮（SVG三横线） */
      .playlist-btn {
            position: absolute;
            top: 24px;
            left: 50%;
            margin-left: 108px;
            width: 24px;
            height: 24px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 35;
      }

      .playlist-btn svg {
            stroke: #2b5e4f;
            stroke-width: 2.2;
            width: 20px;
            height: 20px;
      }

      .playlist-btn:hover svg {
            stroke: #1a392f;
      }

      /* 时间显示 */
      #amazingaudioplayer-1 .amazingaudioplayer-time {
            position: absolute;
            top: 30px;
            left: 20px;
            color: #2b5e4f;
            font-size: 12px;
            font-weight: 600;
            font-family: monospace;
            background: rgba(255, 248, 225, 0);
            padding: 0 8px;
            border-radius: 20px;
      }

      /* ===== 音量控制（边框改细变淡） ===== */
      #amazingaudioplayer-1 .amazingaudioplayer-volume {
            position: absolute;
            top: 24px;
            left: 50%;
            margin-left: 138px;
            z-index: 40;
            cursor: pointer;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-volume-button {
            width: 24px;
            height: 24px;
            background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/volume-24-24-2.png');
            background-repeat: no-repeat;
            background-size: auto;
            background-position: left top;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-volume-bar {
            position: absolute;
            left: 50%;
            margin-left: -10px;
            bottom: 20%;
            width: 6px;
            height: 60px;
            background-color:rgba(254, 252, 245, 0.4)
            backdrop-filter: blur(0px);
            border-radius: 3px;
            padding: 8px 4px;
            visibility: hidden;
            opacity: 0;
            transition: 0.15s;
            margin-bottom: 8px;
            border: 0.5px solid rgba(233, 226, 199, 0);
      }

      #amazingaudioplayer-1 .amazingaudioplayer-volume:hover .amazingaudioplayer-volume-bar,
      #amazingaudioplayer-1 .amazingaudioplayer-volume-button:hover+.amazingaudioplayer-volume-bar {
            visibility: visible;
            opacity: 1;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-volume-bar-adjust {
            position: relative;
            width: 100%;
            height: 100%;
            background-color:#d9d4b5;
            border-radius: 20px;
            overflow: hidden;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-volume-bar-adjust-active {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 80%;
            background:#429d7a;
            border-radius: 20px;
      }

      /* ===== 进度条 ===== */
      #amazingaudioplayer-1 .amazingaudioplayer-progress {
            position: relative;
            margin-top: 4px;
            margin-bottom: 8px;
            width: calc(100% - 32px);
            height: 6px;
            background-color: #d9d4b5;
            cursor: pointer;
            margin-left: auto;
            margin-right: auto;
            border-radius: 12px;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-progress-loaded {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background-color: #bcb694;
            width: 0%;
            border-radius: 12px;
      }

      #amazingaudioplayer-1 .amazingaudioplayer-progress-played {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background:#429d7a;
            width: 0%;
            border-radius: 12px;
      }

      /* ===== 底部歌曲信息 ===== */
      #amazingaudioplayer-1 .amazingaudioplayer-tracklist {
            margin: 2px 16px 0;
            background: rgba(235, 225, 200, 0.5);
            border-radius: 20px;
            padding: 4px 12px;
            text-align: center;
      }

      .current-info {font-family:"Ma Shan Zheng","STKaiti","SimHei",   cursive, serif;
            font-size: 17px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #1f4e3f;
      }

      .current-sub {
            font-size: 13px;
            opacity: 0.7;
            color: #2b5e4f;
      }

      /* ===== 播放列表浮层 ===== */
      .playlist-dropdown {
            position: absolute;
            bottom: 110px;
            right: 60%;
            width: 320px;
            max-height: 260px;
            background: rgba(255, 251, 240, 0.2);
            backdrop-filter: blur(14px);
            border-radius: 20px;
            box-shadow: 0 20px 32px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(210, 195, 150, 0.7);
            z-index: 200;
            overflow: hidden;
            display: none;
            flex-direction: column;
      }

      .playlist-dropdown.show {
            display: flex;
      }

      .dropdown-header {
            padding: 10px 0px;
            background: #efe6d2;
            font-weight: 700;
            color: #1f4e3f;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ddd2b6;
      }

      .close-dropdown {
            cursor: pointer;
            font-size: 22px;
            line-height: 1;
            color: #5f6b58;
      }

      .song-list {
            list-style: none;
            overflow-y: auto;
            max-height: 220px;
            margin: 0;
            padding: 0;
      }

      .song-list li {
            padding: 8px 16px;
            font-size: 14px;
            color: #2c4a3b;
            cursor: pointer;
            display: flex;
            gap: 10px;
            border-bottom: 1px solid #f0e9d6;
            transition: 0.1s;
      }

      .song-list li.active-song {
            background: #0000;
            font-weight: 700;
            color: #0d2f24;
      }

      .song-list li:hover {
            background: #0000;
      }
    </style>
<div id="papa">

    <!-- ===== 播放器主体 ===== -->
    <div id="amazingaudioplayer-1">
      <div class="amazingaudioplayer-player-wrapper">

            <!-- 歌词区域 -->
            <div class="amazingaudioplayer-text">
                <div class="amazingaudioplayer-lyrics">
                  <div id="lrc" data-lrc="♪ 加载中..." data-motion="cover1">♪ 加载中...</div>
                </div>
            </div>

            <!-- 控制栏 -->
            <div class="amazingaudioplayer-bar">
                <div class="amazingaudioplayer-playpause">
                  <div class="amazingaudioplayer-play" id="playBtn"></div>
                  <div class="amazingaudioplayer-pause" id="pauseBtn" style="display:none;"></div>
                </div>
                <div class="amazingaudioplayer-prev" id="prevBtn"></div>
                <div class="amazingaudioplayer-next" id="nextBtn"></div>
                <div class="amazingaudioplayer-loop" id="loopBtn"></div>
                <div class="amazingaudioplayer-time" id="timeDisplay">00:00 / 00:00</div>
                <div class="amazingaudioplayer-volume">
                  <div class="amazingaudioplayer-volume-button" id="volBtn"></div>
                  <div class="amazingaudioplayer-volume-bar">
                        <div class="amazingaudioplayer-volume-bar-adjust" id="volAdjust">
                            <div class="amazingaudioplayer-volume-bar-adjust-active" id="volFill"></div>
                        </div>
                  </div>
                </div>
                <button class="playlist-btn" id="playlistBtn" title="播放列表">
                  <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <line x1="3" y1="6" x2="21" y2="6"></line>
                        <line x1="3" y1="12" x2="21" y2="12"></line>
                        <line x1="3" y1="18" x2="21" y2="18"></line>
                  </svg>
                </button>
            </div>

            <!-- 进度条 -->
            <div class="amazingaudioplayer-progress" id="progressTrack">
                <div class="amazingaudioplayer-progress-loaded" id="loadedBar"></div>
                <div class="amazingaudioplayer-progress-played" id="playedBar"></div>
            </div>

            <!-- 底部歌曲信息 -->
            <div class="amazingaudioplayer-tracklist">
                <div class="current-info" id="currentSongName"></div>
                <div class="current-sub" id="currentSongSub">mp3专辑播放器</div>
            </div>

      </div>
    </div>

    <!-- 播放列表浮层 -->
    <div id="playlistDropdown" class="playlist-dropdown">
      <div class="dropdown-header">
            <span>&#128214; 播放列表</span>
            <span class="close-dropdown" id="closeDropdownBtn">&times;</span>
      </div>
      <ul class="song-list" id="songListContainer"></ul>
    </div>
</div>
    <script>
      // ========== 歌曲数据 ==========
      const songs = [{
            title: "云边的思念",
            src: "https://music.163.com/song/media/outer/url?id=3379577341.mp3",
            lrc: `《云边的思念》
演唱：陈嘉宇
编辑制作 :亚伦
云在天边风在耳畔
心事轻淡落满山川
路还很远你已不见
只剩想念绕在云间
云影慢慢飘向远方
心事轻轻无人来讲
晚风微凉旧梦一场
思念生长不肯遗忘
云边的思念
漫过了天边
风带一声念
落在你窗前
云边的思念
缠成了流年
不问多遥远
心一直相连
月落窗前星影浅浅
回忆蔓延温柔不变
云卷云舒岁岁年年
那份眷恋藏在心间
云过山岗风过旧巷
时光流淌念念不忘
梦有多长爱有多烫
云边守望等你回望
云边的思念
漫过了天边
风带一声念
落在你窗前
云边的思念
缠成了流年
不问多遥远
心一直相连
一朵云一片天
一句念一瞬间
爱未减情未变
守着云守着愿
云边的思念
漫过了天边
风带一声念
落在你窗前
云边的思念
缠成了流年
不问多遥远
心一直相连
云边思念岁岁安然
`},{
            title: "转身又见秋-影子",
            src: "https://www.panurl.cn/view.php/d8183cb6ddd05de0c3aaac3761a7c728.mp3",
            lrc: `转身又见秋-影子
词: 四毛
曲: 李勇军
编曲: 姜凯升
和声: 雪无影
后期: 鲁晓锋
月亮替我倒满酒
秋风陪我醉了一宿
都说这世上酒能解忧
我却喝到泪湿眼眸
相思最怕绕指柔
才下眉间却上心头
对你的思念覆水难收
醉了曾经醉了今秋
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受
相思最怕绕指柔
才下眉间却上心头
对你的思念覆水难收
醉了曾经醉了今秋
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受
`
      }, {
            title: "恋曲1990（律动男版）",
            src: "http://music.163.com/song/media/outer/url?id=3389354291.mp3",
            lrc: `恋曲1990（律动男版） DJ阿涵
音画设计：亚伦影音工作室
乌溜溜的黑眼珠和你的笑脸
怎么也难忘记你容颜的转变
轻飘飘的旧时光就这么溜走
转头回去看看时已匆匆数年
苍茫茫的天涯路是你的飘泊
寻寻觅觅长相守是我的脚步
黑漆漆的孤枕边是你的温柔
醒来时的清晨里是我的哀愁
或许明日太阳西下倦鸟已归时
你将已经踏上旧时的归途
人生难得再次寻觅相知的伴侣
生命终究难舍蓝蓝的白云天
轰隆隆的雷雨声在我的窗前
怎么也难忘记你离去的转变
孤单单的身影后寂寥的心情
永远无怨的是我的双眼
苍茫茫的天涯路是你的飘泊
寻寻觅觅长相守是我的脚步
黑漆漆的孤枕边是你的温柔
醒来时的清晨里是我的哀愁
或许明日太阳西下倦鸟已归时
你将已经踏上旧时的归途
人生难得再次寻觅相知的伴侣
生命终究难舍蓝蓝的白云天
轰隆隆的雷雨声在我的窗前
怎么也难忘记你离去的转变
孤单单的身影后寂寥的心情
永远无怨的是我的双眼
永远无怨的是我的双眼`
      }, {
            title: "新鸳鸯蝴蝶梦",
            src: "https://www.panurl.cn/view.php/a419b9d1a4112ea840aff217b909a6c0.m4a",
            lrc: `嘉欣《新鸳鸯蝴蝶梦》
音画设计：亚伦影音工作室
没有三分爱意在
怎惹七分伤与害
爱恋一对字 拆不开
旧爱一声再见后
转眼新欢走过来
爱新不爱旧 还是爱
历遍风花与雪月
可有结果可有缘
想天想地 太辛酸
乱世心慌意更乱
找个青天许个愿
怨天且怨地 难尽怨
鸳鸯似永远不死
哪管哪段年代
红男绿女都相信相爱
可化蝶远飞
旧戏新做 化作传奇
最易惹乐与悲
最难判是与非
又甜又苦全是戏
没有三分爱意在
怎惹七分伤与害
爱恋一对字 拆不开
旧爱一声再见后
转眼新欢走过来
爱新不爱旧 还是爱
鸳鸯似永远不死
哪管哪段年代
红男绿女都相信相爱
可化蝶远飞
旧戏新做 化作传奇
最易惹乐与悲
最难判是与非
又甜又苦全是戏
`
      }, {
            title: "落日留恋的地方",
            src: "https://music.163.com/song/media/outer/url?id=3389032274.mp3",
            lrc: `落日留恋的地方
作词：铃花花
作曲：铃花花
演唱：铃花花
编辑制作：亚伦
呼伦湖含着斜阳
候鸟衔来半片暮色
马头琴轻摇着金色光阴
锡林郭勒 成了歌的故乡
科尔沁草原绿了又黄
云影低垂 风也很凉
宝格达乌拉神山沉默不语
这里是落日最美的地方
你走后 晚霞也变得苍茫
草原姑娘从不掉眼泪
只把思念藏进草场
心随云雁 划向远方
科尔沁草原绿了又黄
云影低垂 风也很凉
宝格达乌拉神山沉默不语
这里是落日最美的地方
你走后 晚霞也变得苍茫
草原姑娘从不掉眼泪
只把思念藏进草场
心随云雁 划向远方
心随云雁 划向远方
`
      }];

      // ========== DOM 引用 ==========
      var audio = new Audio();
      var playBtn = document.getElementById('playBtn');
      var pauseBtn = document.getElementById('pauseBtn');
      var prevBtn = document.getElementById('prevBtn');
      var nextBtn = document.getElementById('nextBtn');
      var loopBtn = document.getElementById('loopBtn');
      var timeDisplay = document.getElementById('timeDisplay');
      var progressTrack = document.getElementById('progressTrack');
      var loadedBar = document.getElementById('loadedBar');
      var playedBar = document.getElementById('playedBar');
      var volBtn = document.getElementById('volBtn');
      var volFill = document.getElementById('volFill');
      var volAdjust = document.getElementById('volAdjust');
      var lrcElement = document.getElementById('lrc');
      var currentSongNameSpan = document.getElementById('currentSongName');
      var currentSongSub = document.getElementById('currentSongSub');
      var playlistBtn = document.getElementById('playlistBtn');
      var closeDropdownBtn = document.getElementById('closeDropdownBtn');
      var dropdown = document.getElementById('playlistDropdown');
      var songListContainer = document.getElementById('songListContainer');

      // ========== 状态 ==========
      var currentIndex = 0;
      var isPlaying = false;
      var loopMode = 0;
      var volume = 0.80;
      var isDragging = false;
      var lyricsData = [];
      var currentLrcIndex = -1;
      var motionFlag = true;

      // ========== 工具 ==========
      function formatTime(sec) {
            if (isNaN(sec) || !isFinite(sec) || sec < 0) return '00:00';
            var m = Math.floor(sec / 60);
            var s = Math.floor(sec % 60);
            return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
      }

      function parseLrc(lrcStr) {
            if (!lrcStr) return [];
            var lines = lrcStr.split(/\r?\n/);
            var items = [];
            var regex = /\[(\d{2}):(\d{2}\.\d{2})\]/;
            for (var i = 0; i < lines.length; i++) {
                var line = lines;
                var m = line.match(regex);
                if (m) {
                  var t = parseInt(m) * 60 + parseFloat(m);
                  var txt = line.replace(regex, '').trim();
                  if (txt && !txt.includes('LRC编辑') && !txt.includes('歌手：') && !txt.includes('词：') && !txt.includes(
                            '曲：')) {
                        items.push({ time: t, lrc: txt });
                  }
                }
            }
            items.sort(function(a, b) { return a.time - b.time; });
            for (var j = 0; j < items.length; j++) {
                items.duration = (j + 1 < items.length) ? items.time - items.time : 4.0;
                if (items.duration <= 0.2) items.duration = 0.8;
            }
            return items;
      }

      function renderSongList() {
            songListContainer.innerHTML = '';
            for (var i = 0; i < songs.length; i++) {
                var li = document.createElement('li');
                li.className = i === currentIndex ? 'active-song' : '';
                li.innerHTML = '<span>' + String(i + 1).padStart(2, '0') + '</span><span>' + songs.title + '</span>';
                li.onclick = (function(idx) {
                  return function() {
                        if (currentIndex === idx) { closeDropdown(); return; }
                        loadSong(idx);
                        if (!isPlaying) play();
                        else audio.play().catch(function() {});
                        closeDropdown();
                  };
                })(i);
                songListContainer.appendChild(li);
            }
      }

      function loadSong(idx) {
            if (idx < 0) idx = 0;
            if (idx >= songs.length) idx = songs.length - 1;
            currentIndex = idx;
            var s = songs;
            var wasPlaying = isPlaying;
            audio.pause();
            audio.src = s.src;
            audio.load();
            lyricsData = parseLrc(s.lrc);
            currentLrcIndex = -1;
            if (lyricsData.length) {
                lrcElement.innerText = lyricsData.lrc;
                lrcElement.setAttribute('data-lrc', lyricsData.lrc);
                lrcElement.style.setProperty('--tt', '0.8s');
                lrcElement.style.setProperty('--state', 'paused');
            } else {
                lrcElement.innerText = "♪ ";
                lrcElement.setAttribute('data-lrc', "♪");
            }
            currentSongNameSpan.innerText = s.title;
            currentSongSub.innerText = "mp3专辑播放器";
            renderSongList();
            if (wasPlaying) {
                audio.play().then(function() {
                  isPlaying = true;
                  updateBtnUI();
                  lrcElement.style.setProperty('--state', 'running');
                  fullRefreshLyrics();
                }).catch(function(e) { console.warn("自动播放被阻止"); });
            } else {
                isPlaying = false;
                updateBtnUI();
                lrcElement.style.setProperty('--state', 'paused');
                fullRefreshLyrics();
            }
      }

      function updateBtnUI() {
            playBtn.style.display = isPlaying ? 'none' : 'block';
            pauseBtn.style.display = isPlaying ? 'block' : 'none';
      }

      function applyLyrics(txt, dur) {
            lrcElement.innerText = txt;
            lrcElement.setAttribute('data-lrc', txt);
            var newMotion = motionFlag ? 'cover1' : 'cover2';
            lrcElement.setAttribute('data-motion', newMotion);
            motionFlag = !motionFlag;
            lrcElement.style.setProperty('--state', 'paused');
            void lrcElement.offsetHeight;
            var d = Math.max(0.3, Math.min(dur, 3.2));
            lrcElement.style.setProperty('--tt', d + 's');
            if (isPlaying && !audio.paused) lrcElement.style.setProperty('--state', 'running');
            else lrcElement.style.setProperty('--state', 'paused');
      }

      function refreshLrc(ct) {
            if (!lyricsData.length) return;
            var idx = -1;
            for (var i = lyricsData.length - 1; i >= 0; i--) {
                if (ct >= lyricsData.time - 0.03) {
                  idx = i;
                  break;
                }
            }
            if (idx === -1 && lyricsData.length) idx = 0;
            if (idx === currentLrcIndex) {
                if (currentLrcIndex >= 0 && isPlaying && !audio.paused) {
                  var remain = Math.max(0.2, lyricsData.duration - (ct - lyricsData
                  .time));
                  if (remain > 0.1) {
                        lrcElement.style.setProperty('--state', 'paused');
                        void lrcElement.offsetHeight;
                        lrcElement.style.setProperty('--tt', remain + 's');
                        lrcElement.style.setProperty('--state', 'running');
                  }
                }
                return;
            }
            if (idx >= 0 && idx < lyricsData.length) {
                currentLrcIndex = idx;
                var remain2 = lyricsData.duration;
                if (ct > lyricsData.time) remain2 = Math.max(0.2, lyricsData.duration - (ct - lyricsData
                .time));
                applyLyrics(lyricsData.lrc, remain2);
            }
      }

      function fullRefreshLyrics() {
            if (audio.duration) refreshLrc(audio.currentTime);
      }

      function updateUI() {
            if (!audio.duration) return;
            var pct = (audio.currentTime / audio.duration) * 100;
            playedBar.style.width = pct + '%';
            timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
            refreshLrc(audio.currentTime);
            if (audio.buffered.length) {
                var loaded = audio.buffered.end(audio.buffered.length - 1);
                loadedBar.style.width = Math.min((loaded / audio.duration) * 100, 100) + '%';
            }
      }

      function play() {
            audio.play().then(function() {
                isPlaying = true;
                updateBtnUI();
                lrcElement.style.setProperty('--state', 'running');
                fullRefreshLyrics();
            }).catch(function(e) { console.log("播放失败，请手动点击"); });
      }

      function pause() {
            audio.pause();
            isPlaying = false;
            updateBtnUI();
            lrcElement.style.setProperty('--state', 'paused');
      }

      function togglePlay() { isPlaying ? pause() : play(); }

      function prevSong() {
            var idx = (currentIndex - 1 + songs.length) % songs.length;
            loadSong(idx);
            if (!isPlaying) play();
            else audio.play().catch(function() {});
      }

      function nextSong() {
            var idx = (currentIndex + 1) % songs.length;
            loadSong(idx);
            if (!isPlaying) play();
            else audio.play().catch(function() {});
      }

      function toggleLoop() {
            loopMode = 1 - loopMode;
            loopBtn.style.backgroundPosition = loopMode ? 'center top' : 'left top';
      }

      function setProgressByEvent(e) {
            var rect = progressTrack.getBoundingClientRect();
            var x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
            if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration) && audio.duration > 0) {
                audio.currentTime = x * audio.duration;
            }
            playedBar.style.width = (x * 100) + '%';
            timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
      }

      function setVolume(val) {
            volume = Math.max(0, Math.min(1, val));
            audio.volume = volume;
            volFill.style.height = (volume * 100) + '%';
            volBtn.style.backgroundPosition = (volume === 0 ? 'right top' : 'left top');
      }

      function setVolumeByEvent(e) {
            var rect = volAdjust.getBoundingClientRect();
            var y = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
            setVolume(y);
      }

      function openDropdown() { renderSongList();
            dropdown.classList.add('show'); }

      function closeDropdown() { dropdown.classList.remove('show'); }

      // ========== 事件绑定 ==========
      playBtn.addEventListener('click', togglePlay);
      pauseBtn.addEventListener('click', togglePlay);
      prevBtn.addEventListener('click', prevSong);
      nextBtn.addEventListener('click', nextSong);
      loopBtn.addEventListener('click', toggleLoop);

      progressTrack.addEventListener('click', function(e) { setProgressByEvent(e); });
      progressTrack.addEventListener('mousedown', function(e) {
            isDragging = true;
            setProgressByEvent(e);
            document.addEventListener('mousemove', onDragMove);
            document.addEventListener('mouseup', onDragEnd);
            e.preventDefault();
      });

      function onDragMove(e) { setProgressByEvent(e); }

      function onDragEnd(e) {
            isDragging = false;
            setProgressByEvent(e);
            document.removeEventListener('mousemove', onDragMove);
            document.removeEventListener('mouseup', onDragEnd);
      }

      volBtn.addEventListener('click', function() { setVolume(volume > 0 ? 0 : 0.8); });
      volAdjust.addEventListener('mousedown', function(e) {
            setVolumeByEvent(e);
            document.addEventListener('mousemove', onVolMove);
            document.addEventListener('mouseup', onVolEnd);
            e.preventDefault();
      });

      function onVolMove(e) { setVolumeByEvent(e); }

      function onVolEnd(e) {
            setVolumeByEvent(e);
            document.removeEventListener('mousemove', onVolMove);
            document.removeEventListener('mouseup', onVolEnd);
      }

      playlistBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            dropdown.classList.contains('show') ? closeDropdown() : openDropdown();
      });
      closeDropdownBtn.addEventListener('click', closeDropdown);
      document.addEventListener('click', function(e) {
            if (dropdown.classList.contains('show') && !dropdown.contains(e.target) && e.target !== playlistBtn && !playlistBtn
                .contains(e.target)) {
                closeDropdown();
            }
      });

      audio.addEventListener('timeupdate', updateUI);
      audio.addEventListener('loadedmetadata', function() {
            if (lyricsData.length) applyLyrics(lyricsData.lrc, lyricsData.duration);
            updateUI();
            if (isPlaying) play();
      });
      audio.addEventListener('ended', function() {
            if (loopMode === 1) {
                audio.currentTime = 0;
                audio.play().catch(function() {});
                fullRefreshLyrics();
            } else {
                nextSong();
            }
      });

      document.addEventListener('keydown', function(e) {
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
            if (e.code === 'Space') { e.preventDefault();
                togglePlay(); }
      });

      // ========== 初始化 ==========
      setVolume(0.8);
      loopBtn.style.backgroundPosition = 'left top';
      loadSong(0);

      // 自动播放
      setTimeout(function() {
            play();
      }, 500);

      console.log(' 播放器已加载');
    </script>

朵拉 发表于 2026-9-13 19:41

好制作，欣赏学习了{:4_204:}

杨帆 发表于 2026-9-13 20:22

本帖最后由 杨帆 于 2026-9-13 20:26 编辑

好听的专辑，别样的感受，谢谢亚伦老师精彩示范{:4_190:}

小辣椒 发表于 2026-9-15 22:35

看见朵拉的帖过来找一下，看见了，亚纶这个播放器修改的非常漂亮，把2个js都加代码里面了，歌词颜色也是改的漂亮，按钮用了岁月的连接

小辣椒 发表于 2026-9-15 22:35

欣赏亚纶好制作{:4_187:}

小九 发表于 2026-9-16 09:06

很好听的一首歌，播放器很漂亮！{:4_187:}

查看完整版本: 云边的思念