212 lines
7.3 KiB
Markdown
212 lines
7.3 KiB
Markdown
---
|
|
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>
|