amogus
This commit is contained in:
commit
7bd7969828
BIN
amogus.jpg
Normal file
BIN
amogus.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 34 KiB |
BIN
amogus.mp3
Normal file
BIN
amogus.mp3
Normal file
Binary file not shown.
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 8 KiB |
112
index.css
Normal file
112
index.css
Normal file
|
@ -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);
|
||||
}*/
|
31
index.html
Normal file
31
index.html
Normal file
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>the</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="index.js"></script>
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="bg"></div>
|
||||
<div class="cocainer">
|
||||
<div class="main">
|
||||
<div id="wrapper">
|
||||
<div id="tracks"></div>
|
||||
<button onclick="start()" id="butoon" style="display: none;">Start</button>
|
||||
<div class="text" id="errore" style="display: none;">Invalid track</div>
|
||||
</div>
|
||||
<br/>
|
||||
</div>
|
||||
<div class="progress main-progress fixed">
|
||||
<div id="progress" class="inner"></div>
|
||||
<div id="time" class="text"></div>
|
||||
</div>
|
||||
<div class="progress fixed" style="height: 8px;">
|
||||
<div id="beat" class="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
151
index.js
Normal file
151
index.js
Normal file
|
@ -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);
|
||||
}
|
BIN
linuth.png
Normal file
BIN
linuth.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3 MiB |
BIN
overkill.mp3
Normal file
BIN
overkill.mp3
Normal file
Binary file not shown.
BIN
overkill.png
Normal file
BIN
overkill.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 MiB |
BIN
supernova.mp3
Normal file
BIN
supernova.mp3
Normal file
Binary file not shown.
Loading…
Reference in a new issue