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

onPlay Function

Browse source
This commit is contained in:
mikka 2026-04-23 16:29:49 +02:00
parent 9c96294e02
commit 5c2d166ff4
1 changed files with 26 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

40
static/script.js
View file

@ -1,22 +1,32 @@
//Ich möchte dafur sorgen das wenn der knopf auf der karte gedrückt wird diese gespielt wird
const audios = document.querySelectorAll("audio")
const articles = document.querySelectorAll("article")
const signs = document.querySelectorAll(".sing")
outindex = 0
playing = false
playcolor = "#00ff3c"
loop = true
function onplay(id){
id = parseInt(id)
if(id>0){
articles[id-1].style.filter = "grayscale("+(id+1)*50+"%)"
articles[id-1].style.boxShadow = "0 0 0px 0px "+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()
console.log(id)
id = parseInt(id) + 1
console.log(id)
audios[id].play()
}
function vorherige(id){
audios[id].pause()
audios[id-1].play()
}
function looptrue(){
if(loop){
loop = false
@ -28,22 +38,26 @@ function looptrue(){
document.querySelector("#loop").innerHTML = "Loop"
}
}
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{
//ON PLAY
audios[id].play()
playing = true
articles[id].style.margin = "8px"
articles[id].style.boxShadow = "0 0 6px 3px "+playcolor
onplay(id)
}
}
function abspielen(){
if(playing){
//ON PAUSE
audios[outindex].pause()
playing = false
articles[outindex].style.margin = "0px"
@ -51,26 +65,23 @@ function abspielen(){
document.querySelector("#play").innerHTML = "Abspielen"
}
else{
//ON PLAY
audios[outindex].play()
playing = true
articles[outindex].style.margin = "8px"
articles[outindex].style.boxShadow = "0 0 6px 3px "+playcolor
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()
// Visueles
articles[index].style.filter = "grayscale("+(index+1)*50+"%)"
articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
articles[outindex].style.filter = "grayscale(0%)"
articles[outindex].style.margin = "8px"
articles[outindex].style.boxShadow = "0 0 6px 1px "+playcolor
onplay(index)
}
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"
@ -81,4 +92,3 @@ for (const [index,audio] of audios.entries()){
}
})
}
console.log(audios)