论坛 › 欢乐水吧 › 空落落的心儿为你碎

亚伦影音工作室 发表于 2026-5-5 20:13

空落落的心儿为你碎

本帖最后由 亚伦影音工作室 于 2026-5-11 13:27 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
    .player-container {
      width: 1186px;
      height: 620px;
left: calc(50% - 81px);transform: translateX(-50%);
      background:#882200 url(https://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png) no-repeat center/cover;
      border-radius: 2px;
    overflow: hidden;
      position: relative;
      
    }
   
   .player-content {
      position: absolute;
      z-index: -1;
      top: 40px; left: -60px;
      display: flex;
      flex-direction: column;
      padding: 10px;
    }
   #xiaobo {z-index: 100;
      width: 350px;transform:scale(0.5) ;
      height: 220px;
      margin: 0px 0px;
      position: relative;
         }
#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;box-shadow:0px 0px 0px 1px #333,0px 0px 0px 2px #aaa;border-radius: 50%;
   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 {margin-left: 140px;
      text-align: center;position: relative;
      bottom: 0px;top: 5px;
    }
   
    .song-title {
      font:100 2em "Ma Shan Zheng","SimHei", "Arial", "sans-serif";
      margin-bottom: 0px;
      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:100 1.6em/2em "Ma Shan Zheng","SimHei", "Arial", "sans-serif";
      
      color: #ffed99;
    }

    .k-chin {animation: rotate 3s linear infinite;
      position: absolute;
      left: 5%;
      bottom: 200px;
   transform-origin: bottom center;
      width: 40%;
      height: 30%;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 0px;
      border: 1px solid rgba(255, 215, 0, 0.8);
      display: flex;
      flex-direction: column;
      padding: 20px;
      
      overflow: hidden;
    }
   
    .lyrics-area {
      width: 90%;
      height: 90px;
position: absolute;
   filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
      transform-origin: top center;
      display: flex;
      align-items: center;
      overflow: hidden;
      right: 30px;
      bottom: 40px;
    }
   
    .lyrics-wrapper {
      display: flex;
      
      height: 100%;
      align-items: center;
      transform-origin: right;
      position: absolute;
      right: 0;
    }
   
    .lyric-line {
      font:400 2em "Ma Shan Zheng","SimHei", "Arial", "sans-serif";
      white-space: nowrap;
      padding: 0 30px;
      opacity: 0.8;
      transition: all 0.5s ease;
      flex-shrink: 0;
      color:#000;
   transform-style: preserve-3d;
    }
   
    .lyric-line.active {
      opacity: 1;color:#ff0000;
       font:400 3em "Ma Shan Zheng","SimHei", "Arial", "sans-serif";
    }
   

    .progress-container {
      width: 100%;
      height: 4px;
      background: #666;
      border-radius: 10px;
      margin: 18px 0;
      position: relative;
      cursor: pointer;
      border: 0.6px solid rgba(255, 215, 0, 0.5);
      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: 12px; /* 增大字体 */
      color: #ffed99;
      margin: 10px 0 20px;
      width: 100%;
      font-weight: 300;
      text-shadow: 0 0 0px rgba(0, 0, 0, 0.7);
    }

    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      width: 100%;
      margin-top: -140px;
    }
   
    .control-btn {
      width: 75px;
      height: 75px;
      
      display: flex;
      justify-content: center;
      align-items: center;
   
      cursor: pointer;
   
    }
   
   .control-btn p {
      font-size: 16px;
      color: #ffd700;
      
    }
   

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

      display: flex;
      justify-content: center;
      align-items: center;
    }
.play-btn p {
      font-size: 25px;
      color: #ffd700;
      
    }
   
    #button1{margin-left: 380px;
      position: relative;
      width: 25px;
      height: 25px;
      bottom: 55px;
      cursor: pointer;
border: none; color: #ffaa00;background:#0000;box-shadow:0px 0px 0px 0px #fff;font-size: 18px;font-weight: 999;
}
    .playlist {
      position: absolute;
      top: 40px;
      right: 50px;
      background: #0000;
      border-radius: 0px;
      padding: 10px;
      width: 300px;
height: 160px;
      overflow: auto; font:100 1.2em"仿宋";
      opacity: 0;
   border: 0px solid rgba(255, 215, 0, 0.8);
    }
    .playlist::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}
.playlist-title {list-style: none;
      font-size: 0px;
      margin-bottom: 0px;
      color: #fff;
      text-align: center;
      border-bottom: 0px 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);
    }

   

    .playlist-item.active {list-style: none;
      background: #0000;
      color: #ffaa00;
      
    }
   
    .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="k-chin">
<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>
   
   <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>
      <button id="button1" onclick="btn()">☰</button>
      
         </div>
<div class="playlist">
      <div class="playlist-title"></div>
</div>
   
    <div class="lyrics-area">
          <div class="lyrics-wrapper">

          </div>
      </div>
      
   
   
</div>

<script>

    const songs = [
      {
      title: "空落落的心儿为你碎",
      artist: "麻山伙",
      src: "https://s2.ananas.chaoxing.com/sv-w8/audio/eb/77/de/1579ee79986827245a38569a51fb74ab/audio.mp3",
      cover: "https://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png",
      // 使用标准LRC格式歌词
      lrc: `空落落的心儿为你碎
作曲：3.6/ 作词：3.6
编曲：AT 工作室
混音/母带处理：刘一泽AT 创作室
制作人：亚伦
宣发策划：康喻轩/杨希杰
统筹：康喻轩
监制：T.G.S@Eternal Music Studio
推广策划：陈正俊/刘轩彤/张璐@爱听推广组
营销推广：木子/大能
词曲团队：爱听音乐
出品人：亚伦
OP：爱听音乐
『听歌就在中国酷狗*星曜计划』
【未经著作权人许可不得翻唱翻录或使用】
风那么冷 心那么疼
被爱的人永远不会懂
情那么重 酒那么浓
思念的人呐
何时能相拥
空落落的心儿为你碎
哗啦啦的泪儿为你流
像个傻子盼着你回头
像个疯子求你不要走
孤零零的恋人心好空
冷清清的夜里情好浓
痴心的话你从来不懂
恨我不能留你在怀中
风那么冷 心那么疼
被爱的人永远不会懂
情那么重 酒那么浓
思念的人呐
何时能相拥
空落落的心儿为你碎
哗啦啦的泪儿为你流
像个傻子盼着你回头
像个疯子求你不要走
孤零零的恋人心好空
冷清清的夜里情好浓
痴心的话你从来不懂
恨我不能留你在怀中
`
      },
      {
      title: "女人如烟 (慢摇版)",
      artist: "张玮伽",
      src: "https://static.oldkids.com.cn/upload/2026/05/08/blog_260848378_20260508142411750.mp3",
      cover: "https://static.oldkids.com.cn/upload/2026/04/27/photo_0_20260427203434402.gif",
      // 使用标准LRC格式歌词
      lrc: `女人如烟(慢摇版) - 张玮伽
作词：穆真
作曲：穆真
演唱：张玮伽
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
那天你用柔情将我点燃
我开始变成你手中的烟
你轻轻地将我含在唇间
我的身姿弥漫了你的眼
你漫不经心燃烧我的生命
我也心甘情愿做你的烟
也许你不经意的一个微笑
我就义无反顾地来到你身边
你说过 今生与烟为伴
你说过 女人如烟你已习惯
你说过 聚散离合随遇而安
可我来世还要做你手中的烟
想我了 就请你把我点燃
任我幸福的泪缠绵你指尖
化成灰也没有一丝遗憾
让我今生来世为你陪伴
(Music)
那天你用柔情将我点燃
我开始变成你手中的烟
你轻轻地将我含在唇间
我的身姿弥漫了你的眼
你漫不经心燃烧我的生命
我也心甘情愿做你的烟
也许你不经意的一个微笑
我就义无反顾地来到你身边
空气中 寂寞在悄悄蔓延
就算我化成烟雾也不忍离散
好喜欢 你疼我说笨蛋噢乖
我知道 我的感觉无法改变
想我了 就请你把我点燃
任我幸福的泪缠绵你指尖
化成灰也没有一丝遗憾
让我今生来世为你陪伴
(Music)
☆★梅竹谢谢欣赏★☆
=End=`
      },
      {
      title: "爱却不能拥有你 ",
      artist: "魏新雨",
      src: "https://static.oldkids.com.cn/upload/2026/04/05/blog_260848378_20260405082150297.mp3 ",
      cover: "https://static.oldkids.com.cn/upload/2026/04/07/photo_0_20260407130808555.gif",
      // 使用标准LRC格式歌词
      lrc: `爱却不能拥有你 (Live) - 魏新雨
作词：崔伟立
作曲：崔伟立
演唱：魏新雨
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
遥望着你的背影
彷徨着不能靠近
熟悉的路口默默等你
路过却沉默不语
从黄昏守到黎明
仿佛就几个世纪
每当我闭上失眠眼睛
心里想的念的全是你
我爱却不能拥有你
总在夜里我默默哭泣
就像太阳月亮不能在一起
流星是我落下的泪滴
我爱却不能拥有你
世间最最遥远的距离
咫尺天涯你却可望不可及
化作天边恒星守护你
(Music)
从黄昏守到黎明
仿佛就几个世纪
每当我闭上失眠眼睛
心里想的念的全是你
我爱却不能拥有你
总在夜里我默默哭泣
就像太阳月亮不能在一起
流星是我落下的泪滴
我爱却不能拥有你
世间最最遥远的距离
咫尺天涯你却可望不可及
化作天边恒星守护你
我爱却不能拥有你
总在夜里我默默哭泣
就像太阳月亮不能在一起
流星是我落下的泪滴
我爱却不能拥有你
世间最最遥远的距离
咫尺天涯你却可望不可及
化作天边恒星守护你
咫尺天涯你却可望不可及
化作天边恒星守护你
(Music)
☆★梅竹谢谢欣赏★☆
=End=`
      },
      {
      title: "相望红尘-汪燕",
      artist: "汪燕",
      src: "https://static.oldkids.com.cn/upload/2026/02/11/blog_260848378_20260211143650679.mp3",
      cover: "https://static.oldkids.com.cn/upload/2026/04/27/photo_0_20260427203400415.gif",
      // 使用标准LRC格式歌词
      lrc: `相望红尘-汪燕
作词: 诗 琴
[00:06.78作曲：诗 琴
演唱-汪燕
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊☆★☆
● ● ● ● ● ● ●
一壶紫砂醉了春风
静等时光走散的你
远方的人啊你在哪里
可否相逢不再错别离
花香远飞相思何寄
今生相见却遥遥无期
三世渡红尘只愿来生
与你不再辜负春光里
我在红尘陌上等你
等你诉说心中秘密
天涯陌路只想告诉你
你是我今生不变的唯一
(Music)
一壶紫砂醉了春风
静等时光走散的你
远方的人啊你在哪里
可否相逢不再错别离
花香远飞相思何寄
今生相见却遥遥无期
三世渡红尘只愿来生
与你不再辜负春光里
我在红尘陌上等你
等你诉说心中秘密
天涯陌路只想告诉你
你是我今生不变的唯一
我在梦里想你念你
任由相思萧落满地
无论今生相隔千万里
我愿与你相望红尘里
我在梦里想你念你
任由相思萧落满地
无论今生相隔千万里
我愿与你相望红尘里
相望红尘里
(Music)
☆★梅竹谢谢欣赏★☆
=End=`
      },{
      title: "那么爱你不能拥有你",
      artist: "慕蓉晓晓",
      src: "https://static.oldkids.com.cn/upload/2026/05/06/blog_260855907_20260506182007512.mp3",
      cover: "https://static.oldkids.com.cn/upload/2025/05/18/photo_0_20250518174618559.gif",
      // 使用标准LRC格式歌词
      lrc: `那么爱你不能拥有你-慕蓉晓晓
作词：夜未央
作曲：夜未央
编曲：小满音乐
制作人：秦子文
推广：沐风有声/楚来/何羡晴/木子/柠檬/阳阳
监制：涓子
出品人：涓子/秦子文
OP/SP：浔秦文化
（版权所有未经允许请勿使用）
听歌就在中国酷狗*星曜计划
缘分就像一场无声的雨
淋湿了我也淋湿了你
明明心动却不敢靠近
再多深情也无能为力
那么爱你却不能拥有你
情深缘浅只剩一声叹息
一场相遇换一生惦记
你住在我每次的梦里
那么爱你却只能放弃你
满心温柔都败给了天意
你是风景只剩空回忆
是我一生放不下的秘密
多少牵挂都埋进风里
多少眼泪都流进心底
错的时间遇见对的你
注定是一场心酸结局
那么爱你却不能拥有你
情深缘浅只剩一声叹息
一场相遇换一生惦记
你住在我每次的梦里
那么爱你却只能放弃你
满心温柔都败给了天意
你是风景只剩空回忆
是我一生放不下的秘密`
      }
    ];

    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);
      });
      });
    }
let fs = true;
      button1.onclick = () => {
            if (fs) {
                     playlist.style.opacity= '1';

            }else {   playlist.style.opacity= '0';

            }
            fs = !fs;
      };
    // 更新播放列表高亮
    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-5-5 20:34

漂亮的变色音画，这么多好歌，每一首都有歌词同步呢，同步的歌词很有特色。
欣赏亚伦老师好帖{:4_199:}

雨季工作室 发表于 2026-5-6 08:39

欣赏亚伦老师制作精彩！

小辣椒 发表于 2026-5-7 13:13

欣赏亚纶精彩的制作{:4_199:}

查看完整版本: 空落落的心儿为你碎