Musik lauter machen in JS?
Hi Liebe Community,
Ich habe folgendes Problem:
Ich habe mit JavaScript und HTML einen Button gemacht, der Musik spielt. Jetzt würde ich es gerne so machen, das, wenn man auf zwei andere Button drückt, einer plus und minus, die Musik immer ein bisschen lauter und/oder ein bisschen leiser wird (halt so, das man mehrmals auf den Button drückt, damit es pro Click ein bisschen lauter/leiser wird , aber ich komme nicht weiter, könnt ihr mir helfen?
Danke im voraus, für die Hilfe
Quellcode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="playMusic()">starte Musik</button>
<button onclick="volumeeUp()">+</button>
<button onclick="volumeDown()">-</button>
</body>
<script>
const audio = new Audio();
audio.src = "musik.mp3"
audio.loop = true;
function playMusic() {
audio.play();
}
function volumeUp(){
audio.volume = +1;
}
function volumeDown(){
audio.volume = -1
}
</script>
</html>
1 Antwort
1) Der script-Tag gehört in den body oder in den head. Nie außerhalb.
2) Beim zweiten Button hast du einen Tippfehler. Deine Funktion heißt volumeUp.
3) Die Werteskala für die Lautstärke reicht von 0 bis 1. Das heißt, wenn du richtig regeln möchtest, solltest du mit Fließkommazahlen arbeiten, die innerhalb dieser Grenzen liegen.
Um den Ton lauter zu stellen, kannst du so vorgehen:
if (audio.volume <= 0.9) {
audio.volume += 0.1;
}
else {
audio.volume = 1;
}
Um die Lautstärke zu verringern, so:
if (audio.volume >= 0.1) {
audio.volume -= 0.1;
}
else {
audio.volume = 0;
}