-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (88 loc) · 3.26 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>YouTube To Audio</title>
<input id="test"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p id="author"></p>
<marquee behavior="" direction="" id="title"></marquee>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="next">Next</button>
<audio id="audio" controls style="margin-top: 30px"></audio>
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
$(document).ready(() => {
function getYouTubeVideoId(url) {
var match = url.match(/[?&]v=([^&]+)/);
return match && match[1] ? match[1] : null;
}
let key = getYouTubeVideoId($('#test').val);
const audioElement = document.getElementById("audio");
const playButton = document.getElementById("play");
const pauseButton = document.getElementById("pause");
const nextButton = document.getElementById("next");
var apiUrl = `https://weak-tan-eagle-hose.cyclic.cloud/${key}/`;
function next() {
$.get(
"https://django-hello-world-nu-jade.vercel.app/nextvideo/?q=" +
key
).then((data) => {
const random = getRandomInt(0, data['ids'].length - 1);
console.log(random, data.length);
console.log(key);
key = data['ids'][random];
console.log(key);
apiUrl = `https://weak-tan-eagle-hose.cyclic.cloud/${key}/`;
console.log(apiUrl);
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
$('#author').text(data['author']);
$('#title').text(data['title']);
const audioUrl = data.formats["audio/mp4"];
// Set the audio source to the fetched URL
audioElement.src = audioUrl;
audioElement.play();
})
.catch((error) =>
console.error("Error fetching audio URL:", error)
);
});
}
// Fetch the API to get the audio URL
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
$('#author').text(data['author']);
$('#title').text(data['title']);
const audioUrl = data.formats["audio/mp4"];
// Set the audio source to the fetched URL
audioElement.src = audioUrl;
})
.catch((error) => console.error("Error fetching audio URL:", error));
// Function to play the audio
playButton.addEventListener("click", () => {
audioElement.play();
});
// Function to pause the audio
pauseButton.addEventListener("click", () => {
audioElement.pause();
});
nextButton.addEventListener("click", () => {
next();
});
audioElement.addEventListener("ended", () => {
next();
// Do something when the audio has finished playing
console.log("Audio has finished playing.");
});
});
</script>
</body>
</html>