-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (110 loc) · 3.05 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Music player</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
text-align: center;
padding: 20px;
}
#playlist{
margin-top: 1rem;
text-align: left;
display: inline-block;
}
#input {
margin: 20px auto;
}
#file_input {
text-align: center;
text-justify: center;
}
.song {
cursor: pointer;
padding: 5px;
}
.song.active {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Music player</h1>
<div id="input">
<input type="file" id="file_input" multiple accept="audio/*">
</div>
<audio id="player" controls></audio>
<div id="control_buttons">
<button id="prev_button">Previous</button>
<button id="next_button">Next</button>
</div>
<div id="playlist"></div>
<script>
const file_input = document.getElementById('file_input');
const player = document.getElementById('player');
const prev_button = document.getElementById('prev_button');
const next_button = document.getElementById('next_button');
const playlist = document.getElementById('playlist');
let current_file_index = 0;
let files = [];
file_input.addEventListener('change', function(e) {
if (e.target.files.length>0){
files = e.target.files;
current_file_index = 0;
update_playlist();
play_file(0);
}
});
prev_button.addEventListener('click', function() {
if (current_file_index > 0) {
play_file(--current_file_index);
}
});
next_button.addEventListener('click', function() {
if (current_file_index < files.length - 1) {
play_file(++current_file_index);
}
});
player.addEventListener('ended', function() {
if (current_file_index < files.length - 1) {
play_file(++current_file_index);
} else {
player.src = '';
update_active_song();
}
});
function play_file(index) {
const file = files[index];
const url = URL.createObjectURL(file);
player.src = url;
player.play();
update_active_song();
}
function update_playlist() {
playlist.innerHTML = '';
for (let i = 0; i < files.length; i++) {
const song_element = document.createElement('div');
song_element.className = 'song';
song_element.textContent = files[i].name;
song_element.addEventListener('click', function() {
current_file_index = i; // Update the index first
play_file(current_file_index);
});
playlist.appendChild(song_element);
}
}
function update_active_song() {
const songs = playlist.getElementsByClassName('song');
for (let song of songs) {
song.classList.remove('active');
}
if (files[current_file_index]) {
songs[current_file_index].classList.add('active');
}
}
</script>
</body>
</html>