论坛 › 动画音画 › [金属质感碟片+了了子多曲]创新播放器

亚伦影音工作室 发表于 2026-4-26 11:00

[金属质感碟片+了了子多曲]创新播放器

本帖最后由 亚伦影音工作室 于 2026-5-11 06:59 编辑 <br /><br /><style>
    .player-container {
      width: 1186px;
      height: 620px;
left: calc(50% - 81px);transform: translateX(-50%);
      background:#882200 url(https://www.oldkids.cn/upload/2026/04/26/photo_0_20260426065121969.jpg) no-repeat center/cover;
      border-radius: 2px;
    overflow: hidden;
      position: relative;
      
    }
   
   .player-content {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 10px;
    }
   #xiaobo {z-index: 100;
      width: 350px;
      height: 220px;
      margin: 250px 820px;
      position: relative;
         }
#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;
   transition: 6s;animation:opentop 0.5s 1 1s ;}

#all {position: absolute;width:200px; height:200px;top: 5px; left: 110px;z-index: -1; transition: 1s; animation:tion3s linear 1.5s infinite }
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
    .album-art-container {
      position: relative;
      top: 4px;
      margin: 0px 0px;
      border-radius: 8%;
   padding: 2px;
      width: 200px;
aspect-ratio: 1 / 1;
overflow: hidden;mask: radial-gradient(circle at 100% 50%,transparent 44px,#red 0%);-webkit-mask: radial-gradient(circle at 100% 50%,transparent 44px,red 0%);
      animation: rotate 3s linear infinite;
      animation-play-state: paused;
background:#fff000
}
   
.album-art {
      width: 100%;
      height: 100%;
      border-radius: 8%;
      overflow: hidden;
   
    }
   
    .album-art.playing {
      animation-play-state: running;
    }
   
    .album-art img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
   
    @keyframes rotate {
      
      to { filter: hue-rotate(360deg)}
    }
   
    .song-info {transform: perspective(12em) rotateY(6deg)rotatex(0deg);
      text-align: center;
      margin-bottom: 20px;
    }
   
    .song-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 5px;
      color: #fff000;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.3);
    }
   
    .song-artist {
      font-size: 22px;
      color: #ffed99;
    }

    .k-chin {animation: rotate 3s linear infinite;
      position: absolute;
      left: 18%;
      bottom: 100px;
      transform: perspective(12em) rotateY(6deg)rotatex(0deg);
      transform-origin: bottom center;
      width: 50%;
      height: 50%;
      background:linear-gradient(45deg, #74241c, #92673c, #73241b, #74241c, #92673c, #73241b);
      border-radius: 4px;
      border: 2px solid rgba(255, 215, 0, 0.8);
      display: flex;
      flex-direction: column;
      padding: 20px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.3);
      overflow: hidden;
    }
   
    .lyrics-area {
      width: 100%;
      height: 90px;
      position: relative;
   
      transform-origin: top center;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 8px;
      border: 2px solid rgba(255, 215, 0, 0.4);
      margin-bottom: 4px;
    }
   
    .lyrics-wrapper {
      display: flex;
      
      height: 100%;
      align-items: center;
      transform-origin: right;
      position: absolute;
      right: 0;
    }
   
    .lyric-line {
      font-size: 26px;
      white-space: nowrap;
      padding: 0 30px;
      opacity: 0.4;
      transition: all 0.5s ease;
      flex-shrink: 0;
      color:#00aa00;
   transform-style: preserve-3d;
    }
   
    .lyric-line.active {
      opacity: 1;
      font-size: 30px;
      font-weight: bold;
   
      
    }
   

    .progress-container {
      width: 100%;
      height: 10px;
      background: #000;
      border-radius: 2px;
      margin: 15px 0;
      position: relative;
      cursor: pointer;
      border: 2px solid rgba(255, 215, 0, 1);
      overflow: hidden;
      
    }
   
    .progress-bar {
      height: 100%;
      width: 0%;
      background: #ff0000;
      border-radius: 2px;
   
      position: relative;
      z-index: 2;
    }


   
    @keyframes progressShine {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .time-display {
      display: flex;
      justify-content: space-between;
      font-size: 18px; /* 增大字体 */
      color: #ffed99;
      margin: 10px 0 20px;
      width: 100%;
      font-weight: bold;
      text-shadow: 0 0 0px rgba(0, 0, 0, 0.7);
    }

    .controls {transform: perspective(12em) rotateY(6deg)rotatex(0deg);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      width: 100%;
      margin-top: 10px;
    }
   
    .control-btn {
      width: 55px;
      height: 55px;
      
   
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
   
    }
   
   .control-btn p {
      font-size: 22px;
      color: #ffd700;
      
    }
   

   
    .play-btn {
      width: 75px;
      height: 75px;

    }
.play-btn p {
      font-size: 36px;
      color: #ffd700;
      
    }
    .playlist {
      position: absolute;
      top: 40px;
      right: 50px;
      background: #0000;
      border-radius: 10px;
      padding: 10px;
      width: 240px;
height: 150px;
      overflow: auto;font-weight: 400;
      opacity: 0;
   border: 1px solid rgba(255, 215, 0, 0.8);
    }
    .playlist::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}
.playlist-title {list-style: none;
      font-size: 14px;
      margin-bottom: 10px;
      color: #fff;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.8);
      padding-bottom: 6px;
   
    }
   
    .playlist-item {
      padding: 8px 10px;
      line-height: 0.6;
      cursor: pointer;
      border-radius: 5px;
      margin-bottom: 5px;
   overflow-x: hidden;
      color: #fff;
    }
   
    .playlist-item:hover {list-style: none;
      background: rgba(255, 215, 0, 0.2);
    }
.player-container:hover .playlist {
      opacity: 1;
      transform: translateX(0);
    }
   

    .playlist-item.active {list-style: none;
      background: #0000;
      color: #00aa00;
      
    }
   
    .error-message {
      color: #ff9900;
      text-align: center;
      margin: 10px 0;
      font-size: 14px;
      background: rgba(255, 153, 0, 0.1);
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px solid rgba(255, 153, 0, 0.3);
    }
   
    .loading {
      color: #ffd700;
      text-align: center;
      margin: 10px 0;
      font-size: 14px;
    }

    .gold-ornament {
      position: absolute;
      z-index: 1;
      background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(218, 165, 32, 0.2));
      border: 1px solid rgba(255, 215, 0, 0.2);
    }
   
    .gold-ornament-1 {
      top: -1020px;
      left: 20px;
      width: 100px;
      height: 2px;
    }
   
    .gold-ornament-2 {
      top: -1020px;
      right: 20px;
      width: 100px;
      height: 2px;
    }
   
    .gold-ornament-3 {
      bottom: -120px;
      left: 20px;
      width: 100px;
      height: 2px;
    }
   
    .gold-ornament-4 {
      bottom: -120px;
      right: 20px;
      width: 100px;
      height: 2px;
    }
</style>

<div class="player-container">

   <div class="gold-ornament gold-ornament-1"></div>
    <div class="gold-ornament gold-ornament-2"></div>
    <div class="gold-ornament gold-ornament-3"></div>
    <div class="gold-ornament gold-ornament-4"></div>
    <div class="player-content">
<div id="xiaobo">
      <div class="album-art-container">
      <div class="album-art">
          <img src="https://pic1.imgdb.cn/item/69c1e915ac52b0dbce286f64.jpg" alt="专辑封面">
      </div>
      </div>
<div id="all">
<img src="https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png"id="cp" />
</div>
      </div>
      <div class="k-chin">
<div class="lyrics-area">
          <div class="lyrics-wrapper">

          </div>
      </div>

      <div class="progress-container" id="progressContainer">
          <div class="progress-bar" id="progressBar"></div>
      </div>

      <div class="time-display">
          <span class="current-time" id="currentTime">00:00</span>
          <span class="total-time" id="totalTime">00:00</span>
      </div>
<div class="song-info">
      <div class="song-title">曾经的月光</div>
      <div class="song-artist">恰恰恰恰恰</div>
      </div>
      <div class="controls">
          <div class="control-btn prev-btn" id="prevBtn">
            <p>◀◀</p>
          </div>
          <div class="control-btn play-btn" id="playBtn">
         <p> ▶</p>
          </div>
          <div class="control-btn next-btn" id="nextBtn">
          <p>▶▶</p>
          </div>
      </div>
      </div>
      
<div class="playlist">
      <div class="playlist-title"></div>
</div>
    </div>
</div>

<script>

    const songs = [
      {
      title: "曾经的月光",
      artist: "恰恰恰恰恰",
      src: "https://static.oldkids.com.cn/upload/2026/05/01/blog_260855907_20260501130256762.mp3",
      cover: "https://static.oldkids.cn/upload/2021/09/15/photo_0_20210915123457179.jpg",
      // 使用标准LRC格式歌词
      lrc: `曾经的月光
作词：王亚东
作曲：王敬苹
和声：小佑子
演唱：恰恰恰恰恰
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
孤单的路灯将影子拉长
谁又借着黑夜遮掩忧伤
那一份执着心中的滚烫
怎能说忘就忘
可怕的想念在深夜疯涨
独醉后即可触摸你脸庞
想又不敢想忘又不能忘
只剩两个人在回忆彷徨
或许我们怀念曾经的月光
洒在相爱的两个人肩膀
流星划过以后唯一的愿望
发誓一起到地久天长
如今的我们各自都在流浪
现实无情将有情人埋葬
月光还是曾经的那轮月光
希望多年来你别来无恙
(Music)
可怕的想念在深夜疯涨
独醉后即可触摸你脸庞
想又不敢想忘又不能忘
只剩两个人在回忆彷徨
或许我们怀念曾经的月光
洒在相爱的两个人肩膀
流星划过以后唯一的愿望
发誓一起到地久天长
如今的我们各自都在流浪
现实无情将有情人埋葬
月光还是曾经的那轮月光
希望多年来你别来无恙
或许我们怀念曾经的月光
洒在相爱的两个人肩膀
流星划过以后唯一的愿望
发誓一起到地久天长
如今的我们各自都在流浪
现实无情将有情人埋葬
月光还是曾经的那轮月光
希望多年来你别来无恙
(Music)
☆★梅竹谢谢欣赏★☆
=End=`
      },
      {
      title: "朋友别哭(女生烟嗓版)",
      artist: "林栖",
      src: "https://img2.oldkids.cn/upload/2026/04/19/blog_260848378_20260419141615677.mp3",
      cover: "https://img3.oldkids.cn/upload/2021/09/15/photo_0_20210915123458255.jpg",
      // 使用标准LRC格式歌词
      lrc: `朋友别哭(女生烟嗓版)
作词：陈乐融
作曲：莫凡
原唱：吕方
演唱：林栖
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
有没有一扇窗
能让你不绝望
看一看花花世界原来像梦一场
有人哭 有人笑
有人输 有人老
到结局还不是一样
有没有一种爱
能让你不受伤
这些年堆积多少对你的知心话
什么酒醒不了
什么痛忘不掉
向前走 就不可能回头望
朋友别哭
我依然是你心灵的归宿
朋友别哭
要相信自己的路
红尘中 有太多茫然痴心的追逐
你的苦 我也有感触
(Music)
有没有一种爱
能让你不受伤
这些年堆积多少对你的知心话
什么酒醒不了
什么痛忘不掉
向前走 就不可能回头望
朋友别哭
我依然是你心灵的归宿
朋友别哭
要相信自己的路
红尘中 有太多茫然痴心的追逐
你的苦 我也有感触
朋友别哭
我一直在你心灵最深处
朋友别哭
我陪你就不孤独
人海中 难得有几个真正的朋友
这份情 请你不要不在乎
人海中 难得有几个真正的朋友
这份情 请你不要不在乎
(Music)
☆★梅竹谢谢欣赏★☆
=End=`
      },
      {
      title: "爱的一路上有你",
      artist: "饶天亮",
      src: "https://img3.oldkids.cn/upload/2026/04/18/blog_260848378_20260418144210265.mp3",
      cover: "https://img1.oldkids.cn/upload/2021/09/16/photo_0_20210916213339664.jpg",
      // 使用标准LRC格式歌词
      lrc: `爱的一路上有你
作词：陈雅森
作曲：陈雅森
编曲：喜波
混音：周晓明
制作人：陈雅森
演唱：饶天亮
{00:19.37]☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
不经意的我和你相遇
好像某个梦里见过你
那样的熟悉那样的美丽
看着你已把自己忘记
认识你的那一刻时起
我们彼此深情有默契
你对我有意我也爱上你
从此我们相守在一起
在我爱的一路上有你
让我拥有快乐和甜蜜
永远都为你遮风和挡雨
不会让你流泪受委屈
在我爱的一路上有你
让我拥有快乐的福气
今生都和你不离也不弃
若有来生还和你相遇
(Music)
认识你的那一刻时起
我们彼此深情有默契
你对我有意我也爱上你
从此我们相守在一起
在我爱的一路上有你
让我拥有快乐和甜蜜
永远都为你遮风和挡雨
不会让你流泪受委屈
在我爱的一路上有你
让我拥有快乐的福气
今生都和你不离也不弃
若有来生还和你相遇
在我爱的一路上有你
让我拥有快乐和甜蜜
永远都为你遮风和挡雨
不会让你流泪受委屈
在我爱的一路上有你
让我拥有快乐的福气
今生都和你不离也不弃
若有来生还和你相遇
今生都和你不离也不弃
若有来生还和你相遇
(Music)
☆★梅竹谢谢欣赏★☆
=End=`
      },
      {
      title: "爱却不能拥有你",
      artist: "魏新雨",
      src: "https://img3.oldkids.cn/upload/2026/04/05/blog_260848378_20260405082150297.mp3",
      cover: "https://img2.oldkids.cn/upload/2021/09/15/photo_0_20210915123459190.jpg",
      // 使用标准LRC格式歌词
      lrc: `爱却不能拥有你 (Live)
作词：崔伟立
作曲：崔伟立
发行：四川省海洪轩文化传媒
演唱：魏新雨
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
遥望着你的背影
彷徨着不能靠近
熟悉的路口默默等你
路过却沉默不语
从黄昏守到黎明
仿佛就几个世纪
每当我闭上失眠眼睛
心里想的念的全是你
我爱却不能拥有你
总在夜里我默默哭泣
就像太阳月亮不能在一起
流星是我落下的泪滴
我爱却不能拥有你
世间最最遥远的距离
咫尺天涯你却可望不可及
化作天边恒星守护你
(Music)
从黄昏守到黎明
仿佛就几个世纪
每当我闭上失眠眼睛
心里想的念的全是你
我爱却不能拥有你
总在夜里我默默哭泣
就像太阳月亮不能在一起
流星是我落下的泪滴
我爱却不能拥有你
世间最最遥远的距离
咫尺天涯你却可望不可及
化作天边恒星守护你
我爱却不能拥有你
总在夜里我默默哭泣
就像太阳月亮不能在一起
流星是我落下的泪滴
我爱却不能拥有你
世间最最遥远的距离
咫尺天涯你却可望不可及
化作天边恒星守护你
咫尺天涯你却可望不可及
化作天边恒星守护你
(Music)
☆★梅竹谢谢欣赏★☆
=End=`
      },{
      title: "感谢有你陪着我",
      artist: "方君",
      src: "https://img4.oldkids.cn/upload/2026/03/03/blog_260848378_20260303112607559.mp3",
      cover: "https://img3.oldkids.cn/upload/2021/04/19/photo_0_20210419063607797.jpg",
      // 使用标准LRC格式歌词
      lrc: `感谢有你陪着我
作词：张宥伦
作曲：祁隆
编曲：喜波
演唱：方君
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
曾经一路有风有雨 也有刺伤
直到拥有你我才感受到爱的力量
我们不是在最美的时候和你相遇
而是遇见了 才有这最美的时光
或许人生就像一场 漂泊流浪
一路默默 守护陪伴在心上
无论艰难险阻都陪着我去闯
多少次感动 眼泪不停的流淌
感谢有你陪着我 让我不受伤
感谢有你陪着我 让我不失望
前行的路上 有你陪伴在身旁
注定我梦想的路上我们不会散场
(Music)
或许人生就像一场 漂泊流浪
一路默默 守护陪伴在心上
无论艰难险阻都陪着我去闯
多少次感动 眼泪不停的流淌
感谢有你陪着我 让我不受伤
感谢有你陪着我 让我不失望
前行的路上 有你陪伴在身旁
注定我梦想的路上我们不会散场
感谢有你陪着我 让我不受伤
感谢有你陪着我 让我不失望
前行的路上 有你陪伴在身旁
注定我梦想的路上我们不会散场
注定我梦想的路上我们不会散场
(Music)
☆★梅竹谢谢欣赏★☆
=End=
未经许可. 不得翻唱翻录或使用`
      }
    ];

    const audio = new Audio();
   
    const albumArt = document.querySelector('.album-art');
    const albumArtContainer = document.querySelector('.album-art-container');
    const albumArtImg = document.querySelector('.album-art img');
    const songTitle = document.querySelector('.song-title');
    const songArtist = document.querySelector('.song-artist');
    const lyricsWrapper = document.querySelector('.lyrics-wrapper');
    const progressBar = document.getElementById('progressBar');
    const currentTimeEl = document.getElementById('currentTime');
    const totalTimeEl = document.getElementById('totalTime');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const progressContainer = document.getElementById('progressContainer');
    const playlist = document.querySelector('.playlist');

    let currentSongIndex = 0;
    let isPlaying = false;
    let lyricElements = [];
    let activeLyricIndex = -1;
    let autoPlayEnabled = true;

    function parseLRC(lrcText) {
      const lines = lrcText.split('\n');
      const lyrics = [];
      
      for (let line of lines) {
      // 解析时间标签，支持格式
      const timeMatch = line.match(/\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?\]/);
      if (timeMatch) {
          const minutes = parseInt(timeMatch);
          const seconds = parseInt(timeMatch);
          const milliseconds = timeMatch ? parseInt(timeMatch) : 0;
         
          // 计算总秒数
          let totalSeconds = minutes * 60 + seconds;
          if (milliseconds > 0) {
            if (milliseconds < 100) {
            // 两位数表示百分秒
            totalSeconds += milliseconds / 100;
            } else {
            // 三位数表示毫秒
            totalSeconds += milliseconds / 1000;
            }
          }
         
          // 提取歌词文本
          const text = line.replace(/\[\d{2,}:\d{2}(?:\.\d{2,3})?\]/g, '').trim();
         
          if (text) {
            lyrics.push({
            time: totalSeconds,
            text: text
            });
          }
      }
      }
      
      // 按时间排序
      lyrics.sort((a, b) => a.time - b.time);
      
      return lyrics;
    }

    // 初始化播放器
    function initPlayer() {
      loadSong(currentSongIndex);
      createPlaylist();
      
      // 事件监听
      playBtn.addEventListener('click', togglePlay);
      prevBtn.addEventListener('click', playPrevSong);
      nextBtn.addEventListener('click', playNextSong);
      progressContainer.addEventListener('click', setProgress);
      
   
      
      // 音频事件监听
      audio.addEventListener('loadedmetadata', handleAudioLoaded);
      audio.addEventListener('timeupdate', updateProgress);
      audio.addEventListener('ended', playNextSong);
      audio.addEventListener('error', handleAudioError);
      audio.addEventListener('canplay', handleAudioReady);
      
      // 歌词更新定时器
      setInterval(updateLyrics, 100);
      
      // 页面加载完成后尝试自动播放
      document.addEventListener('DOMContentLoaded', () => {
      tryAutoPlay();
      });
    }

    // 处理音频元数据加载完成
    function handleAudioLoaded() {
      console.log('音频时长加载完成:', audio.duration);
      totalTimeEl.textContent = formatTime(audio.duration);
    }

    // 尝试自动播放
    function tryAutoPlay() {
      if (autoPlayEnabled) {
      audio.play().then(() => {
          setPlayState(true);
          hideLoading();
         
          albumArtContainer.style.animationPlayState = 'running';
          console.log('自动播放成功');
      }).catch(e => {
          console.log('自动播放需要用户交互:', e);
          showAutoPlayHint();
          setPlayState(false);
      });
      }
    }

    // 统一设置播放状态的函数
    function setPlayState(playing) {
      isPlaying = playing;
      
      if (playing) {all.style.left = '104px';
all.style.animationPlayState = 'running';
      audio.play().catch(e => console.log('播放失败:', e));
      albumArtContainer.style.animationPlayState = 'running';
      } else {all.style.left = '30px';
      audio.pause();all.style.animationPlayState = 'paused';
      albumArtContainer.style.animationPlayState = 'paused';
      }

      
      playBtn.innerHTML = playing ? '<p>❚❚</p>' : '<p>▶</p>';
      console.log('播放状态设置为:', playing ? '播放' : '暂停');
    }

    // 显示自动播放提示
    function showAutoPlayHint() {
      const hint = document.createElement('div');
      hint.className = 'loading';
      hint.textContent = '点击播放按钮开始音乐';
      hint.id = 'autoplay-hint';
      
      const songInfo = document.querySelector('.song-info');
      songInfo.parentNode.insertBefore(hint, songInfo.nextSibling);
    }
   
    // 移除自动播放提示
    function removeAutoPlayHint() {
      const hint = document.getElementById('autoplay-hint');
      if (hint) hint.remove();
    }

    // 处理音频错误
    function handleAudioError() {
      console.error('音频加载失败:', audio.error);
      showError('音频加载失败，请检查网络连接');
    }

    // 处理音频准备就绪
    function handleAudioReady() {
      console.log('音频准备就绪，可以播放');
      hideError();
      hideLoading();
      
      if (autoPlayEnabled && !isPlaying) {
      tryAutoPlay();
      }
    }

    // 显示错误消息
    function showError(message) {
      hideError();
      
      const errorEl = document.createElement('div');
      errorEl.className = 'error-message';
      errorEl.textContent = message;
      
      const songInfo = document.querySelector('.song-info');
      songInfo.parentNode.insertBefore(errorEl, songInfo.nextSibling);
    }

    // 隐藏错误消息
    function hideError() {
      const existingError = document.querySelector('.error-message');
      if (existingError) existingError.remove();
    }

    // 加载歌曲
    function loadSong(index) {
      console.log('加载歌曲:', songs.title);
      setPlayState(false);
      
      currentSongIndex = index;
      const song = songs;
      
      // 重置音频
      audio.src = '';
      audio.load();
      
      songTitle.textContent = song.title;
      songArtist.textContent = song.artist;
      
      if (song.cover) {
      albumArtImg.src = song.cover;
      }
      
      // 解析LRC歌词
      let lyrics = [];
      if (song.lrc) {
      lyrics = parseLRC(song.lrc);
      console.log('解析LRC歌词:', lyrics);
      } else if (song.lyrics) {
      // 兼容之前的JSON格式
      lyrics = song.lyrics;
      }
      
      // 重置歌词状态
      createLyrics(lyrics);
      updatePlaylistHighlight();
      showLoading();
      
      // 设置新音频源
      audio.src = song.src;
   
      
      // 重置进度条和显示
      progressBar.style.width = '0%';
      currentTimeEl.textContent = '00:00';
      totalTimeEl.textContent = '00:00';
      
      // 重置歌词高亮状态
      activeLyricIndex = -1;
      
      // 重置歌词位置
      if (lyricsWrapper) {
      lyricsWrapper.style.transform = 'translateX(0)';
      }
      
      // 加载新音频
      audio.load();
      console.log('歌曲源已设置:', audio.src);
    }

    // 显示加载中状态
    function showLoading() {
      hideError();
      
      const loadingEl = document.createElement('div');
      loadingEl.className = 'loading';
      loadingEl.textContent = '加载中...';
      loadingEl.id = 'loading-message';
      
      const songInfo = document.querySelector('.song-info');
      songInfo.parentNode.insertBefore(loadingEl, songInfo.nextSibling);
    }

    // 隐藏加载中状态
    function hideLoading() {
      const loadingEl = document.getElementById('loading-message');
      if (loadingEl) loadingEl.remove();
    }

    // 创建歌词元素
    function createLyrics(lyrics) {
      lyricsWrapper.innerHTML = '';
      lyricElements = [];
      
      lyrics.forEach(lyric => {
      const lyricElement = document.createElement('div');
      lyricElement.className = 'lyric-line';
      lyricElement.textContent = lyric.text;
      lyricElement.dataset.time = lyric.time;
      lyricsWrapper.appendChild(lyricElement);
      lyricElements.push(lyricElement);
      });
      
      // 计算总宽度以确保歌词能完整滚动
      setTimeout(() => {
      const totalWidth = lyricElements.reduce((sum, el) => sum + el.offsetWidth + 60, 0);
      lyricsWrapper.style.width = `${totalWidth}px`;
      }, 100);
      
      lyricsWrapper.style.transform = 'translateX(0)';
      lyricElements.forEach(el => el.classList.remove('active'));
    }

    // 更新歌词高亮和位置
    function updateLyrics() {
      const currentTime = audio.currentTime;
      let newActiveIndex = -1;
      
      for (let i = 0; i < lyricElements.length; i++) {
      if (currentTime >= parseFloat(lyricElements.dataset.time)) {
          newActiveIndex = i;
      } else {
          break;
      }
      }
      
      if (newActiveIndex !== activeLyricIndex) {
      if (activeLyricIndex >= 0) {
          lyricElements.classList.remove('active');
      }
      
      if (newActiveIndex >= 0) {
          lyricElements.classList.add('active');
          activeLyricIndex = newActiveIndex;
          scrollLyricsToActive();
      }
      }
    }

    // 歌词从右向左滚动的计算逻辑
    function scrollLyricsToActive() {
      if (activeLyricIndex < 0) return;
      
      const activeLyric = lyricElements;
      const lyricsArea = document.querySelector('.lyrics-area');
      const containerWidth = lyricsArea.offsetWidth;
      const totalWidth = parseFloat(lyricsWrapper.style.width) || 0;
      
      if (totalWidth === 0) return;
      
      const rightSpace = totalWidth - (activeLyric.offsetLeft + activeLyric.offsetWidth);
      const scrollRight = rightSpace - (containerWidth / 2) + (activeLyric.offsetWidth / 2);
      const maxScroll = totalWidth - containerWidth;
      const scrollValue = Math.min(Math.max(scrollRight, 0), maxScroll);
      
      lyricsWrapper.style.transform = `translateX(${scrollValue}px)`;
    }

    // 创建播放列表
    function createPlaylist() {
      const playlistItems = songs.map((song, index) => `
      <div class="playlist-item ${index === currentSongIndex ? 'active' : ''}" data-index="${index}">
          ${song.title} - ${song.artist}
      </div>
      `).join('');
      
      playlist.innerHTML = `<div class="playlist-title">多歌曲播放器</div>${playlistItems}`;
      
      document.querySelectorAll('.playlist-item').forEach(item => {
      item.addEventListener('click', function() {
          const index = parseInt(this.dataset.index);
          loadSong(index);
      });
      });
    }

    // 更新播放列表高亮
    function updatePlaylistHighlight() {
      document.querySelectorAll('.playlist-item').forEach((item, index) => {
      if (index === currentSongIndex) {
          item.classList.add('active');
      } else {
          item.classList.remove('active');
      }
      });
    }

    // 播放/暂停切换
    function togglePlay() {
      console.log('点击播放/暂停按钮');
      
      if (!audio.src || audio.src === 'about:blank') {
      console.log('音频源为空，重新加载歌曲');
      loadSong(currentSongIndex);
      return;
      }
      
      setPlayState(!isPlaying);
      
      if (isPlaying) {
      removeAutoPlayHint();
      hideLoading();
      }
    }

    // 播放上一首
    function playPrevSong() {
      currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
      loadSong(currentSongIndex);
    }

    // 播放下一首
    function playNextSong() {
      currentSongIndex = (currentSongIndex + 1) % songs.length;
      loadSong(currentSongIndex);
      
      if (isPlaying) {
      setTimeout(() => {
          setPlayState(true);
      }, 100);
      }
    }

    // 更新进度条
    function updateProgress() {
      if (audio.duration && !isNaN(audio.duration) && audio.duration > 0) {
      const progressPercent = (audio.currentTime / audio.duration) * 100;
      progressBar.style.width = `${progressPercent}%`;
      currentTimeEl.textContent = formatTime(audio.currentTime);
      totalTimeEl.textContent = formatTime(audio.duration);
      }
    }

    // 设置播放进度
    function setProgress(e) {
      const rect = this.getBoundingClientRect();
      const clickX = e.clientX - rect.left;
      const width = this.clientWidth;
      const duration = audio.duration;
      
      console.log('点击进度条:', clickX, width, duration);
      
      if (duration && !isNaN(duration) && duration > 0) {
      const newTime = (clickX / width) * duration;
      audio.currentTime = newTime;
      
      // 立即更新进度条
      const progressPercent = (newTime / duration) * 100;
      progressBar.style.width = `${progressPercent}%`;
      currentTimeEl.textContent = formatTime(newTime);
      
      console.log(`手动设置进度: ${newTime.toFixed(2)}/${duration.toFixed(2)} = ${progressPercent.toFixed(2)}%`);
      
      
      }
    }

    // 格式化时间
    function formatTime(seconds) {
      if (isNaN(seconds) || !isFinite(seconds) || seconds < 0) return '00:00';
      
      const min = Math.floor(seconds / 60);
      const sec = Math.floor(seconds % 60);
      return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
    }

    // 初始化播放器
    initPlayer();

</script>

亚伦影音工作室 发表于 2026-4-26 11:00

本帖最后由 亚伦影音工作室 于 2026-4-25 17:20 编辑 <br /><br />    <style>
.square {
width: 200px;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.square img {mask: radial-gradient(circle at 100% 50%,transparent 42px,#red 0%);-webkit-mask: radial-gradient(circle at 100% 50%,transparent 42px,red 0%);
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="square">
<img src="https://pic1.imgdb.cn/item/69c1e915ac52b0dbce286f64.jpg" alt="Square Image">
</div>

也曾年轻 发表于 2026-4-26 11:24

https://5b0988e595225.cdn.sohucs.com/images/20191128/62f8ea0ae8064645aecf8e508def15c5.gif

杨帆 发表于 2026-4-26 18:59

运行顺畅，匠心之作，亮点频现，谢谢了了子老师和亚伦老师{:4_180:}

红影 发表于 2026-4-26 19:18

这个制作真漂亮，左边好像屏幕一样，显示了播放进度和歌词同步等信息。
右边有歌曲列表和金属质感跌破，切换歌曲时，碟片封面美女还是变化的呢。{:4_199:}

红影 发表于 2026-4-26 19:19

这个帖子亮点多多，太赞了。欣赏亚伦老师好帖{:4_199:}

查看完整版本: [金属质感碟片+了了子多曲]创新播放器