-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
67 lines (57 loc) · 1.74 KB
/
script.js
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
const tracks = [
{ title: "Track 1", src: "track1.mp3" },
{ title: "Track 2", src: "track2.mp3" },
{ title: "Track 3", src: "track3.mp3" }
];
let currentTrackIndex = 0;
const audioPlayer = document.getElementById('audio-player');
const progressBar = document.getElementById('progress-bar');
const trackList = document.getElementById('track-list');
// Populate playlist dynamically
tracks.forEach((track, index) => {
const li = document.createElement('li');
li.textContent = track.title;
li.onclick = () => playTrack(index);
trackList.appendChild(li);
});
function playTrack(index) {
currentTrackIndex = index;
audioPlayer.src = tracks[index].src;
audioPlayer.play();
updateTrackHighlight();
}
function togglePlayPause() {
if (audioPlayer.paused) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
}
function previousTrack() {
currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
playTrack(currentTrackIndex);
}
function nextTrack() {
currentTrackIndex = (currentTrackIndex + 1) % tracks.length;
playTrack(currentTrackIndex);
}
function setVolume(value) {
audioPlayer.volume = value;
}
audioPlayer.ontimeupdate = () => {
const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
progressBar.value = progress || 0;
};
progressBar.oninput = () => {
audioPlayer.currentTime = (progressBar.value / 100) * audioPlayer.duration;
};
function updateTrackHighlight() {
const items = trackList.querySelectorAll('li');
items.forEach((item, index) => {
if (index === currentTrackIndex) {
item.style.backgroundColor = '#444';
} else {
item.style.backgroundColor = '#222';
}
});
}