---
layout:     post
title:      "触手可及的遥远（音乐组曲）"
date:       2026-04-01 13:59:00
author:     "Wantsong"
params:
  published: true
image: "https://imgs.wantsong.life/LeD1eeJnC1.jpg"
tags: ["Original"]
categories: 
  - "SONGS"
---

<div style="text-align: center;">
  <div id="music-player-container">
    <!-- 当前播放歌曲封面 -->
    <img id="current-cover" src="https://imgs.wantsong.life/hJitruhwh8.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/1970s/1.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(2)" 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(2)" 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(2)" 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(3)" 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(4)" style="padding: 8px; margin: 5px 0; background: white; border-radius: 5px; cursor: pointer; border-left: 4px solid transparent;">
          <strong>8. 瞬时偏移</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>9. 无目的的停留</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>10. 半透明的黄昏</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>11. 近乎于寂静</strong>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// 音乐播放列表数据
const playlist = [
  {
    title: "触手可及的遥远",
    src: "https://songs.wantsong.life/1970s/1.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "光影的缝隙",
    src: "https://songs.wantsong.life/1970s/2.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "虚焦的远景",
    src: "https://songs.wantsong.life/1970s/3.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "折叠的午后",
    src: "https://songs.wantsong.life/1970s/4.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "波纹的形状",
    src: "https://songs.wantsong.life/1970s/5.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "未完成的对话",
    src: "https://songs.wantsong.life/1970s/6.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "空白的信笺",
    src: "https://songs.wantsong.life/1970s/7.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "瞬时偏移",
    src: "https://songs.wantsong.life/1970s/8.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "无目的的停留",
    src: "https://songs.wantsong.life/1970s/9.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "半透明的黄昏",
    src: "https://songs.wantsong.life/1970s/10.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.jpeg"
  },
  {
    title: "近乎于寂静",
    src: "https://songs.wantsong.life/1970s/11.mp3",
    cover: "https://imgs.wantsong.life/hJitruhwh8.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>