Menu
I have one file HTML just to test play/pause and increase/decrease volume with event listeners in JavaScript. I can't exactly describe the anomaly i'm experiencing. I'm sure there is a logical explanation, but I can't wrap my head around it.
Basically, up and down arrow keys change the volume of the audio. But when I press the keys in some sort of a pattern like - up, up, down, down, up, down, up, down - the count does not follow any mathematical rules :D instead of increasing the volume, it gets decreased by specified value and vice versa.
I'm sure if you are answering this, you know how to, but to test it, just change the name of audio file inside src and drop the same file in the project. Then just load the HTML locally in the browser of your choice and debug it. The current volume will be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio API</title>
</head>
<body>
<audio>
<source src="njaar.mp3" type="audio/mpeg">
</audio>
<p id="currentVolume"></p>
<script>
var audio;
window.addEventListener('load', init, false);
window.addEventListener("click", playPause, false);
window.addEventListener("keydown", changeVolume, false);
function init() {
audio = document.getElementsByTagName('audio')[0];
audio.play();
}
function playPause() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
function changeVolume() {
document.getElementById("currentVolume").innerHTML = audio.volume;
// if (audio.volume === 1) {
// document.getElementById("currentVolume").innerHTML = audio.volume;
// }
if (event.key === "ArrowUp") {
try {
audio.volume = audio.volume + 0.05;
} catch (e) {
console.error("Exception: " + e + "has been caught!");
}
}
if (event.key === "ArrowDown") {
try {
audio.volume = audio.volume - 0.05;
} catch (e) {
console.error("Exception: " + e + "has been caught!");
}
}
if (audio.volume < 0.05) {
audio.volume = 0;
}
}
</script>
</body>
</html>
268
asked May 15 '26 02:05
I think it's about the position of
document.getElementById("currentVolume").innerHTML = audio.volume;
You call it at the beginning of the function. That way you show the last update and not the current one.
Put it to the end of the function.
Tips:
event as a parameter+= and -=
160
answered May 18 '26 23:05
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With