-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
137 lines (124 loc) · 5.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Загрузить музыку с YouTube</title>
<script src="https://kit.fontawesome.com/c06b0e59fa.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="icons">
<i id="tg" class="fa-brands fa-telegram" onclick="location.href = 'https://t.me/statuxia';"></i>
<i id="home" class="fa-solid fa-house" onclick="location.href = 'https://statuxia.tech'"></i>
<i id="github" class="fa-brands fa-github" onclick="location.href = 'https://github.com/statuxia';"></i>
</div>
<div class="download">
<h1 align="center">Загрузить музыку с YouTube</h1>
<form id="downloadForm" action="/download" method="post">
<label for="url">URL видео YouTube:</label><br>
<input type="text" id="url" name="url"><br>
<span id="speedValue">Скорость музыки: 1.0</span><br><br>
<input type="range" min="0.5" max="2" step="0.1" value="1" id="speed" name="audioSpeed" oninput="changeSpeed()">
<button type="submit" id="downloadButton">Скачать</button>
</form>
<br>
<div class="messageBox" id="messageBox"></div>
<br>
</div>
<script>
var response;
var lock = false;
var style;
document.addEventListener("DOMContentLoaded", () => {
changeSpeed();
});
document.getElementById("downloadForm").addEventListener("submit", function (event) {
event.preventDefault();
if (lock === true) {
return;
}
const formData = new FormData(this);
showMessage("Загрузка началась", true);
fetch("/download", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
url: formData.get("url"),
audioSpeed: formData.get("audioSpeed")
})
}).then(response => {
if (!response.ok) {
throw new Error("Произошла ошибка при загрузке файла");
}
this.response = response;
return response.blob();
}).then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
a.download = getFileName(this.response.headers.get("Content-Disposition"));
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);
showMessage("Файл успешно загружен", false);
}).catch(error => {
showMessage("Произошла ошибка при загрузке файла", false);
console.error("Произошла ошибка:", error);
});
});
function getFileName(contentDisposition) {
if (contentDisposition) {
const unicodeMatches = /filename\*=UTF-8''([^"]*)/.exec(contentDisposition);
if (unicodeMatches != null && unicodeMatches.length > 1) {
return decodeURIComponent(unicodeMatches[1]);
}
const matches = /filename="([^"]*)"/.exec(contentDisposition);
if (matches != null && matches.length > 1) {
return matches[1];
}
}
return "audio.mp3";
}
function showMessage(message, isLocked) {
(lock = isLocked) === true ? lockButton() : unlockButton();
const messageBox = document.getElementById("messageBox");
messageBox.textContent = message;
messageBox.style.display = "block";
}
function lockButton() {
const button = document.getElementById("downloadButton");
button.disable = false;
style = button.style;
button.style.backgroundColor = "gray";
schedule(0);
};
function unlockButton() {
const button = document.getElementById("downloadButton");
button.disable = true;
button.style = style;
};
function schedule(loopNumber) {
if (lock === false) {
return;
}
const messageBox = document.getElementById("messageBox");
if (loopNumber < 3) {
messageBox.textContent += ".";
setTimeout(schedule, 400, ++loopNumber);
} else {
messageBox.textContent = "Загрузка началась";
setTimeout(schedule, 400, 0);
}
}
function changeSpeed() {
const speedValue = document.getElementById("speed").value;
document.getElementById("speedValue").textContent = "Скорость музыки: " + speedValue;
}
</script>
</body>
</html>