235 lines
8.5 KiB
Markdown
235 lines
8.5 KiB
Markdown
---
|
|
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>
|