Mercurial > web

comparison 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
comparison
equal deleted inserted replaced
31:73afe805faa3 32:fc37e1f8b89e
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <head> 2 <head>
3 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 3 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
4 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?"> 4 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
5 <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> 5 <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>
6 <script>
7 window['libopenmpt'] = {};
8
9 libopenmpt.locateFile = function(filename) {
10 return "//cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/" + filename;
11 };
12
13 libopenmpt.onRuntimeInitialized = function() {
14 var player;
15
16 function init() {
17 if (player == undefined) {
18 player = new ChiptuneJsPlayer(new ChiptuneJsConfig(-1));
19 } else {
20 player.stop();
21 }
22 }
23
24 function afterLoad(path, buffer) {
25 player.play(buffer);
26 setMetadata(path);
27 }
28
29 function loadURL(path) {
30 init();
31 player.load(path, afterLoad.bind(this, path));
32 }
33
34 function setMetadata(filename) {
35 var metadata = player.metadata();
36 if (metadata['title'] != '') {
37 document.getElementById('title').innerHTML = metadata['title'];
38 } else {
39 document.getElementById('title').innerHTML = filename;
40 }
41 }
42
43 function pauseButton() {
44 player.togglePause();
45 }
46
47 document.querySelector('#playpause').addEventListener('click', pauseButton, false);
48 document.querySelectorAll('.song').forEach(function(e) {
49 e.addEventListener('click', function(evt) {
50 loadURL(evt.target.getAttribute("data-modurl"));
51 }, false);
52 });
53 };
54 </script>
55 <script type="application/javascript" src="https://cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/chiptune2.js"></script>
56 <script type="application/javascript" src="https://cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/libopenmpt.js"></script>
6 <title>Music - Paper's website</title> 57 <title>Music - Paper's website</title>
7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 58 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 59 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
9 <style> 60 <style>
10 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap'); 61 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap');
55 </div> 106 </div>
56 </div> 107 </div>
57 </nav> 108 </nav>
58 <h1>Music</h1> 109 <h1>Music</h1>
59 <div class="box"> 110 <div class="box">
111 <p>Now playing:</p>
112 <p id="title">nothing loaded</p>
113 <button type="button" class="btn btn-primary" id="playpause">Play/Pause</button>
114 </div>
115 <div class="box">
60 <h2>Originals</h2> 116 <h2>Originals</h2>
61 <p><a href="music/paper_-_whistling_meadows.it">Whistling Meadows [.IT]</a></p> 117 <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>
62 <p><a href="music/paper_-_shartlover.s3m">xX ShartLover1337 Xx [.S3M]</a></p> 118 <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>
63 <p><a href="music/paper_-_reaching_the_world_border.it">Reaching the World Border [.IT]</a></p> 119 <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>
64 <p><a href="music/paper_-_sarta.mptm">THIS IS SARTA [.MPTM]</a></p> 120 <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>
65 </div> 121 </div>
66 <div class="box"> 122 <div class="box">
67 <h2>Covers</h2> 123 <h2>Covers</h2>
68 <p><a href="music/paper_-_dance_in_the_universe_cover.mod">Dance in the universe cover [.MOD]</a></p> 124 <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>
69 <p><a href="music/paper_-_bob-omb_battlefield_remix.it">Super Mario 64 - Bob-omb Battlefield Remix [.IT]</a></p> 125 <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>
70 <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> 126 <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>
71 <p><a href="music/paper_-_vrc6n001_remake.it">(remake) Naruto - VRC6N001 [.IT]</a></p> 127 <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>
72 <p><a href="music/paper_-_hip_shop.it">Deltarune - Hip Shop [.IT]</a></p> 128 <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>
73 <p><a href="music/paper_-_nerou.it">ziner - Flatwoods Monster [.IT]</a></p> 129 <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>
74 <p><a href="music/paper_-_drip.xm">Leonz - Among Us Drip Theme [.XM]</a></p> 130 <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>
75 <p><a href="music/paper_-_3005.it">Childish Gambino - 3005 [.IT]</a></p> 131 <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>
76 <p><a href="music/paper_-_infinity.it">Cho Ren Sha 68k - Infinity [.IT]</a></p> 132 <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>
77 <p><a href="music/paper_-_bestending.it">Aphex Twin - Avril 14th [.IT]</a></p> 133 <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>
78 <p><a href="music/paper_-_visitors.xm">KOTO - Visitors [.XM]</a></p> 134 <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>
79 <p><a href="music/paper_-_vrc6n001.it">Naruto - VRC6N001 [.IT]</a></p> 135 <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>
80 </div> 136 </div>
81 </body> 137 </body>