Lea/sussy-audio-player
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

amogus

Browse source
This commit is contained in:
janderedev 2021-12-28 00:34:55 +01:00
commit 7bd7969828
Signed by: Lea
GPG key ID: 5D5E18ACB990F57A
10 changed files with 294 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
amogus.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
amogus.mp3 Normal file
View file

Binary file not shown.

BIN
favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

112
index.css Normal file
View 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
View 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
View 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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

BIN
overkill.mp3 Normal file
View file

Binary file not shown.

BIN
overkill.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
supernova.mp3 Normal file
View file

Binary file not shown.