basic music shuffler

This commit is contained in:
jetstream0
2023-11-03 04:13:43 +00:00
parent 63cac1f0c5
commit 59d2ffe544
2 changed files with 65 additions and 1 deletions

View File

@@ -38,7 +38,7 @@ const listings: Listing[] = _host_info.listings.filter((listing: any): listing i
let renderer: Renderer = new Renderer("templates", "components");
let builder: Builder;
if (process.argv[2] === "--quick") {
builder = new Builder("/build", ["anime_assets", "manga_assets", "password"]); //password is included since it is static
builder = new Builder("/build", ["anime_assets", "manga_assets", "music_assets", "password"]); //password is included since it is static
} else {
builder = new Builder();
}
@@ -66,6 +66,8 @@ let manga_vars: MangaVars[] = [];
let music_serve_paths: string[] = [];
let music_vars: MusicVars[] = [];
let songs: string[] = [];
for (let i = 0; i < listings.length; i++) {
const listing: Listing = listings[i];
directory_serve_paths.push(`/${listing.type}/${listing.name}`);
@@ -101,6 +103,7 @@ for (let i = 0; i < listings.length; i++) {
} else if (listing.type === "music") {
for (let j = 0; j < chapters.length; j++) {
const chapter: string = chapters[j];
songs.push(`${listing.name}/${chapter}`);
music_serve_paths.push(`/${listing.type}/${listing.name}/${chapter}`);
music_vars.push({
listing,
@@ -116,3 +119,7 @@ builder.serve_templates(renderer, directory_serve_paths, "directory", directory_
builder.serve_templates(renderer, anime_serve_paths, "anime", anime_vars);
builder.serve_templates(renderer, manga_serve_paths, "manga", manga_vars);
builder.serve_templates(renderer, music_serve_paths, "music", music_vars);
builder.serve_template(renderer, "/player", "player", {
songs,
});

57
templates/player.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>possibly a music player</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.player {
margin: 25px;
}
</style>
</head>
<body>
<div id="main">
<div class="player">
<h2 style="display: inline-block;">shuffling</h2>
<b>Current Song <span id="current-song"></span></b>
<br>
<audio id="audio" type="audio/mpeg" controls>
</audio>
</div>
</div>
<div id="songs" style="display: none;">
[[ for:songs:song ]]
<span>[[ song ]]</span>
[[ endfor ]]
</div>
<script>
//help where are all the type annotations
const songs = Array.from(document.getElementById("songs").children).map((c) => c.innerText);
let played = [];
console.log(songs);
//set random song
let audio_ele = document.getElementById("audio");
const random_song_start = songs[Math.floor(Math.random() * songs.length)];
document.getElementById("current-song").innerText = random_song_start;
played.push(played);
audio_ele.src = `/music_assets/${random_song_start}.mp3`;
//"ended" event
audio_ele.addEventListener("ended", () => {
const not_played = songs.filter((song) => !played.includes(song));
if (not_played.length === 0) return;
let random_song_next = not_played[Math.floor(Math.random() * not_played.length)];
document.getElementById("current-song").innerText = random_song_next;
played.push(random_song_next);
audio_ele.src = `/music_assets/${random_song_next}.mp3`;
audio_ele.play();
});
</script>
</body>
</html>