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