Mercurial > web
annotate music.html @ 40:d5d97f45b103
We don't store chiptune2.js locally
committer: GitHub <noreply@github.com>
author | Paper <37962225+mrpapersonic@users.noreply.github.com> |
---|---|
date | Wed, 11 May 2022 03:13:39 -0400 |
parents | 35c68429641d |
children | f71c5c19940f |
rev | line source |
---|---|
20 | 1 <!DOCTYPE html> |
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"> | |
25 | 4 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?"> |
20 | 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> |
32
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
6 <script> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
7 window['libopenmpt'] = {}; |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
8 |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
9 libopenmpt.locateFile = function(filename) { |
39
35c68429641d
[music.html] Use updated libopenmpt
Paper <37962225+mrpapersonic@users.noreply.github.com>
parents:
37
diff
changeset
|
10 return "./js/" + filename; |
32
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
11 }; |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
12 |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
13 libopenmpt.onRuntimeInitialized = function() { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
14 var player; |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
15 |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
16 function init() { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
17 if (player == undefined) { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
18 player = new ChiptuneJsPlayer(new ChiptuneJsConfig(-1)); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
19 } else { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
20 player.stop(); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
21 } |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
22 } |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
23 |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
24 function afterLoad(path, buffer) { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
25 player.play(buffer); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
26 setMetadata(path); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
27 } |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
28 |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
29 function loadURL(path) { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
30 init(); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
31 player.load(path, afterLoad.bind(this, path)); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
32 } |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
33 |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
34 function setMetadata(filename) { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
35 var metadata = player.metadata(); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
36 if (metadata['title'] != '') { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
37 document.getElementById('title').innerHTML = metadata['title']; |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
38 } else { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
39 document.getElementById('title').innerHTML = filename; |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
40 } |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
41 } |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
42 |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
43 function pauseButton() { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
44 player.togglePause(); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
45 } |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
46 |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
47 document.querySelector('#playpause').addEventListener('click', pauseButton, false); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
48 document.querySelectorAll('.song').forEach(function(e) { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
49 e.addEventListener('click', function(evt) { |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
50 loadURL(evt.target.getAttribute("data-modurl")); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
51 }, false); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
52 }); |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
53 }; |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
54 </script> |
40
d5d97f45b103
We don't store chiptune2.js locally
Paper <37962225+mrpapersonic@users.noreply.github.com>
parents:
39
diff
changeset
|
55 <script type="application/javascript" src="//cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/chiptune2.js"></script> |
39
35c68429641d
[music.html] Use updated libopenmpt
Paper <37962225+mrpapersonic@users.noreply.github.com>
parents:
37
diff
changeset
|
56 <script type="application/javascript" src="./js/libopenmpt.js"></script> |
20 | 57 <title>Music - Paper's website</title> |
58 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
21
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
59 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
20 | 60 <style> |
61 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap'); | |
62 .navbar { | |
63 background: linear-gradient(to bottom, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 100%); | |
27
f86d23d40885
Fix mobile navbar being centered on music.html
Paper <37962225+mrpapersonic@users.noreply.github.com>
parents:
25
diff
changeset
|
64 text-align: left; /* Override body text align */ |
20 | 65 } |
66 body { | |
21
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
67 background-size: cover; |
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
68 background: url("forest.png") no-repeat center center fixed; |
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
69 color: white; |
20 | 70 font-family: 'Source Sans 3', sans-serif; |
21
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
71 text-align: center; |
20 | 72 text-shadow: 5px 0 10px rgba(0, 0, 0, 0.5); |
73 } | |
74 div.box { | |
21
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
75 background-color: rgba(0, 0, 0, 0.7); |
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
76 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5) inset; |
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
77 color: white; |
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
78 left: 0; |
20 | 79 margin: 1% auto; |
80 max-width: 500px; | |
21
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
81 padding: 10px; |
20 | 82 right: 0; |
21
3c7989047451
Make code prettier and fix a few visual errors
Paper <mrpapersonic@gmail.com>
parents:
20
diff
changeset
|
83 text-align: center; |
20 | 84 top: 50%; |
85 } | |
86 a:link, a:visited, a:hover, a:active { | |
87 color: #ff6600; | |
88 } | |
89 </style> | |
90 </head> | |
91 <body> | |
92 <nav class="navbar navbar-expand-lg navbar-dark"> | |
93 <div class="container-fluid"> | |
94 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
95 <span class="navbar-toggler-icon"></span> | |
96 </button> | |
97 <div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
98 <ul class="navbar-nav me-auto mb-1 mb-lg-3"> | |
99 <li class="nav-item"> | |
100 <a class="nav-link" href="index.html">Home</a> | |
101 </li> | |
102 <li class="nav-item"> | |
103 <a class="nav-link active" aria-current="page" href="#">Music</a> | |
104 </li> | |
33 | 105 <li class="nav-item"> |
106 <a class="nav-link" href="projects.html">Projects</a> | |
107 </li> | |
20 | 108 </ul> |
109 </div> | |
110 </div> | |
111 </nav> | |
112 <h1>Music</h1> | |
113 <div class="box"> | |
32
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
114 <p>Now playing:</p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
115 <p id="title">nothing loaded</p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
116 <button type="button" class="btn btn-primary" id="playpause">Play/Pause</button> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
117 </div> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
118 <div class="box"> |
20 | 119 <h2>Originals</h2> |
34
635334681d29
Add new music and add projects
Paper <mrpapersonic@gmail.com>
parents:
33
diff
changeset
|
120 <p><a href="#" class="song" data-modurl="music/paper_-_old_desk_tribute.xm">Old Desk Tribute [.XM]</a> <a href="music/paper_-_old_desk_tribute.xm">(Download)</a></p> |
37 | 121 <p><a href="#" class="song" data-modurl="music/paper_-_chippygolucky.xm">Chippy-Go-Lucky [.XM]</a> <a href="music/paper_-_chippygolucky.xm">(Download)</a></p> |
32
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
122 <p><a href="#" class="song" data-modurl="music/paper_-_whistling_meadows.it">Whistling Meadows [.IT]</a> <a href="music/paper_-_whistling_meadows.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
123 <p><a href="#" class="song" data-modurl="music/paper_-_shartlover.s3m">xX ShartLover1337 Xx [.S3M]</a> <a href="music/paper_-_shartlover.s3m">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
124 <p><a href="#" class="song" data-modurl="music/paper_-_reaching_the_world_border.it">Reaching the World Border [.IT]</a> <a href="music/paper_-_reaching_the_world_border.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
125 <p><a href="#" class="song" data-modurl="music/paper_-_sarta.mptm">THIS IS SARTA [.MPTM]</a> <a href="music/paper_-_sarta.mptm">(Download)</a></p> |
20 | 126 </div> |
127 <div class="box"> | |
128 <h2>Covers</h2> | |
34
635334681d29
Add new music and add projects
Paper <mrpapersonic@gmail.com>
parents:
33
diff
changeset
|
129 <p><a href="#" class="song" data-modurl="music/paper_-_tintin_on_the_moon.mod">TinTin on the Moon [.MOD]</a> <a href="music/paper_-_tintin_on_the_moon.mod">(Download)</a></p> |
32
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
130 <p><a href="#" class="song" data-modurl="music/paper_-_dance_in_the_universe_cover.mod">Dance in the universe cover [.MOD]</a> <a href="music/paper_-_dance_in_the_universe_cover.mod">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
131 <p><a href="#" class="song" data-modurl="music/paper_-_bob-omb_battlefield_remix.it">Super Mario 64 - Bob-omb Battlefield Remix [.IT]</a> <a href="music/paper_-_bob-omb_battlefield_remix.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
132 <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> <a href="music/paper_-_point_of_no_hi-score.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
133 <p><a href="#" class="song" data-modurl="music/paper_-_vrc6n001_remake.it">(remake) Naruto - VRC6N001 [.IT]</a> <a href="music/paper_-_vrc6n001_remake.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
134 <p><a href="#" class="song" data-modurl="music/paper_-_hip_shop.it">Deltarune - Hip Shop [.IT]</a> <a href="music/paper_-_hip_shop.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
135 <p><a href="#" class="song" data-modurl="music/paper_-_nerou.it">ziner - Flatwoods Monster [.IT]</a> <a href="music/paper_-_nerou.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
136 <p><a href="#" class="song" data-modurl="music/paper_-_drip.xm">Leonz - Among Us Drip Theme [.XM]</a> <a href="music/paper_-_drip.xm">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
137 <p><a href="#" class="song" data-modurl="music/paper_-_3005.it">Childish Gambino - 3005 [.IT]</a> <a href="music/paper_-_3005.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
138 <p><a href="#" class="song" data-modurl="music/paper_-_infinity.it">Cho Ren Sha 68k - Infinity [.IT]</a> <a href="music/paper_-_infinity.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
139 <p><a href="#" class="song" data-modurl="music/paper_-_bestending.it">Aphex Twin - Avril 14th [.IT]</a> <a href="music/paper_-_bestending.it">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
140 <p><a href="#" class="song" data-modurl="music/paper_-_visitors.xm">KOTO - Visitors [.XM]</a> <a href="music/paper_-_visitors.xm">(Download)</a></p> |
fc37e1f8b89e
Add chiptune2.js functionality
Paper <mrpapersonic@gmail.com>
parents:
31
diff
changeset
|
141 <p><a href="#" class="song" data-modurl="music/paper_-_vrc6n001.it">Naruto - VRC6N001 [.IT]</a> <a href="music/paper_-_vrc6n001.it">(Download)</a></p> |
20 | 142 </div> |
143 </body> |