basic music shuffler
This commit is contained in:
9
build.ts
9
build.ts
@@ -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
57
templates/player.html
Normal 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>
|
||||
Reference in New Issue
Block a user