论坛 › 音乐沙龙 › 叹 郁 孤 TO：亚伦老师

朵拉 发表于 2026-9-13 21:34

叹 郁 孤 TO：亚伦老师

<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://pan.suyanw.cn/view.php/8cbb9db0440d09cce740214767cc2a95.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: bold;
            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: #654123;
            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 2.8s linear infinite, 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://pan.suyanw.cn/view.php/079febf8d9400b5f61c31315eee0e4f4.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 21:36

@亚伦影音工作室
亚伦老师 晚上好，学生交作业，请您多指正{:4_190:}

亚伦影音工作室 发表于 2026-9-13 21:59

朵拉 发表于 2026-9-13 21:36
@亚伦影音工作室
亚伦老师 晚上好，学生交作业，请您多指正

很漂亮，聪明伶俐！

红影 发表于 2026-9-13 22:48

制作漂亮，歌曲好帖。欣赏朵宝好帖{:4_187:}

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

欣赏朵拉的美帖，是亚纶的制作？我去看看，这个播放器好像。。。。。

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

这个播放器皮肤设置了透明，背景黑的，出来就会黑的了，背景要稍微浅一点的颜色。否则旁边几个按钮会看不清楚

查看完整版本: 叹 郁 孤 TO：亚伦老师