mikka/Esc-Playlists
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Logo und andere kleinen Dinge

Browse source
This commit is contained in:
mikka 2026-05-14 23:29:06 +02:00
parent 587f2546f9
commit 2623dfdf1a
9 changed files with 422 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

152
static/script.js
View file

@ -1,102 +1,98 @@
const audios = document.querySelectorAll("audio")
const articles = document.querySelectorAll("article")
const kartenContainer = document.getElementById("flex-container")
outindex = 0
playing = false
playcolor = "#00ff3c"
loop = true
const audios = document.querySelectorAll("audio");
const articles = document.querySelectorAll("article");
const kartenContainer = document.getElementById("flex-container");
outindex = 0;
playing = false;
playcolor = "#00ff3c";
loop = true;
function onplay(id){
//What is id
id = parseInt(id)
if(id>0){
articles[id-1].style.filter = "grayscale("+(id+1)*20+"%)"
articles[id-1].style.boxShadow = "0 0 0px 0px "+playcolor
function onplay(id) {
id = parseInt(id);
if (id > 0) {
articles[id - 1].style.filter = "grayscale(" + (id + 1) * 20 + "%)";
articles[id - 1].style.boxShadow = "0 0 0px 0px " + playcolor;
}
if(articles[id].offsetWidth * id == window.innerWidth/2){
console.log(articles[id].offsetWidth)
kartenContainer.scrollWidth += articles[id].offsetWidth
if (articles[id].offsetWidth * id == window.innerWidth / 2) {
console.log(articles[id].offsetWidth);
kartenContainer.scrollWidth += articles[id].offsetWidth;
}
articles[id].style.filter = "grayscale(0%)"
articles[id].style.margin = "8px"
articles[id].style.boxShadow = "0 0 6px 1px "+playcolor
articles[id].style.filter = "grayscale(0%)";
articles[id].style.margin = "8px";
articles[id].style.boxShadow = "0 0 6px 1px " + playcolor;
}
function nächste(id){
audios[id].pause()
id = parseInt(id) + 1
audios[id].play()
onplay(id)
function nächste(id) {
audios[id].pause();
id = parseInt(id) + 1;
audios[id].play();
onplay(id);
}
function vorherige(id){
audios[id].pause()
audios[id-1].play()
onplay(id-1)
function vorherige(id) {
audios[id].pause();
audios[id - 1].play();
onplay(id - 1);
}
function looptrue(){
if(loop){
loop = false
document.querySelector("#loop").innerHTML = "Kein Loop"
document.querySelector("#loop").style.beckground
}
else{
loop = true
document.querySelector("#loop").innerHTML = "Loop"
function looptrue() {
if (loop) {
loop = false;
document.querySelector("#loop").innerHTML = "Kein Loop";
document.querySelector("#loop").style.beckground;
} else {
loop = true;
document.querySelector("#loop").innerHTML = "Loop";
}
}
function abspielendiese(id){
if(playing){
function abspielendiese(id) {
if (playing) {
//ON PAUSE
audios[id].pause()
playing = false
articles[id].style.margin = "0px"
articles[id].style.boxShadow = "0 0 0px 0px "+playcolor
}
else{
audios[id].pause();
playing = false;
articles[id].style.margin = "0px";
articles[id].style.boxShadow = "0 0 0px 0px " + playcolor;
} else {
//ON PLAY
audios[id].play()
playing = true
onplay(id)
audios[id].play();
playing = true;
onplay(id);
}
}
function abspielen(){
if(playing){
function abspielen() {
if (playing) {
//ON PAUSE
audios[outindex].pause()
playing = false
articles[outindex].style.margin = "0px"
articles[outindex].style.boxShadow = "0 0 0px 0px "+playcolor
document.querySelector("#play").innerHTML = "Abspielen"
}
else{
audios[outindex].pause();
playing = false;
articles[outindex].style.margin = "0px";
articles[outindex].style.boxShadow = "0 0 0px 0px " + playcolor;
document.querySelector("#play").innerHTML = "Abspielen";
} else {
//ON PLAY
audios[outindex].play()
playing = true
document.querySelector("#play").innerHTML = "Pausieren"
onplay(outindex)
audios[outindex].play();
playing = true;
document.querySelector("#play").innerHTML = "Pausieren";
onplay(outindex);
}
}
for (const [index,audio] of audios.entries()){
audio.addEventListener("ended", (event) => {
if (index != audios.length -1){
outindex = index +1
audios[outindex].play()
onplay(index+1)
}
else{
//Last song ON END
articles[index].style.filter = "grayscale(80%)"
articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
articles[index].style.margin = "8px"
articles[index].style.boxShadow = "0 0 6px 1px "+playcolor
if(loop){
audios[0].play()
for (const [index, audio] of audios.entries()) {
audio.addEventListener("ended", (event) => {
if (index != audios.length - 1) {
outindex = index + 1;
audios[outindex].play();
onplay(index + 1);
} else {
//Last song ON END
articles[index].style.filter = "grayscale(80%)";
articles[index].style.boxShadow = "0 0 0px 0px " + playcolor;
articles[index].style.margin = "8px";
articles[index].style.boxShadow = "0 0 6px 1px " + playcolor;
if (loop) {
audios[0].play();
}
}
}
})
});
}
//Audio visualising