-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (143 loc) · 6.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<div class="left-section">
<div class="album-cover-container">
<img id="album-cover" src="default-cover.jpg" alt="Album Cover">
</div>
<div class="visualizer-container" id="visualizer">
<!-- Bars will be dynamically added here -->
</div>
<div id="now-playing"></div>
<div class="progress-container">
<input type="range" id="progress-bar" min="0" max="100" value="0">
<div id="time-display">
<span id="current-time">0:00</span>
<span id="duration">0:00</span>
</div>
</div>
<div class="player-controls">
<button id="prev"><i class="fas fa-backward"></i></button>
<button id="play-pause"><i class="fas fa-play"></i></button>
<button id="next"><i class="fas fa-forward"></i></button>
<button id="play-mode">
<i class="fas fa-random" id="random-icon"></i> <!-- 随机播放 -->
<i class="fas fa-retweet" id="repeat-icon"></i> <!-- 顺序播放 -->
<i class="fas fa-redo" id="repeat-one-icon"></i> <!-- 单曲循环 -->
</button>
</div>
<div id="lyrics-container" class="lyrics-container"></div>
<audio id="audio-player"></audio>
</div>
<div class="right-section-container" id="right-section-container">
<button id="toggle-list" class="toggle-button">▶</button>
<div class="right-section" id="right-section">
<div class="search-container">
<input type="text" id="search-input" >
<button id="search-button"><i class="fas fa-search"></i></button>
</div>
<div id="playlist"></div>
</div>
</div>
</div>
<script src="js/keyboard.js"></script>
<script src="js/lyrics.js"></script>
<script src="js/playlist.js"></script>
<script src="js/visualizer.js"></script>
<script src="js/playcontrol.js"></script>
<script src="js/audio.js"></script>
<script src="js/search.js"></script>
<script>
const { ipcRenderer } = require('electron');
const fs = require('fs/promises');
const path = require('path');
const { applyTheme, initTheme } = require('./js/themes');
initTheme();
// 监听主题切换
ipcRenderer.on('change-theme', (_, theme) => {
applyTheme(theme);
});
let currentTrackIndex = 0;
let audio = document.getElementById('audio-player');
// 新增：音频加载控制标识及当前请求ID，解决快速切歌问题
let isAudioLoading = false;
let currentPlayRequest = 0; // 每次播放（或加载）都会自增
// 保存播放状态到存储
function savePlaybackState() {
ipcRenderer.send('save-playback-state', {
index: currentTrackIndex,
time: audio.currentTime
});
}
// 时间格式化
function formatDuration(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
// 初始化加载播放列表和状态
(async () => {
const { playlist: storedPlaylist, lastPlayedIndex, lastPlayedTime } = await ipcRenderer.invoke('get-playlist');
// 加载时也去重，防止存储中存在旧的重复数据
playlist = storedPlaylist.reduce((acc, track) => {
const isDuplicate = acc.some(existingTrack =>
existingTrack.title === track.title &&
existingTrack.path === track.path
);
if (!isDuplicate) acc.push(track);
return acc;
}, []);
// 处理索引越界
currentTrackIndex = lastPlayedIndex;
if (currentTrackIndex >= playlist.length && playlist.length > 0) {
currentTrackIndex = 0;
}
renderPlaylist();
if (playlist.length > 0) {
const track = playlist[currentTrackIndex];
await loadTrack(track);
audio.currentTime = lastPlayedTime;
// 更新进度显示
document.getElementById('current-time').textContent = formatDuration(lastPlayedTime);
document.getElementById('progress-bar').value = (lastPlayedTime / audio.duration) * 100 || 0;
// 初始化按钮和封面状态
updatePlayPauseButton();
// 确保在初始化时绑定 timeupdate 事件
audio.addEventListener('timeupdate', updateProgress);
}
// 初始化音频上下文和可视化条
initAudioContext();
createVisualizerBars();
})();
// 窗口关闭前保存状态
window.addEventListener('beforeunload', () => {
savePlaybackState();
});
// 监听播放列表更新
ipcRenderer.on('update-playlist', (event, newTracks) => {
// 检查是否有重复的歌曲
const uniqueTracks = newTracks.filter(newTrack =>
!playlist.some(existingTrack => existingTrack.title === newTrack.title)
);
// 将新歌曲添加到播放列表
playlist = [...playlist, ...uniqueTracks];
renderPlaylist();
ipcRenderer.send('save-full-playlist', playlist);
});
// 更新进度条
const progressBar = document.getElementById('progress-bar');
progressBar.addEventListener('input', () => {
const seekTime = (progressBar.value / 100) * audio.duration;
audio.currentTime = seekTime;
});
</script>
</body>
</html>