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 renderer: Renderer = new Renderer("templates", "components");
|
||||||
let builder: Builder;
|
let builder: Builder;
|
||||||
if (process.argv[2] === "--quick") {
|
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 {
|
} else {
|
||||||
builder = new Builder();
|
builder = new Builder();
|
||||||
}
|
}
|
||||||
@@ -66,6 +66,8 @@ let manga_vars: MangaVars[] = [];
|
|||||||
let music_serve_paths: string[] = [];
|
let music_serve_paths: string[] = [];
|
||||||
let music_vars: MusicVars[] = [];
|
let music_vars: MusicVars[] = [];
|
||||||
|
|
||||||
|
let songs: string[] = [];
|
||||||
|
|
||||||
for (let i = 0; i < listings.length; i++) {
|
for (let i = 0; i < listings.length; i++) {
|
||||||
const listing: Listing = listings[i];
|
const listing: Listing = listings[i];
|
||||||
directory_serve_paths.push(`/${listing.type}/${listing.name}`);
|
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") {
|
} else if (listing.type === "music") {
|
||||||
for (let j = 0; j < chapters.length; j++) {
|
for (let j = 0; j < chapters.length; j++) {
|
||||||
const chapter: string = chapters[j];
|
const chapter: string = chapters[j];
|
||||||
|
songs.push(`${listing.name}/${chapter}`);
|
||||||
music_serve_paths.push(`/${listing.type}/${listing.name}/${chapter}`);
|
music_serve_paths.push(`/${listing.type}/${listing.name}/${chapter}`);
|
||||||
music_vars.push({
|
music_vars.push({
|
||||||
listing,
|
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, anime_serve_paths, "anime", anime_vars);
|
||||||
builder.serve_templates(renderer, manga_serve_paths, "manga", manga_vars);
|
builder.serve_templates(renderer, manga_serve_paths, "manga", manga_vars);
|
||||||
builder.serve_templates(renderer, music_serve_paths, "music", music_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