风萧 发表于 2026-8-25 16:55:20

分享个人收藏的单曲合集【20260901更新】

<style type="text/css">
/* ========== 外层容器（不影响外部页面） ========== */
.audio-playlist-container {
    max-width: 800px;
    margin: 15px auto;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    color: #fff;
    box-sizing: border-box;
}
/* 容器内局部 reset —— 只影响播放器内部，不会改到论坛页面 */
.audio-playlist-container, .audio-playlist-container * {
    box-sizing: border-box;
}
.audio-playlist-container * {
    margin: 0;
    padding: 0;
}

/* ===== 主播放区（替代视频画面） ===== */
.audio-playlist-container .audio-main {
    position: relative;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    padding: 30px 20px 20px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* 背景柔光 */
.audio-playlist-container .audio-main::before {
    content: "";
    position: absolute;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(231,76,60,0.25) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.audio-playlist-container .audio-info-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent);
    padding: 15px 20px;
    z-index: 10;
}
.audio-playlist-container .audio-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.audio-playlist-container .audio-index {
    font-size: 12px;
    opacity: 0.8;
}

/* 唱片封面 */
.audio-playlist-container .disc-wrap {
    position: relative;
    width: 180px;
    height: 180px;
    margin-top: 20px;
    z-index: 2;
}
.audio-playlist-container .disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
      radial-gradient(circle at center, #e74c3c 0 18%, #111 18.5% 22%, #222 22.5% 50%, #111 50.5% 52%, #222 52.5% 100%);
    box-shadow: 0 8px 30px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.8);
    position: relative;
    animation: apc-spin 8s linear infinite;
    animation-play-state: paused;
}
.audio-playlist-container .disc::after {
    content: "♪";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 28px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.audio-playlist-container .disc.playing { animation-play-state: running; }
@keyframes apc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* 唱针 */
.audio-playlist-container .needle {
    position: absolute;
    top: -10px; right: 10px;
    width: 60px; height: 90px;
    z-index: 3;
    transform-origin: top right;
    transform: rotate(-25deg);
    transition: transform 0.4s;
}
.audio-playlist-container .needle.playing { transform: rotate(-5deg); }
.audio-playlist-container .needle::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #666;
    border: 2px solid #888;
}
.audio-playlist-container .needle::after {
    content: "";
    position: absolute;
    top: 8px; right: 6px;
    width: 3px; height: 75px;
    background: linear-gradient(to bottom, #999, #ccc 30%, #555 100%);
    border-radius: 2px;
    transform: rotate(15deg);
    transform-origin: top;
}

/* 音频波形 */
.audio-playlist-container .waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
    margin-top: 18px;
    z-index: 2;
}
.audio-playlist-container .waveform span {
    display: block;
    width: 4px;
    background: linear-gradient(to top, #c0392b, #e74c3c);
    border-radius: 2px;
    height: 6px;
    transition: height 0.15s;
}
.audio-playlist-container .waveform.playing span {
    animation: apc-wave 1s ease-in-out infinite;
}
.audio-playlist-container .waveform span:nth-child(1) { animation-delay: 0s; }
.audio-playlist-container .waveform span:nth-child(2) { animation-delay: 0.1s; }
.audio-playlist-container .waveform span:nth-child(3) { animation-delay: 0.2s; }
.audio-playlist-container .waveform span:nth-child(4) { animation-delay: 0.3s; }
.audio-playlist-container .waveform span:nth-child(5) { animation-delay: 0.4s; }
.audio-playlist-container .waveform span:nth-child(6) { animation-delay: 0.3s; }
.audio-playlist-container .waveform span:nth-child(7) { animation-delay: 0.2s; }
.audio-playlist-container .waveform span:nth-child(8) { animation-delay: 0.1s; }
.audio-playlist-container .waveform span:nth-child(9) { animation-delay: 0s; }
@keyframes apc-wave {
    0%, 100% { height: 6px; }
    50%      { height: 28px; }
}

/* audio 元素 */
.audio-playlist-container .audio-main audio {
    width: 100%;
    margin-top: 18px;
    z-index: 2;
    outline: none;
}
.audio-playlist-container .audio-main audio::-webkit-media-controls-panel {
    background-color: #2a2a2a;
}

/* ===== 控制栏 ===== */
.audio-playlist-container .audio-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #222;
    color: #fff;
    flex-wrap: wrap;
    gap: 8px;
}
.audio-playlist-container .control-group {
    display: flex;
    gap: 10px;
    align-items: center;
}
.audio-playlist-container .ctrl-btn {
    background: #444;
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: background 0.2s;
    line-height: 1.4;
}
.audio-playlist-container .ctrl-btn:hover { background: #666; }
.audio-playlist-container .ctrl-btn.active { background: #e74c3c; }

/* ===== 播放列表 ===== */
.audio-playlist-container .playlist {
    max-height: 500px;
    overflow-y: auto;
    background: #1a1a1a;
}
/* 局部滚动条 —— 只改播放器内部列表，不影响论坛页面滚动条 */
.audio-playlist-container .playlist::-webkit-scrollbar { width: 6px; }
.audio-playlist-container .playlist::-webkit-scrollbar-track { background: #1a1a1a; }
.audio-playlist-container .playlist::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }

.audio-playlist-container .playlist-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: all 0.2s;
    color: #ccc;
}
.audio-playlist-container .playlist-item:hover { background: #2a2a2a; }
.audio-playlist-container .playlist-item.playing {
    background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
    color: #fff;
}
.audio-playlist-container .playlist-item.played { opacity: 0.6; }
.audio-playlist-container .item-index {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 12px;
    flex-shrink: 0;
}
.audio-playlist-container .playlist-item.playing .item-index {
    background: #fff;
    color: #e74c3c;
}
.audio-playlist-container .item-info { flex: 1; min-width: 0; }
.audio-playlist-container .item-title {
    font-size: 14px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.audio-playlist-container .item-duration {
    font-size: 11px;
    opacity: 0.7;
}
.audio-playlist-container .playing-indicator {
    margin-left: 10px;
    font-size: 12px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .audio-playlist-container .audio-title { font-size: 14px; }
    .audio-playlist-container .playlist-item { padding: 10px; }
    .audio-playlist-container .disc-wrap { width: 140px; height: 140px; margin-top: 30px; }
    .audio-playlist-container .audio-main { min-height: 260px; padding-top: 40px; }
    .audio-playlist-container .ctrl-btn { padding: 6px 10px; font-size: 12px; }
}
</style>

<div class="audio-playlist-container">
    <div class="audio-main">
      <div class="audio-info-bar">
            <div class="audio-title" id="audioTitle">个人收藏的单曲合集</div>
            <div class="audio-index" id="audioIndex">第 1 首 / 共 N 首</div>
      </div>

      <div class="disc-wrap">
            <div class="needle" id="needle"></div>
            <div class="disc" id="disc"></div>
      </div>

      <div class="waveform" id="waveform">
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
      </div>

      <audio id="mainAudio" controls preload="metadata" playsinline webkit-playsinline>
            您的浏览器不支持HTML5音频播放，请升级浏览器。
      </audio>
    </div>

    <div class="audio-controls-bar">
      <div class="control-group">
            <button class="ctrl-btn" onclick="prevAudio()">⏮ 上一首</button>
            <button class="ctrl-btn" onclick="nextAudio()">下一首 ⏭</button>
      </div>
      <div class="control-group">
            <button class="ctrl-btn active" id="autoPlayBtn" onclick="toggleAutoPlay()">🔁 连播: 开</button>
            <button class="ctrl-btn" id="loopBtn" onclick="toggleLoop()">🔂 循环: 关</button>
      </div>
    </div>

    <div class="playlist" id="playlist"></div>
</div>

<script type="text/javascript">
// ======== 音频列表配置（替换为你自己的音频地址）========
var audioList = [
    {
      title: "声声慢 - 吴亮莹 吴侬软语",
      url: "https://www.joy127.com/url/158096.mp3",
      duration: ""
    },
    {
      title: "声声慢 - 韩菁英",
      url: "https://www.joy127.com/url/158097.mp3",
      duration: ""
    },
    {
      title: "处处吻 - 杨千嬅",
      url: "https://www.joy127.com/url/158110.mp3",
      duration: ""
    },
    {
      title: "万疆 - 李玉刚",
      url: "https://www.joy127.com/url/158111.mp3",
      duration: ""
    },
    {
      title: "情字最大 - 浅影阿",
      url: "https://www.joy127.com/url/158112.mp3",
      duration: ""
    },
    {
      title: "小道童 - 麦小兜",
      url: "https://www.joy127.com/url/158113.mp3",
      duration: ""
    },
    {
      title: "客官不可以 - 麦小兜",
      url: "https://www.joy127.com/url/158114.mp3",
      duration: ""
    },
    {
      title: "赤伶 - 谭晶",
      url: "https://www.joy127.com/url/158115.mp3",
      duration: ""
    },
    {
      title: "精忠报国 - 屠龙刚",
      url: "https://www.joy127.com/url/158116.mp3",
      duration: ""
    },
    {
      title: "秒针 - 阿梨粤",
      url: "https://www.joy127.com/url/158117.mp3",
      duration: ""
    },
    {
      title: "浪子闲话 - 花僮",
      url: "https://www.joy127.com/url/158118.mp3",
      duration: ""
    },
    {
      title: "笑纳 - 花僮",
      url: "https://www.joy127.com/url/158119.mp3",
      duration: ""
    },
    {
      title: "笑看风云 - 郑少秋",
      url: "https://www.joy127.com/url/158207.mp3",
      duration: ""
    },
    {
      title: "游山恋 - 浅影阿",
      url: "https://www.joy127.com/url/158239.mp3",
      duration: ""
    },
    {
      title: "禅花 - 沈丹丹",
      url: "https://www.joy127.com/url/158241.mp3",
      duration: ""
    },
    {
      title: "Simpa Pa Pa (Funky version) - Yefium",
      url: "https://www.joy127.com/url/158258.mp3",
      duration: ""
    },
    {
      title: "难却 - 平生不晚",
      url: "https://www.joy127.com/url/158262.mp3",
      duration: ""
    },
    {
      title: "十分十二寸 - 林子祥",
      url: "https://www.joy127.com/url/158342.mp3",
      duration: ""
    },
    {
      title: "爱情陷阱 - 谭咏麟",
      url: "https://www.joy127.com/url/158360.mp3",
      duration: ""
    },
    {
      title: "不再犹豫 - Beyond",
      url: "https://www.joy127.com/url/158361.mp3",
      duration: ""
    },
    {
      title: "赤裸裸 - 郑钧",
      url: "https://www.joy127.com/url/158362.mp3",
      duration: ""
    },
    {
      title: "国际歌 - 唐朝乐队",
      url: "https://www.joy127.com/url/158363.mp3",
      duration: ""
    },
    {
      title: "红日 - 李克勤",
      url: "https://www.joy127.com/url/158364.mp3",
      duration: ""
    },
    {
      title: "护花使者 - 李克勤",
      url: "https://www.joy127.com/url/158365.mp3",
      duration: ""
    },
    {
      title: "梦回唐朝 - 唐朝乐队",
      url: "https://www.joy127.com/url/158366.mp3",
      duration: ""
    },
    {
      title: "难念的经 - 周华健",
      url: "https://www.joy127.com/url/158367.mp3",
      duration: ""
    },
    {
      title: "朋友 - 谭咏麟",
      url: "https://www.joy127.com/url/158368.mp3",
      duration: ""
    },
    {
      title: "无地自容 - 黑豹乐队",
      url: "https://www.joy127.com/url/158369.mp3",
      duration: ""
    },
    {
      title: "半斤八两 - 许冠杰",
      url: "https://www.joy127.com/url/158372.mp3",
      duration: ""
    },
    {
      title: "浮夸 - 陈奕迅",
      url: "https://www.joy127.com/url/158373.mp3",
      duration: ""
    },
    {
      title: "浪人情歌 - 伍佰 & China Blue",
      url: "https://www.joy127.com/url/158374.mp3",
      duration: ""
    },
    {
      title: "浪子心声 - 许冠杰",
      url: "https://www.joy127.com/url/158375.mp3",
      duration: ""
    },
    {
      title: "突然的自我 - 伍佰 & China Blue",
      url: "https://www.joy127.com/url/158376.mp3",
      duration: ""
    },
    {
      title: "玛尼情歌 - 上官红燕",
      url: "https://www.joy127.com/url/158696.mp3",
      duration: ""
    },
    {
      title: "长街万象 - 程响",
      url: "https://www.joy127.com/url/158697.mp3",
      duration: ""
    },
    {
      title: "走马观花 - 王若熙",
      url: "https://www.joy127.com/url/158698.mp3",
      duration: ""
    }
    // 按此格式继续添加更多音频即可
];
// ========================================================

(function(){
    var currentIndex = 0;
    var autoPlayNext = true;
    var loopAll = false;
    var audio = document.getElementById('mainAudio');
    var playlistEl = document.getElementById('playlist');
    var disc = document.getElementById('disc');
    var needle = document.getElementById('needle');
    var waveform = document.getElementById('waveform');

    function setPlayingVisual(isPlaying) {
      if (isPlaying) {
            disc.classList.add('playing');
            needle.classList.add('playing');
            waveform.classList.add('playing');
      } else {
            disc.classList.remove('playing');
            needle.classList.remove('playing');
            waveform.classList.remove('playing');
      }
    }

    function formatTime(sec) {
      if (!sec || isNaN(sec)) return '';
      var m = Math.floor(sec / 60);
      var s = Math.floor(sec % 60);
      return m + ':' + (s < 10 ? '0' + s : s);
    }

    function initPlaylist() {
      playlistEl.innerHTML = '';
      for (var i = 0; i < audioList.length; i++) {
            var item = document.createElement('div');
            item.className = 'playlist-item' + (i === 0 ? ' playing' : '');
            item.setAttribute('data-index', i);
            item.innerHTML =
                '<div class="item-index">' + (i + 1) + '</div>' +
                '<div class="item-info">' +
                  '<div class="item-title">' + audioList.title + '</div>' +
                  '<div class="item-duration" data-dur-idx="' + i + '">' + (audioList.duration || '--:--') + '</div>' +
                '</div>' +
                '<div class="playing-indicator">' + (i === 0 ? '▶ 播放中' : '') + '</div>';
            item.onclick = (function(idx) {
                return function() { playAudio(idx); };
            })(i);
            playlistEl.appendChild(item);
      }
    }

    function updatePlaylistUI() {
      var items = playlistEl.querySelectorAll('.playlist-item');
      for (var i = 0; i < items.length; i++) {
            items.className = 'playlist-item';
            var indicator = items.querySelector('.playing-indicator');
            indicator.textContent = '';
            if (i < currentIndex) items.className += ' played';
            if (i === currentIndex) {
                items.className += ' playing';
                indicator.textContent = '▶ 播放中';
            }
      }
    }

    function playAudio(index) {
      if (index < 0) index = loopAll ? audioList.length - 1 : 0;
      if (index >= audioList.length) index = loopAll ? 0 : audioList.length - 1;
      currentIndex = index;
      var item = audioList;
      audio.src = item.url;
      audio.load();
      audio.play().then(function() {
            setPlayingVisual(true);
      }).catch(function(e) {
            setPlayingVisual(false);
      });
      document.getElementById('audioTitle').textContent = item.title;
      document.getElementById('audioIndex').textContent = '第 ' + (index + 1) + ' 首 / 共 ' + audioList.length + ' 首';
      updatePlaylistUI();
    }

    window.nextAudio = function() {
      if (currentIndex < audioList.length - 1) playAudio(currentIndex + 1);
      else if (loopAll) playAudio(0);
    };
    window.prevAudio = function() {
      if (currentIndex > 0) playAudio(currentIndex - 1);
      else if (loopAll) playAudio(audioList.length - 1);
    };
    window.toggleAutoPlay = function() {
      autoPlayNext = !autoPlayNext;
      var btn = document.getElementById('autoPlayBtn');
      btn.textContent = autoPlayNext ? '🔁 连播: 开' : '🔁 连播: 关';
      btn.className = 'ctrl-btn' + (autoPlayNext ? ' active' : '');
    };
    window.toggleLoop = function() {
      loopAll = !loopAll;
      var btn = document.getElementById('loopBtn');
      btn.textContent = loopAll ? '🔂 循环: 开' : '🔂 循环: 关';
      btn.className = 'ctrl-btn' + (loopAll ? ' active' : '');
    };

    audio.addEventListener('play', function() { setPlayingVisual(true); });
    audio.addEventListener('pause', function() { setPlayingVisual(false); });
    audio.addEventListener('ended', function() {
      setPlayingVisual(false);
      if (autoPlayNext) {
            if (currentIndex < audioList.length - 1) nextAudio();
            else if (loopAll) playAudio(0);
      }
    });
    audio.addEventListener('loadedmetadata', function() {
      var durEl = playlistEl.querySelector('');
      if (durEl && (!audioList.duration)) {
            var t = formatTime(audio.duration);
            durEl.textContent = t;
            audioList.duration = t;
      }
    });

    initPlaylist();
    playAudio(0);
})();
</script>

风萧 发表于 2026-8-28 06:34:43

陆续添加中，喜欢的可以直接下载

李可可 发表于 2026-9-2 01:31:43

2026．9．1更新
页: [1]
查看完整版本: 分享个人收藏的单曲合集【20260901更新】