WIP: The MuSiCaL Update #1
42
BGMHUD.css
Normal file
42
BGMHUD.css
Normal file
@@ -0,0 +1,42 @@
|
||||
/* BGM Title Box Styles */
|
||||
#bgm-title {
|
||||
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-family: 'Sono', Arial, sans-serif !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: bold !important;
|
||||
text-shadow: 1px 1px 2px black !important;
|
||||
opacity: 0;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
box-shadow: 0 0 10px rgba(255, 235, 59, 0.3) !important;
|
||||
}
|
||||
#bgm-title.visible {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Mobile: centered at top */
|
||||
@media (max-width: 600px) {
|
||||
#bgm-title {
|
||||
left: 50% !important;
|
||||
right: auto !important;
|
||||
transform: translateX(-50%) !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
border-radius: 0 0 5px 5px !important;
|
||||
}
|
||||
body {
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
#nl, img[src*="webneko"] {
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
}
|
||||
@@ -13,10 +13,11 @@
|
||||
<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">
|
||||
<link href="/BGMHUD.css" rel="stylesheet" type="text/css">
|
||||
</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>
|
||||
<div id="bgm-title"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
@@ -13,10 +13,11 @@
|
||||
<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>
|
||||
<link href="/BGMHUD.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- song title display in top-right corner -->
|
||||
<div id="bgm-title"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
@@ -13,10 +13,11 @@
|
||||
<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>
|
||||
<link href="/BGMHUD.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- song title display in top-right corner -->
|
||||
<div id="bgm-title"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
@@ -13,10 +13,11 @@
|
||||
<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>
|
||||
<link href="/BGMHUD.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- song title display in top-right corner -->
|
||||
<div id="bgm-title"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
101
Music/bgm.js
101
Music/bgm.js
@@ -1,13 +1,20 @@
|
||||
//Based off of the one found at not_found.html but randomizes the songs
|
||||
//Based off of the one found at 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;
|
||||
let isplaying = "unknown";
|
||||
let audioLoadFailed = false;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('error', function(e) {
|
||||
if (e.target && e.target.src && e.target.src.includes('/Music/bgm/')) {
|
||||
audioLoadFailed = true;
|
||||
}
|
||||
}, true);
|
||||
});
|
||||
|
||||
function SongRNG() {
|
||||
//this is actually code from minima and its absolutely NOT made for this BUT WHO CARES????
|
||||
//some refactoring done by Gemini
|
||||
//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"]
|
||||
@@ -15,8 +22,6 @@ function SongRNG() {
|
||||
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)
|
||||
// Display song title on page (stored in hidden element styled by theme)
|
||||
try {
|
||||
let titleEl = document.getElementById('bgm-title') || document.querySelector('[data-song-title]')
|
||||
@@ -29,45 +34,69 @@ function SongRNG() {
|
||||
}
|
||||
song = "/Music/bgm/" + lines[randint]
|
||||
}
|
||||
|
||||
function checkAudioContext() {
|
||||
try {
|
||||
const status = MIDIjs.get_audio_status();
|
||||
|
||||
if (audioLoadFailed) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let testCtx = null;
|
||||
|
||||
if (window.AudioContext) {
|
||||
testCtx = new window.AudioContext();
|
||||
} else if (window.webkitAudioContext) {
|
||||
testCtx = new window.webkitAudioContext();
|
||||
}
|
||||
|
||||
if (testCtx) {
|
||||
if (testCtx.state === 'suspended') {
|
||||
testCtx.close();
|
||||
return false;
|
||||
}
|
||||
testCtx.close();
|
||||
}
|
||||
} catch(e) {}
|
||||
return true;
|
||||
}
|
||||
//ok, now we actually do stuff
|
||||
SongRNG()
|
||||
//set callback BEFORE playing
|
||||
MIDIjs.player_callback = function(event) {
|
||||
// MIDIjs calls this with events during playback
|
||||
if (event && (event.status === 'playing' || event.time !== undefined)) {
|
||||
isplaying = "true";
|
||||
}
|
||||
};
|
||||
//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(){
|
||||
setTimeout(function(){
|
||||
checkAudio()
|
||||
}, 5000)
|
||||
}, 5000);
|
||||
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")
|
||||
let apbox = document.getElementById("autoplay");
|
||||
if (!apbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!checkAudioContext()) {
|
||||
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); this.parentElement.style.display=\'none\';">Play Music</button>'
|
||||
} else if (isplaying == "false") {
|
||||
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); this.parentElement.style.display=\'none\';">Play Music</button>'
|
||||
} else if (isplaying == "true" || isplaying === true){
|
||||
// music is playing, do nothing
|
||||
} 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) }
|
||||
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); this.parentElement.style.display=\'none\';">Play Music</button>'
|
||||
} else {
|
||||
setTimeout(function(){
|
||||
checkAudio()
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
} catch(e) {
|
||||
console.warn("BGM autoplay UI unavailable (element may not exist on this page)")
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
@@ -19,10 +19,11 @@
|
||||
<script type='text/javascript' src='//www.midijs.net/lib/midi.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">
|
||||
<link href="/BGMHUD.css" rel="stylesheet" type="text/css">
|
||||
</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>
|
||||
<div id="bgm-title"></div>
|
||||
|
||||
<!-- BGM.js loads and will add .visible class when text is set -->
|
||||
<script src="/Music/bgm.js"></script>
|
||||
|
||||
@@ -208,3 +208,16 @@ img {
|
||||
.noscript #bgm-title {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Mobile: centered at top - overrides inline styles */
|
||||
@media (max-width: 600px) {
|
||||
body #bgm-title {
|
||||
left: 50% !important;
|
||||
right: auto !important;
|
||||
transform: translateX(-50%) !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
border-radius: 0 0 5px 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user