shiyue/Mymusic3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加网易云音乐同步到Navidrome的功能

Browse Source 
新增NetEase-sync模块，实现将网易云音乐歌单同步到Navidrome的功能
修复iOS设备自动播放问题，优化播放器体验
This commit is contained in:
史悦
2026-01-12 17:59:31 +08:00
parent 4ea05279bd
commit 89a28e1bc5
7 changed files with 1196 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
Netease-sync/public/app.js Normal file
View File

@@ -0,0 +1,219 @@
const API_BASE = '/api';
let playlists = [];
function showError(message) {
const errorDiv = document.getElementById('errorMessage');
errorDiv.textContent = message;
errorDiv.style.display = 'block';
setTimeout(() => {
errorDiv.style.display = 'none';
}, 5000);
}
function showSuccess(message) {
const successDiv = document.getElementById('successMessage');
successDiv.textContent = message;
successDiv.style.display = 'block';
setTimeout(() => {
successDiv.style.display = 'none';
}, 3000);
}
function formatTimestamp(timestamp) {
if (!timestamp) return '从未同步';
const date = new Date(timestamp);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
}
function getStatusClass(status) {
switch (status) {
case 'syncing':
return 'status-syncing';
case 'success':
return 'status-success';
case 'error':
return 'status-error';
default:
return 'status-idle';
}
}
function getStatusText(status) {
switch (status) {
case 'syncing':
return '同步中';
case 'success':
return '同步成功';
case 'error':
return '同步失败';
default:
return '待同步';
}
}
function renderPlaylists() {
const container = document.getElementById('playlistList');
if (playlists.length === 0) {
container.innerHTML = `
<div class="empty-state">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18V5l12-2v13"/>
<circle cx="6" cy="18" r="3"/>
<circle cx="18" cy="16" r="3"/>
</svg>
<p>还没有添加任何歌单</p>
<p>在上方输入网易云音乐歌单ID或分享链接开始同步</p>
</div>
`;
return;
}
container.innerHTML = playlists.map(playlist => `
<div class="playlist-item">
<div class="playlist-info">
<div class="playlist-name">${playlist.name}</div>
<div class="playlist-meta">
<span>🆔 ${playlist.neteaseId}</span>
<span>🎵 ${playlist.songs.length} 首歌曲</span>
<span>⏰ ${formatTimestamp(playlist.lastSyncTime)}</span>
<span class="status-badge ${getStatusClass(playlist.status)}">${getStatusText(playlist.status)}</span>
</div>
</div>
<div class="playlist-actions">
<button class="btn-sync" onclick="syncPlaylist('${playlist.id}')" ${playlist.status === 'syncing' ? 'disabled' : ''}>
${playlist.status === 'syncing' ? '<span class="spinner"></span>' : '立即同步'}
</button>
<button class="btn-delete" onclick="deletePlaylist('${playlist.id}')">删除</button>
</div>
</div>
`).join('');
}
async function loadPlaylists() {
try {
const response = await fetch(`${API_BASE}/playlists`);
if (!response.ok) throw new Error('加载歌单失败');
playlists = await response.json();
renderPlaylists();
} catch (error) {
console.error('加载歌单失败:', error);
showError('加载歌单失败: ' + error.message);
}
}
async function addPlaylist() {
const input = document.getElementById('playlistInput');
const value = input.value.trim();
if (!value) {
showError('请输入歌单ID或分享链接');
return;
}
try {
const response = await fetch(`${API_BASE}/playlists`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ url: value })
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || '添加歌单失败');
}
const playlist = await response.json();
playlists.push(playlist);
renderPlaylists();
input.value = '';
showSuccess('歌单添加成功');
} catch (error) {
console.error('添加歌单失败:', error);
showError('添加歌单失败: ' + error.message);
}
}
async function deletePlaylist(id) {
if (!confirm('确定要删除这个歌单吗？')) return;
try {
const response = await fetch(`${API_BASE}/playlists/${id}`, {
method: 'DELETE'
});
if (!response.ok) throw new Error('删除歌单失败');
playlists = playlists.filter(p => p.id !== id);
renderPlaylists();
showSuccess('歌单删除成功');
} catch (error) {
console.error('删除歌单失败:', error);
showError('删除歌单失败: ' + error.message);
}
}
async function syncPlaylist(id) {
try {
const response = await fetch(`${API_BASE}/playlists/${id}/sync`, {
method: 'POST'
});
if (!response.ok) throw new Error('启动同步失败');
const playlist = await response.json();
const index = playlists.findIndex(p => p.id === id);
if (index !== -1) {
playlists[index] = playlist;
}
renderPlaylists();
showSuccess('同步已启动');
} catch (error) {
console.error('启动同步失败:', error);
showError('启动同步失败: ' + error.message);
}
}
async function updatePlaylistStatus(id) {
try {
const response = await fetch(`${API_BASE}/status/${id}`);
if (!response.ok) return;
const playlist = await response.json();
const index = playlists.findIndex(p => p.id === id);
if (index !== -1) {
playlists[index] = playlist;
renderPlaylists();
}
} catch (error) {
console.error('更新状态失败:', error);
}
}
function startStatusPolling() {
setInterval(() => {
playlists.forEach(playlist => {
if (playlist.status === 'syncing') {
updatePlaylistStatus(playlist.id);
}
});
}, 3000);
}
document.getElementById('playlistInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addPlaylist();
}
});
loadPlaylists();
startStatusPolling();

230
Netease-sync/public/index.html Normal file
View File

@@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易云音乐同步到 Navidrome</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
color: white;
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
padding: 25px;
margin-bottom: 20px;
}
.add-playlist {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.add-playlist input {
flex: 1;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-playlist input:focus {
outline: none;
border-color: #667eea;
}
.add-playlist button {
padding: 12px 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
}
.add-playlist button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.add-playlist button:active {
transform: translateY(0);
}
.playlist-list {
display: grid;
gap: 15px;
}
.playlist-item {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
}
.playlist-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.playlist-info {
flex: 1;
}
.playlist-name {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.playlist-meta {
display: flex;
gap: 20px;
font-size: 13px;
color: #666;
}
.playlist-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.status-idle {
background: #e0e0e0;
color: #666;
}
.status-syncing {
background: #fff3cd;
color: #856404;
}
.status-success {
background: #d4edda;
color: #155724;
}
.status-error {
background: #f8d7da;
color: #721c24;
}
.playlist-actions {
display: flex;
gap: 10px;
}
.playlist-actions button {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: all 0.2s;
}
.btn-sync {
background: #667eea;
color: white;
}
.btn-sync:hover {
background: #5568d3;
}
.btn-sync:disabled {
background: #ccc;
cursor: not-allowed;
}
.btn-delete {
background: #dc3545;
color: white;
}
.btn-delete:hover {
background: #c82333;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-state svg {
width: 80px;
height: 80px;
margin-bottom: 20px;
opacity: 0.5;
}
.loading {
text-align: center;
padding: 40px;
color: #666;
}
.error-message {
background: #f8d7da;
color: #721c24;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
}
.success-message {
background: #d4edda;
color: #155724;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
}
</style>
</head>
<body>
<div class="container">
<h1>🎵 网易云音乐同步到 Navidrome</h1>
<div class="error-message" id="errorMessage"></div>
<div class="success-message" id="successMessage"></div>
<div class="card">
<div class="add-playlist">
<input type="text" id="playlistInput" placeholder="输入网易云音乐歌单ID或分享链接...">
<button onclick="addPlaylist()">添加歌单</button>
</div>
<div id="playlistList" class="playlist-list">
<div class="loading">加载中...</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>