WIP: The MuSiCaL Update #1
@@ -7,7 +7,6 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<!--gotta remember to ALSO load midijs-->
|
||||
<script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>
|
||||
<script src="/Music/bgm.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@@ -16,6 +15,12 @@
|
||||
<link href="/normalbordem.css" rel="stylesheet" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<!-- song title display in top-right corner -->
|
||||
<div id="bgm-title" style="position:fixed!important;top:10px!important;right:10px!important;padding:8px 12px!important;background-color:rgba(0,0,0,0.8)!important;color:#ffeb3b!important;border:2px solid yellow!important;border-radius:5px!important;z-index:9999!important;font-weight:bold!important;font-family:'Sono',Arial,sans-serif!important;font-size:12px!important;text-shadow:1px 1px 2px #000!important;opacity:1!important;display:block!important;visibility:visible!important;box-shadow:0 0 10px rgba(255,235,59,0.3)!important;"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
<!-- [FC2 Analyzer] //analyzer.fc2.com/ -->
|
||||
<script language="javascript" src="//analyzer54.fc2.com/ana/processor.php?uid=2906964" type="text/javascript"></script>
|
||||
<noscript><div align="right"><img src="//analyzer54.fc2.com/ana/icon.php?uid=2906964&ref=&href=&wid=0&hei=0&col=0" /></div></noscript>
|
||||
@@ -41,4 +46,11 @@
|
||||
<img src=/Vault/gameboy.gif>
|
||||
</footer>
|
||||
</body>
|
||||
<!-- noscript fallback for BGM.js user -->
|
||||
<noscript>
|
||||
<div style="position:fixed;top:10px;right:10px;background:#111;color:#ffeb3b;padding:8px 12px;border:2px solid yellow;border-radius:5px;font-family:'Sono',sans-serif;font-weight:bold;z-index:1000;">
|
||||
MIDI music requires JavaScript. This song title display won't work without it.
|
||||
</div>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<!--gotta remember to ALSO load midijs-->
|
||||
<script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>
|
||||
<script src="/Music/bgm.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@@ -16,6 +15,12 @@
|
||||
<link href="/normalbordem.css" rel="stylesheet" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<!-- song title display in top-right corner -->
|
||||
<div id="bgm-title" style="position:fixed!important;top:10px!important;right:10px!important;padding:8px 12px!important;background-color:rgba(0,0,0,0.8)!important;color:#ffeb3b!important;border:2px solid yellow!important;border-radius:5px!important;z-index:9999!important;font-weight:bold!important;font-family:'Sono',Arial,sans-serif!important;font-size:12px!important;text-shadow:1px 1px 2px #000!important;opacity:1!important;display:block!important;visibility:visible!important;box-shadow:0 0 10px rgba(255,235,59,0.3)!important;"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
<!-- [FC2 Analyzer] //analyzer.fc2.com/ -->
|
||||
<script language="javascript" src="//analyzer54.fc2.com/ana/processor.php?uid=2906964" type="text/javascript"></script>
|
||||
<noscript><div align="right"><img src="//analyzer54.fc2.com/ana/icon.php?uid=2906964&ref=&href=&wid=0&hei=0&col=0" /></div></noscript>
|
||||
@@ -53,5 +58,12 @@ HalfLife Event (bodermen event)
|
||||
<footer>
|
||||
<a href=index.html>go back</a>
|
||||
</footer>
|
||||
</body>
|
||||
<!-- noscript fallback for BGM.js -->
|
||||
<noscript>
|
||||
<div style="position:fixed;top:10px;right:10px;background:#111;color:#ffeb3b;padding:8px 12px;border:2px solid yellow;border-radius:5px;font-family:'Sono',sans-serif;font-weight:bold;z-index:1000;">
|
||||
MIDI music requires JavaScript. Song title display won't work without JS.
|
||||
</div>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,12 +10,17 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<!--gotta remember to ALSO load midijs-->
|
||||
<script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>
|
||||
<script src="/Music/bgm.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Sono&display=swap" rel="stylesheet">
|
||||
<link href="/normalbordem.css" rel="stylesheet" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<!-- song title display in top-right corner -->
|
||||
<div id="bgm-title" style="position:fixed!important;top:10px!important;right:10px!important;padding:8px 12px!important;background-color:rgba(0,0,0,0.8)!important;color:#ffeb3b!important;border:2px solid yellow!important;border-radius:5px!important;z-index:9999!important;font-weight:bold!important;font-family:'Sono',Arial,sans-serif!important;font-size:12px!important;text-shadow:1px 1px 2px #000!important;opacity:1!important;display:block!important;visibility:visible!important;box-shadow:0 0 10px rgba(255,235,59,0.3)!important;"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
<!-- [FC2 Analyzer] //analyzer.fc2.com/ -->
|
||||
<script language="javascript" src="//analyzer54.fc2.com/ana/processor.php?uid=2906964" type="text/javascript"></script>
|
||||
<noscript><div align="right"><img src="//analyzer54.fc2.com/ana/icon.php?uid=2906964&ref=&href=&wid=0&hei=0&col=0" /></div></noscript>
|
||||
@@ -62,5 +67,12 @@
|
||||
<footer>
|
||||
<a href=index.html>go back</a>
|
||||
</footer>
|
||||
</body>
|
||||
<!-- noscript fallback for BGM.js -->
|
||||
<noscript>
|
||||
<div style="position:fixed;top:10px;right:10px;background:#111;color:#ffeb3b;padding:8px 12px;border:2px solid yellow;border-radius:5px;font-family:'Sono',sans-serif;font-weight:bold;z-index:1000;">
|
||||
MIDI music requires JavaScript. Song title display won't work without JS.
|
||||
</div>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,12 +10,17 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<!--gotta remember to ALSO load midijs-->
|
||||
<script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>
|
||||
<script src="/Music/bgm.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Sono&display=swap" rel="stylesheet">
|
||||
<link href="/normalbordem.css" rel="stylesheet" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<!-- song title display in top-right corner -->
|
||||
<div id="bgm-title" style="position:fixed!important;top:10px!important;right:10px!important;padding:8px 12px!important;background-color:rgba(0,0,0,0.8)!important;color:#ffeb3b!important;border:2px solid yellow!important;border-radius:5px!important;z-index:9999!important;font-weight:bold!important;font-family:'Sono',Arial,sans-serif!important;font-size:12px!important;text-shadow:1px 1px 2px #000!important;opacity:1!important;display:block!important;visibility:visible!important;box-shadow:0 0 10px rgba(255,235,59,0.3)!important;"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
<!-- [FC2 Analyzer] //analyzer.fc2.com/ -->
|
||||
<script language="javascript" src="//analyzer54.fc2.com/ana/processor.php?uid=2906964" type="text/javascript"></script>
|
||||
<noscript><div align="right"><img src="//analyzer54.fc2.com/ana/icon.php?uid=2906964&ref=&href=&wid=0&hei=0&col=0" /></div></noscript>
|
||||
@@ -66,5 +71,12 @@
|
||||
<footer>
|
||||
<a href=index.html>go back</a>
|
||||
</footer>
|
||||
</body>
|
||||
<!-- noscript fallback for BGM.js -->
|
||||
<noscript>
|
||||
<div style="position:fixed;top:10px;right:10px;background:#111;color:#ffeb3b;padding:8px 12px;border:2px solid yellow;border-radius:5px;font-family:'Sono',sans-serif;font-weight:bold;z-index:1000;">
|
||||
MIDI music requires JavaScript. Song title display won't work without JS.
|
||||
</div>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
115
Music/bgm.js
115
Music/bgm.js
@@ -1,74 +1,73 @@
|
||||
//Based off of the one found at not_found.html but randomizes the songs
|
||||
let song = "/Music/noway.mid"
|
||||
//for checkaudio() but if it's called recursively this won't be defined so one defining here later it should be fine
|
||||
let consecutivefails = 0;
|
||||
function SongRNG() {
|
||||
//Based off of the one found at not_found.html but randomizes the songs
|
||||
let song = "/Music/noway.mid"
|
||||
//for checkaudio() but if it's called recursively this won't be defined so one defining here later it should be fine
|
||||
let consecutivefails = 0;
|
||||
|
||||
function SongRNG() {
|
||||
//this is actually code from minima and its absolutely NOT made for this BUT WHO CARES????
|
||||
//some refactoring done by Gemini
|
||||
//@ts-check
|
||||
console.log("yo whatap")
|
||||
//some refactoring done by Gemini
|
||||
console.log("picking a song...")
|
||||
//funni.mid is uhh- 24 hour cinderella
|
||||
let lines = ["AnotherMedium-Updated.mid", "CORE_.mid", "Death_by_Glamour.mid", "maniaStudiopolisZoneAct1.mid", "maniaStudiopolisZoneAct2.mid", "mk7_select_menu.mid", "Mpntbgm1.mid", "MPntBgk2.mid", "portal.mid", "SmashMenu.mid", "funni.mid", "utruins.mid"]
|
||||
let titles = ["Another Medium", "CORE", "Death by Glamour", "Studiopolis Act 1 (Lights, Camera, Action!)", "Studiopolis Act 2", "Select a kart", "Creative Exersise", "Monkeys", "Still Alive", "Main Menu", "24 Hour Cinderella", "The Ruins"]
|
||||
let games = ["Undertale", "Undertale", "Undertale", "Sonic Mania", "Sonic Mania", "Mario Kart 7", "Mario Paint", "Mario Paint", "Portal", "SSB Wii U/3DS", "Yakuza", "Undertale"]
|
||||
let max = lines.length - 1;
|
||||
// Generate a random integer between 0 and max (inclusive)
|
||||
let randint = Math.floor(Math.random() * (max + 1));
|
||||
|
||||
console.log("random number:", randint)
|
||||
//32 lines randomly picked, probably will sometimes return "undefined". i don't feel like fixing it.
|
||||
//32 lines is a lie. just read the "max" variable plus one for rounding errors. If you can't tell i never update these comments (but hey, at least when someone accuses me of being AI i have... whatever the hell this is )
|
||||
console.log("today's track:", lines[randint])
|
||||
song = "/Music/bgm/" + lines[randint]
|
||||
//window.addEventListener('DOMContentLoaded', newLine);
|
||||
}
|
||||
//could be useful
|
||||
function getSongTitle() {
|
||||
console.log("song info for", randint)
|
||||
let titles = ["Another Medium", "CORE", "Death by Glamour", "Studiopolis Act 1 (Lights, Camera, Action!)", "Studiopolis Act 2", "Select a kart", "Creative Exersise", "Monkeys", "Still Alive", "Main Menu", "24 Hour Cinderella", "The Ruins"]
|
||||
let games = ["Undertale", "Undertale", "Undertale", "Sonic Mania", "Sonic Mania", "Mario Kart 7", "Mario Paint", "Mario Paint", "Portal", "SSB Wii U/3DS", "Yakuza", "Undertale"]
|
||||
console.log(titles[randint], "from ", games[randint])
|
||||
//if for some reason randint is undefined.. this just completly breaks. unfortunately for you purists this stuff's unused atp so it's NEVER getting fixed AHAHHAAHHAH
|
||||
|
||||
// Display song title on page (stored in hidden element styled by theme)
|
||||
try {
|
||||
let titleEl = document.getElementById('bgm-title') || document.querySelector('[data-song-title]')
|
||||
if (titleEl) {
|
||||
titleEl.textContent = titles[randint] + " - " + games[randint]
|
||||
titleEl.classList.add('visible')
|
||||
}
|
||||
} catch(e) {
|
||||
console.warn("BGM title display unavailable (element may not exist on this page)")
|
||||
}
|
||||
song = "/Music/bgm/" + lines[randint]
|
||||
}
|
||||
//ok, now we actually do stuff
|
||||
SongRNG()
|
||||
//just in case the user has autoplay disabled because they probably do
|
||||
MIDIjs.play(song, true);
|
||||
//idk if it's playing
|
||||
isplaying = "idk"
|
||||
//random ahh google code
|
||||
MIDIjs.player_callback = function(event) {
|
||||
// Check if event object contains time (indicating playback)
|
||||
if (event && event.time !== undefined) {
|
||||
isplaying = "true";
|
||||
} else {
|
||||
isplaying = "false";
|
||||
}
|
||||
};
|
||||
var apbox = document.getElementById("autoplay");
|
||||
console.log("waiting a bit for midijs")
|
||||
//just in case the user has autoplay because they probably do
|
||||
MIDIjs.play(song, true);
|
||||
MIDIjs.player_callback = function(event) {
|
||||
// Check if event object contains time (indicating playback)
|
||||
if (event && event.time !== undefined) {
|
||||
isplaying = "true";
|
||||
} else {
|
||||
isplaying = "false";
|
||||
}
|
||||
};
|
||||
var apbox = document.getElementById("autoplay");
|
||||
setTimeout(function(){
|
||||
checkAudio()
|
||||
}, 5000)
|
||||
function checkAudio() {
|
||||
if (isplaying == "false") {
|
||||
console.log("music isn't playing. i blame chrome")
|
||||
document.getElementById("autoplay").innerHTML = "<p>Music is playing, but your autoplay is turned off.</p><noscript>JS is off, MIDIjs won't be able to play audio anyways.</noscript> <button onclick=MIDIjs.play(song, true)>Play Music</button>"
|
||||
} else if (isplaying == "true"){
|
||||
console.log("music do be the playing")
|
||||
} else if (isplaying == "idk") {
|
||||
console.warn("idk if there be music")
|
||||
//This used to just show the error anyway but i'm tired of it showing randomly so it's going to re-test now
|
||||
console.log("gonna check midijs again, attempt number:", consecutivefails + 1)
|
||||
consecutivefails++;
|
||||
if (consecutivefails >= 2) {
|
||||
console.log("afaik music is infact, not playing")
|
||||
document.getElementById("autoplay").innerHTML = "<p>Music is playing, but your autoplay is turned off.</p><noscript>JS is off, MIDIjs won't be able to play audio anyways.</noscript> <button onclick=MIDIjs.play(song, true)>Play Music</button>"
|
||||
} else { setTimeout(function(){
|
||||
checkAudio()
|
||||
}, 5000) }
|
||||
}
|
||||
}
|
||||
function testchkaudio(isplaying) {
|
||||
checkAudio()
|
||||
}
|
||||
function checkAudio() {
|
||||
try {
|
||||
if (isplaying == "false") {
|
||||
console.log("music isn't playing. i blame chrome")
|
||||
let apbox = document.getElementById("autoplay")
|
||||
if (apbox) {
|
||||
apbox.innerHTML = "<p>Music is playing, but your autoplay is turned off.</p><noscript>JS is off, MIDIjs won't be able to play audio anyways.</noscript> <button onclick=MIDIjs.play(song, true)>Play Music</button>"
|
||||
}
|
||||
} else if (isplaying == "true"){
|
||||
console.log("music is playing")
|
||||
} else {
|
||||
console.log("music is playing but autoplay is disabled. checking again...")
|
||||
consecutivefails++;
|
||||
if (consecutivefails >= 2) {
|
||||
let apbox = document.getElementById("autoplay")
|
||||
if (apbox) {
|
||||
apbox.innerHTML = "<p>Music is playing, but your autoplay is turned off.</p><noscript>JS is off, MIDIjs won't be able to play audio anyways.</noscript> <button onclick=MIDIjs.play(song, true)>Play Music</button>"
|
||||
}
|
||||
} else { setTimeout(function(){
|
||||
checkAudio()
|
||||
}, 5000) }
|
||||
}
|
||||
} catch(e) {
|
||||
console.warn("BGM autoplay UI unavailable (element may not exist on this page)")
|
||||
}
|
||||
}
|
||||
14
index.html
14
index.html
@@ -17,11 +17,16 @@
|
||||
<script src=compat.js></script>
|
||||
<!--gotta remember to ALSO load midijs-->
|
||||
<script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>
|
||||
<script src="/Music/bgm.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Sono&display=swap" rel="stylesheet">
|
||||
<link href="/normalbordem.css" rel="stylesheet" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<!-- song title display in top-right corner -->
|
||||
<div id="bgm-title" style="position:fixed!important;top:10px!important;right:10px!important;padding:8px 12px!important;background-color:rgba(0,0,0,0.8)!important;color:#ffeb3b!important;border:2px solid yellow!important;border-radius:5px!important;z-index:9999!important;font-weight:bold!important;font-family:'Sono',Arial,sans-serif!important;font-size:12px!important;text-shadow:1px 1px 2px #000!important;opacity:1!important;display:block!important;visibility:visible!important;box-shadow:0 0 10px rgba(255,235,59,0.3)!important;"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
<div class="autoplay-warning" id="autoplay">
|
||||
</div>
|
||||
<!-- [FC2 Analyzer] //analyzer.fc2.com/ -->
|
||||
@@ -94,3 +99,10 @@ Current Viewers:<script language="javascript" type="text/javascript" src="//coun
|
||||
<!--<h6 style="color: grey">psst. if you get tired of all the flashy stuff, <a href=index2.html style="color: grey;">checck out the lite version of this site</a>.</h6>-->
|
||||
<h6 style="color: grey">brb, lite mode site is broken rn</h6>
|
||||
</body>
|
||||
<!-- noscript fallback for BGM.js user -->
|
||||
<noscript>
|
||||
<div style="position:fixed;top:10px;right:10px;background:#111;color:#ffeb3b;padding:8px 12px;border:2px solid yellow;border-radius:5px;font-family:'Sono',sans-serif;font-weight:bold;z-index:1000;">
|
||||
MIDI music requires JavaScript. This song title display won't work without it.
|
||||
</div>
|
||||
</noscript>
|
||||
</body>
|
||||
|
||||
@@ -181,3 +181,30 @@ img {
|
||||
90% { transform: rotate(10deg); }
|
||||
100% { transform: rotate(11deg); }
|
||||
}
|
||||
/* BGM song title display - hidden by default, styled by theme */
|
||||
#bgm-title {
|
||||
position: fixed !important;
|
||||
top: 10px !important;
|
||||
right: 10px !important;
|
||||
padding: 8px 12px;
|
||||
font-family: 'Sono', sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.8) !important;
|
||||
color: #ffeb3b !important;
|
||||
border: 2px solid yellow !important;
|
||||
border-radius: 5px;
|
||||
z-index: 1000;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
opacity: 0;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
#bgm-title.visible {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* noscript fallback */
|
||||
.noscript #bgm-title {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user