Mercurial > web

diff music.html @ 32:fc37e1f8b89e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add chiptune2.js functionality
author Paper <mrpapersonic@gmail.com>
date Fri, 17 Dec 2021 21:22:41 -0500
parents 73afe805faa3
children 00a9eeb901ed
line wrap: on
line diff
--- a/music.html	Fri Dec 17 19:47:52 2021 -0500
+++ b/music.html	Fri Dec 17 21:22:41 2021 -0500
@@ -3,6 +3,57 @@
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+	<script>
+		window['libopenmpt'] = {};
+
+		libopenmpt.locateFile = function(filename) {
+			return "//cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/" + filename;
+		};
+
+		libopenmpt.onRuntimeInitialized = function() {
+			var player;
+
+			function init() {
+				if (player == undefined) {
+					player = new ChiptuneJsPlayer(new ChiptuneJsConfig(-1));
+				} else {
+					player.stop();
+				}
+			}
+
+			function afterLoad(path, buffer) {
+				player.play(buffer);
+				setMetadata(path);
+			}
+
+			function loadURL(path) {
+				init();
+				player.load(path, afterLoad.bind(this, path));
+			}
+
+			function setMetadata(filename) {
+				var metadata = player.metadata();
+				if (metadata['title'] != '') {
+					document.getElementById('title').innerHTML = metadata['title'];
+				} else {
+					document.getElementById('title').innerHTML = filename;
+				}
+			}
+
+			function pauseButton() {
+				player.togglePause();
+			}
+
+			document.querySelector('#playpause').addEventListener('click', pauseButton, false);
+			document.querySelectorAll('.song').forEach(function(e) {
+				e.addEventListener('click', function(evt) {
+					loadURL(evt.target.getAttribute("data-modurl"));
+				}, false);
+			});
+		};
+	</script>
+	<script type="application/javascript" src="https://cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/chiptune2.js"></script>
+	<script type="application/javascript" src="https://cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/libopenmpt.js"></script>
 	<title>Music - Paper's website</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -57,25 +108,30 @@
 	</nav>
 	<h1>Music</h1>
 	<div class="box">
+		<p>Now playing:</p>
+		<p id="title">nothing loaded</p>
+		<button type="button" class="btn btn-primary" id="playpause">Play/Pause</button>
+	</div>
+	<div class="box">
 		<h2>Originals</h2>
-			<p><a href="music/paper_-_whistling_meadows.it">Whistling Meadows [.IT]</a></p>
-			<p><a href="music/paper_-_shartlover.s3m">xX ShartLover1337 Xx [.S3M]</a></p>
-			<p><a href="music/paper_-_reaching_the_world_border.it">Reaching the World Border [.IT]</a></p>
-			<p><a href="music/paper_-_sarta.mptm">THIS IS SARTA [.MPTM]</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_whistling_meadows.it">Whistling Meadows [.IT]</a>&nbsp;<a href="music/paper_-_whistling_meadows.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_shartlover.s3m">xX ShartLover1337 Xx [.S3M]</a>&nbsp;<a href="music/paper_-_shartlover.s3m">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_reaching_the_world_border.it">Reaching the World Border [.IT]</a>&nbsp;<a href="music/paper_-_reaching_the_world_border.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_sarta.mptm">THIS IS SARTA [.MPTM]</a>&nbsp;<a href="music/paper_-_sarta.mptm">(Download)</a></p>
 	</div>
 	<div class="box">
 		<h2>Covers</h2>
-			<p><a href="music/paper_-_dance_in_the_universe_cover.mod">Dance in the universe cover [.MOD]</a></p>
-			<p><a href="music/paper_-_bob-omb_battlefield_remix.it">Super Mario 64 - Bob-omb Battlefield Remix [.IT]</a></p>
-			<p><a href="music/paper_-_point_of_no_hi-score.it">(mashup) Drax - Tiger Mission Hi-score + ESCHATOS OST - Point of No Return [.IT]</a></p>
-			<p><a href="music/paper_-_vrc6n001_remake.it">(remake) Naruto - VRC6N001 [.IT]</a></p>
-			<p><a href="music/paper_-_hip_shop.it">Deltarune - Hip Shop [.IT]</a></p>
-			<p><a href="music/paper_-_nerou.it">ziner - Flatwoods Monster [.IT]</a></p>
-			<p><a href="music/paper_-_drip.xm">Leonz - Among Us Drip Theme [.XM]</a></p>
-			<p><a href="music/paper_-_3005.it">Childish Gambino - 3005 [.IT]</a></p>
-			<p><a href="music/paper_-_infinity.it">Cho Ren Sha 68k - Infinity [.IT]</a></p>
-			<p><a href="music/paper_-_bestending.it">Aphex Twin - Avril 14th [.IT]</a></p>
-			<p><a href="music/paper_-_visitors.xm">KOTO - Visitors [.XM]</a></p>
-			<p><a href="music/paper_-_vrc6n001.it">Naruto - VRC6N001 [.IT]</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_dance_in_the_universe_cover.mod">Dance in the universe cover [.MOD]</a>&nbsp;<a href="music/paper_-_dance_in_the_universe_cover.mod">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_bob-omb_battlefield_remix.it">Super Mario 64 - Bob-omb Battlefield Remix [.IT]</a>&nbsp;<a href="music/paper_-_bob-omb_battlefield_remix.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_point_of_no_hi-score.it">(mashup) Drax - Tiger Mission Hi-score + ESCHATOS OST - Point of No Return [.IT]</a>&nbsp;<a href="music/paper_-_point_of_no_hi-score.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_vrc6n001_remake.it">(remake) Naruto - VRC6N001 [.IT]</a>&nbsp;<a href="music/paper_-_vrc6n001_remake.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_hip_shop.it">Deltarune - Hip Shop [.IT]</a>&nbsp;<a href="music/paper_-_hip_shop.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_nerou.it">ziner - Flatwoods Monster [.IT]</a>&nbsp;<a href="music/paper_-_nerou.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_drip.xm">Leonz - Among Us Drip Theme [.XM]</a>&nbsp;<a href="music/paper_-_drip.xm">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_3005.it">Childish Gambino - 3005 [.IT]</a>&nbsp;<a href="music/paper_-_3005.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_infinity.it">Cho Ren Sha 68k - Infinity [.IT]</a>&nbsp;<a href="music/paper_-_infinity.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_bestending.it">Aphex Twin - Avril 14th [.IT]</a>&nbsp;<a href="music/paper_-_bestending.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_visitors.xm">KOTO - Visitors [.XM]</a>&nbsp;<a href="music/paper_-_visitors.xm">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="music/paper_-_vrc6n001.it">Naruto - VRC6N001 [.IT]</a>&nbsp;<a href="music/paper_-_vrc6n001.it">(Download)</a></p>
 	</div>
 </body>