the

commit 7bd7969828e93b6702643593235c02e380b97592 Author: janderedev Date: Tue Dec 28 00:34:55 2021 +0100 amogus diff --git a/amogus.jpg b/amogus.jpg new file mode 100644 index 0000000..2c50b81 Binary files /dev/null and b/amogus.jpg differ diff --git a/amogus.mp3 b/amogus.mp3 new file mode 100644 index 0000000..cf21d6d Binary files /dev/null and b/amogus.mp3 differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..1329e84 Binary files /dev/null and b/favicon.ico differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..9bf2dc2 --- /dev/null +++ b/index.css @@ -0,0 +1,112 @@ +@keyframes beat { + 0% { + width: 100%; + } + 100% { + width: 0%; + } +} + +* { + box-sizing: border-box; + font-family: 'Courier New', Courier, monospace; +} + +body { + margin: 0; + overflow: hidden; + min-height: 100vh; + background-color: #111111; +} + +#bg { + content: ""; + position: absolute; + width: 100%; + height: 100%; + z-index: -1; + background-size: cover; + background-repeat: no-repeat; +} + +#tracks { + display: flex; + justify-content: space-evenly; + color: #ffffff; +} + +#tracks a:link { + color: #aaaaaa; +} + +#tracks a:visited { + color: #aaaaaa; +} + +#tracks a:hover { + color: #ffffff; +} + +#tracks a:active { + color: #888888; +} + +.cocainer { + display: flex; + flex-direction: column; + height: 100vh; +} + +.main { + padding: 8px; + height: 100%; + flex: auto; + overflow: auto; +} + +.text { + color: #FFFFFF; +} + +.fixed { + flex: none; +} + +.progress { + width: 100%; + height: 24px; + background-color: #555555; + +} + +.progress .inner { + height: 100%; + color: #ffffff; + background-color: #b82c2c; +} + +.progress.main-progress { + position: relative; +} + +.progress.main-progress .inner { + position: absolute; +} + +#time { + width: 100%; + height: 100%; + text-align: right; + position: absolute; + padding: 0 8px; + line-height: 24px; + font-size: 16px; +} + +#beat { + margin: 0 auto; +} + +/*.beat-anim { + animation: beat 0.5s cubic-bezier(.6,.26,1,.12); +}*/ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2cb4cbe --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + the + + + + + +

+ + +

+
+

+ + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..baf5da5 --- /dev/null +++ b/index.js @@ -0,0 +1,151 @@ +const trackInfo = { + "supernova": { + bpm: 128, + offset: 0.6, + length: 326.92, + sig: 4, + url: "./supernova.mp3", + bg: "./linuth.png", + }, + "amogus": { + bpm: 160, + offset: 0.412, + length: 125, + sig: 4, + url: "./amogus.mp3", + bg: "./amogus.jpg", + }, + "overkill": { + bpm: 174, + offset: 4.9, + length: 342, + sig: 4, + url: "./overkill.mp3", + bg: "./overkill.png", + }, +} + +let playing = false; + +let trackData; + +function loadParams(_trackName) { + let errore = document.getElementById("errore"); + document.getElementById("butoon").style.display = "none"; + errore.style.display = "none"; + + let trackName = "supernova"; + if (_trackName) trackName = _trackName.substring(1); + if (trackInfo[trackName] === undefined) { + errore.innerText = `Invalid track ${trackName}`; + errore.style.display = "initial"; + document.getElementById("bg").style.backgroundImage = ``; + return; + } + + trackData = trackInfo[trackName]; + trackData.beatInterval = 60 / trackData.bpm; + + document.getElementById("bg").style.backgroundImage = `url("${trackInfo[trackName].bg}")`; + document.getElementById("butoon").style.display = "initial"; +} + +let lastBeatVal = 0; + +const ctx = new AudioContext(); +let startTime = 0; + +function toTimestamp(_time) { + let time = Math.round(_time); + let hours = Math.floor(time / 3600); + let minutes = Math.floor((time / 60) % 60); + let seconds = Math.floor(time % 60); + + let out = ""; + if (hours !== 0) { + out += `${hours}:`; + if (minutes < 10) out += "0"; + } + + out += `${minutes}:`; + if (seconds < 10) out += "0"; + out += seconds; + return out; +} + +function start() { + document.getElementById("wrapper").remove(); + playing = true; + + ctx.resume().then(() => { + const source = ctx.createBufferSource(); + + let request = new XMLHttpRequest(); + request.open('GET', trackData.url, true); + request.responseType = 'arraybuffer'; + + request.onload = function() { + ctx.decodeAudioData(request.response, function(buf) { + source.buffer = buf; + source.connect(ctx.destination); + source.start(ctx.currentTime); + startTime = ctx.currentTime; + + requestAnimationFrame(onAnimationFrame); + }); + } + + request.send(); + }); +} + +function onAnimationFrame() { + let time = (ctx.currentTime - startTime) - (ctx.outputLatency || ctx.baseLatency); + if (time < trackData.length && time > 0) { + //console.log("Base latency", ctx.baseLatency, "Output latency", ctx.outputLatency); + document.getElementById("time").innerText = `${toTimestamp(time)} / ${toTimestamp(trackData.length)}`; + document.getElementById("progress").style.width = (time / trackData.length) * 100 + "%"; + console.log("yeet 2"); + + if (time > trackData.offset) { + let beats = (time - trackData.offset) / trackData.beatInterval; + let beatsF = Math.floor(beats); + let beatProgress = beats % 1; + + if (beatProgress < lastBeatVal) { + console.log('AMOGUS', beatsF); + } + + lastBeatVal = beatProgress; + + let beat = document.getElementById("beat"); + beat.style.width = `${(1 - beatProgress) * 100}%`; + + let bg = document.getElementById("bg"); + let startingScale = beatsF % trackData.sig === 0 ? 1.25 : 1.10; + let scale = startingScale * (1 - (beatProgress * 0.25)); + if (scale < 1) scale = 1; + bg.style.transform = `scale(${scale})`; + } + } + + requestAnimationFrame(onAnimationFrame); +} + +window.onload = function() { + let tracks = document.getElementById("tracks"); + + for (const track in trackInfo) { + let a = document.createElement("a"); + a.href = "#" + track; + a.innerText = track; + tracks.appendChild(a); + } + + loadParams(window.location.hash); +} + +window.onhashchange = function() { + if (playing === true) window.location.reload(); + loadParams(window.location.hash); +} diff --git a/linuth.png b/linuth.png new file mode 100644 index 0000000..184e1a9 Binary files /dev/null and b/linuth.png differ diff --git a/overkill.mp3 b/overkill.mp3 new file mode 100644 index 0000000..366abdc Binary files /dev/null and b/overkill.mp3 differ diff --git a/overkill.png b/overkill.png new file mode 100644 index 0000000..717eba2 Binary files /dev/null and b/overkill.png differ diff --git a/supernova.mp3 b/supernova.mp3 new file mode 100644 index 0000000..c7a3ddd Binary files /dev/null and b/supernova.mp3 differ