---
layout:     post
title:      "怀念（音乐组曲）"
date:       2025-06-27 02:02:00
author:     "Wantsong"
params:
  published: true
image: "https://imgs.wantsong.life/NK5IDeUbN1.jpg"
tags: ["Original"]
categories: 
  - "SONGS"
---

<div style="text-align: center;">
  <div id="music-player-container">
    <!-- 当前播放歌曲封面 -->
    <img id="current-cover" src="https://imgs.wantsong.life/kL45wbmqFK.jpeg" alt="当前播放" style="width: 300px; height: 300px; border-radius: 10px; margin-bottom: 15px;">
    <!-- 当前播放歌曲标题 -->
    <p id="current-title"><strong>怀念</strong></p>
    <!-- 主播放器 -->
    <audio id="main-player" controls style="width: 100%; max-width: 400px; margin: 15px 0;">
      <source id="current-source" src="https://songs.wantsong.life/2025-06-27/miss.mp3" type="audio/mpeg">
      您的浏览器不支持音频播放。
    </audio>
    <!-- 播放控制按钮 -->
    <div style="margin: 15px 0;">
      <button id="prev-btn" onclick="previousTrack()" style="margin: 0 10px; padding: 8px 15px; background: #4a90e2; color: white; border: none; border-radius: 5px; cursor: pointer;">上一首</button>
      <button id="next-btn" onclick="nextTrack()" style="margin: 0 10px; padding: 8px 15px; background: #4a90e2; color: white; border: none; border-radius: 5px; cursor: pointer;">下一首</button>
    </div>
    <!-- 播放列表 -->
    <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px; max-width: 500px; margin-left: auto; margin-right: auto;">
      <h4 style="margin-top: 0; color: #333;">播放列表</h4>
      <div id="playlist">
        <div class="track-item active" onclick="playTrack(0)" style="padding: 8px; margin: 5px 0; background: #e3f2fd; border-radius: 5px; cursor: pointer; border-left: 4px solid #4a90e2;">
          <strong>1. 怀念</strong>
        </div>
        <div class="track-item" onclick="playTrack(1)" style="padding: 8px; margin: 5px 0; background: white; border-radius: 5px; cursor: pointer; border-left: 4px solid transparent;">
          <strong>2. 浮尘</strong>
        </div>
        <div class="track-item" onclick="playTrack(2)" style="padding: 8px; margin: 5px 0; background: white; border-radius: 5px; cursor: pointer; border-left: 4px solid transparent;">
          <strong>3. 萤火</strong>
        </div>
        <div class="track-item" onclick="playTrack(3)" style="padding: 8px; margin: 5px 0; background: white; border-radius: 5px; cursor: pointer; border-left: 4px solid transparent;">
          <strong>4. 失重</strong>
        </div>
        <div class="track-item" onclick="playTrack(4)" style="padding: 8px; margin: 5px 0; background: white; border-radius: 5px; cursor: pointer; border-left: 4px solid transparent;">
          <strong>5. 沉重的翅膀</strong>
        </div>
        <div class="track-item" onclick="playTrack(5)" style="padding: 8px; margin: 5px 0; background: white; border-radius: 5px; cursor: pointer; border-left: 4px solid transparent;">
          <strong>6. 向下生长</strong>
        </div>
        <div class="track-item" onclick="playTrack(6)" style="padding: 8px; margin: 5px 0; background: white; border-radius: 5px; cursor: pointer; border-left: 4px solid transparent;">
          <strong>7. 辽远</strong>
        </div>
        <div class="track-item" onclick="playTrack(7)" style="padding: 8px; margin: 5px 0; background: white; border-radius: 5px; cursor: pointer; border-left: 4px solid transparent;">
          <strong>8. 永恒</strong>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// 音乐播放列表数据
const playlist = [
  {
    title: "怀念",
    src: "https://songs.wantsong.life/2025-06-27/miss.mp3",
    cover: "https://imgs.wantsong.life/kL45wbmqFK.jpeg"
  },
  {
    title: "浮尘",
    src: "https://songs.wantsong.life/2025-06-27/floating-dust.mp3",
    cover: "https://imgs.wantsong.life/dzMZoAAkd6.jpeg"
  },
  {
    title: "萤火",
    src: "https://songs.wantsong.life/2025-06-27/firefly-light.mp3",
    cover: "https://imgs.wantsong.life/EMDKNyK4VD.jpeg"
  },
  {
    title: "失重",
    src: "https://songs.wantsong.life/2025-06-27/weightlessness.mp3",
    cover: "https://imgs.wantsong.life/NhhNDRw8G3.jpeg"
  },
  {
    title: "沉重的翅膀",
    src: "https://songs.wantsong.life/2025-06-27/heavy-wings.mp3",
    cover: "https://imgs.wantsong.life/d0aYeV4sN0.jpeg"
  },
  {
    title: "向下生长",
    src: "https://songs.wantsong.life/2025-06-27/growing-downward.mp3",
    cover: "https://imgs.wantsong.life/zUqxEg49g9.jpeg"
  },
  {
    title: "辽远",
    src: "https://songs.wantsong.life/2025-06-27/vast.mp3",
    cover: "https://imgs.wantsong.life/IkA6i7jy5q.jpeg"
  },
  {
    title: "永恒",
    src: "https://songs.wantsong.life/2025-06-27/eternal.mp3",
    cover: "https://imgs.wantsong.life/BbFMkY1w19.jpeg"
  }

];

let currentTrackIndex = 0;
const player = document.getElementById('main-player');
const currentTitle = document.getElementById('current-title');
const currentCover = document.getElementById('current-cover');
const currentSource = document.getElementById('current-source');

// 播放指定曲目
function playTrack(index) {
  if (index >= 0 && index < playlist.length) {
    currentTrackIndex = index;
    const track = playlist[index];
    
    // 更新播放器
    currentSource.src = track.src;
    currentTitle.innerHTML = '<strong>' + track.title + '</strong>';
    currentCover.src = track.cover;
    currentCover.alt = track.title;
    player.load();
    
    // 更新播放列表样式
    updatePlaylistUI();
    
    // 自动播放
    player.play().catch(e => {
      console.log('自动播放被阻止，请手动点击播放');
    });
  }
}

// 下一首
function nextTrack() {
  const nextIndex = (currentTrackIndex + 1) % playlist.length;
  playTrack(nextIndex);
}

// 上一首
function previousTrack() {
  const prevIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
  playTrack(prevIndex);
}

// 更新播放列表UI
function updatePlaylistUI() {
  const trackItems = document.querySelectorAll('.track-item');
  trackItems.forEach((item, index) => {
    if (index === currentTrackIndex) {
      item.className = 'track-item active';
      item.style.background = '#e3f2fd';
      item.style.borderLeft = '4px solid #4a90e2';
    } else {
      item.className = 'track-item';
      item.style.background = 'white';
      item.style.borderLeft = '4px solid transparent';
    }
  });
}

// 监听播放结束事件，自动播放下一首
player.addEventListener('ended', nextTrack);

// 添加键盘快捷键支持
document.addEventListener('keydown', function(e) {
  if (e.target.tagName.toLowerCase() !== 'input' && e.target.tagName.toLowerCase() !== 'textarea') {
    switch(e.key) {
      case 'ArrowLeft':
        previousTrack();
        e.preventDefault();
        break;
      case 'ArrowRight':
        nextTrack();
        e.preventDefault();
        break;
      case ' ':
        if (player.paused) {
          player.play();
        } else {
          player.pause();
        }
        e.preventDefault();
        break;
    }
  }
});

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
  updatePlaylistUI();
});
</script>

<style>
.track-item:hover {
  background: #f0f8ff !important;
}

#music-player-container button:hover {
  background: #357abd !important;
}

#playlist {
  text-align: left;
}
</style>