DingusCorp/doofonline
Private
Public Access
1
0
Issues Pull Requests 1 Projects Releases 1 Activity

WIP: The MuSiCaL Update #1

Draft
unfunny wants to merge 27 commits from music into master
pull from: music
merge into: DingusCorp:master
Conversation 0 Commits 27 Files Changed 50 +90 -157
10 changed files with 90 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3e2bf36626 - Show all commits

9
BGMHUD.css
View File

@@ -1,4 +1,4 @@
/* BGM Title Box Styles */
/* BGM Title Box - Desktop Styles */
#bgm-title {
position: fixed !important;
top: 10px !important;
@@ -13,7 +13,7 @@
font-size: 12px !important;
font-weight: bold !important;
text-shadow: 1px 1px 2px black !important;
opacity: 0;
opacity: 0 !important;
display: block !important;
visibility: visible !important;
box-shadow: 0 0 10px rgba(255, 235, 59, 0.3) !important;
@@ -25,13 +25,16 @@
/* Mobile: centered at top */
@media (max-width: 600px) {
#bgm-title {
position: fixed !important;
top: 0 !important;
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;
text-align: center !important;
box-sizing: border-box !important;
}
body {
padding-top: 40px !important;

4
Games/index.html
View File

@@ -17,7 +17,9 @@
</head>
<body>
<!-- song title display in top-right corner -->
<div id="bgm-title"></div>
<div id="bgm-title">
<span id="bgm-title-content"></span>
</div>
<!-- BGM.js loads and will add .visible class when text is set -->
<script src="/Music/bgm.js"></script>

8
Games/nicosnb.html
View File

@@ -15,9 +15,11 @@
<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"></div>
<body>
<!-- song title display in top-right corner -->
<div id="bgm-title">
<span id="bgm-title-content"></span>
</div>
<!-- BGM.js loads and will add .visible class when text is set -->
<script src="/Music/bgm.js"></script>

8
Games/phightingold.html
View File

@@ -15,9 +15,11 @@
<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"></div>
<body>
<!-- song title display in top-right corner -->
<div id="bgm-title">
<span id="bgm-title-content"></span>
</div>
<!-- BGM.js loads and will add .visible class when text is set -->
<script src="/Music/bgm.js"></script>

8
Games/phigting.html
View File

@@ -15,9 +15,11 @@
<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"></div>
<body>
<!-- song title display in top-right corner -->
<div id="bgm-title">
<span id="bgm-title-content"></span>
</div>
<!-- BGM.js loads and will add .visible class when text is set -->
<script src="/Music/bgm.js"></script>

138
Music/bgm.js
View File

@@ -1,102 +1,86 @@
//Based off of the one found at the one found at not_found.html but randomizes the songs
//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;
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);
});
let autoplaySupported = false;
let retryCount = 0;
function SongRNG() {
//this is actually code from minima and its absolutely NOT made for this BUT WHO CARES????
//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));
// Display song title on page (stored in hidden element styled by theme)
// Display song title on page
try {
let titleEl = document.getElementById('bgm-title') || document.querySelector('[data-song-title]')
if (titleEl) {
titleEl.textContent = titles[randint] + " - " + games[randint]
titleEl.classList.add('visible')
}
contentEl.textContent = titles[randint] + " - " + games[randint]
} catch(e) {
console.warn("BGM title display unavailable (element may not exist on this page)")
// title element doesn't exist on this page
}
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();
let ctx = new window.AudioContext();
if (ctx.state === 'suspended') {
ctx.resume();
}
ctx.close();
} else if (window.webkitAudioContext) {
testCtx = new window.webkitAudioContext();
}
if (testCtx) {
if (testCtx.state === 'suspended') {
testCtx.close();
return false;
let ctx = new window.webkitAudioContext();
if (ctx.state === 'suspended') {
ctx.resume();
}
testCtx.close();
ctx.close();
}
} catch(e) {}
return true;
return true;
} catch(e) {
return false;
}
}
//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);
setTimeout(function(){
checkAudio()
}, 5000);
function checkAudio() {
try {
let apbox = document.getElementById("autoplay");
if (!apbox) {
return;
}
function handlePlayingEvent(event) {
if (event.status === 'playing' || event.time !== undefined) {
// Music is actively playing
try {
let apbox = document.getElementById("autoplay");
if (apbox) {
apbox.innerHTML = '<div style="color: green;">✅ Music is playing!</div>';
apbox.style.display = 'none';
}
} catch(e) {}
} else {
// Check if we can play
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 {
consecutivefails++;
if (consecutivefails >= 2) {
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);
retryCount++;
if (retryCount >= 2) {
try {
let apbox = document.getElementById("autoplay");
if (apbox) {
apbox.innerHTML = '<div style="color: orange;">⚠️ Autoplay blocked by browser. Click to play.</div><button onclick="MIDIjs.play(song, true)">Play Music</button>';
}
} catch(e) {}
} else {
setTimeout(checkAudio, 5000);
}
}
} catch(e) {}
}
}
// Schedule next song change
setTimeout(function() {
SongRNG();
MIDIjs.play(song, true);
}, 30000);
}
SongRNG();
let isPlaying = false;
autoplaySupported = checkAudioContext();
MIDIjs.play(song, true);
MIDIjs.player_callback = function(event) {
handlePlayingEvent(event);
};

5
index.html
View File

@@ -23,7 +23,10 @@
</head>
<body>
<!-- song title display in top-right corner -->
<div id="bgm-title"></div>
<div id="bgm-title">
<span id="bgm-title-content"></span>
</div>
<!-- BGM.js loads and will add .visible class when text is set -->
<script src="/Music/bgm.js"></script>

40
normalbordem.css
View File

@@ -181,43 +181,3 @@ 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;
}
/* 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;
}
}

2
test-bgm.html
View File

@@ -33,8 +33,6 @@
<span id="bgm-title-content"></span>
</div>
<div class="autoplay-warning" id="autoplay"></div>
<!-- BGM.js loads after MIDI.js and will add .visible class when text is set -->
<script src="/Music/bgm.js"></script>

25
test-debug.html
View File

@@ -19,29 +19,8 @@
.error { color: #f00; }
.success { color: #0f0; }
h1 { color: #ff0; }
/* CRITICAL: Add inline styles for #bgm-title to test */
#bgm-title {
position: fixed !important;
top: 10px !important;
right: 10px !important;
padding: 15px 20px !important;
background-color: #000 !important;
color: #ffeb3b !important;
border: 3px solid yellow !important;
border-radius: 8px !important;
font-family: Arial, sans-serif !important;
font-size: 16px !important;
z-index: 9999 !important;
font-weight: bold !important;
text-shadow: 2px 2px 4px black !important;
box-shadow: 0 0 10px rgba(255, 235, 59, 0.5) !important;
/* Force visibility with !important */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
</style>
<link href="/BGMHUD.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>🎵 BGM.js Debug Test</h1>
@@ -64,8 +43,6 @@
<!-- Song title display element -->
<div id="bgm-title">Loading...</div>
<div class="autoplay-warning" id="autoplay"></div>
<!-- Load MIDI.js first -->
<script>
debugOutput('Loading MIDI.js...');