user273032 user273032 - 1 year ago 41
HTML Question

Lowering the volume of a html audio in javascript

I want to reduce the volume of an

when the user clicks on an image.


<div id="cloud">
<img name="jsVolumeButton" src="images/cloud.png" width = "140px"/> </div>
<audio id="player" src="sounds/rain.MP3" autoplay loop></audio>


var myimgobj = document.images.jsVolumeButton.onclick();
var mysoundobj = document.sounds.player;
function onclick() {
if(document.getElementById('player').volume === 0){
document.getElementById('player').volume = 1;
document.getElementById('player').volume -= 0.1;
return true;

As you can see, my knowledge of HTML/JS is very limited. I only did C++ so far, and just did some learning by doing, but I'm hitting a wall where I need to ask.

I want to click on the image and lower the volume by 0.1. If it reaches 0, I want it to play at full volume again. I think this should be possible.

Answer Source

Ok i got it: html:

<img name="jsVolumeButton"  src="images/cloud.png" width = "140px" onClick="onClickImage()"/> </div>


function onClickImage() {
  document.getElementById('player').volume -= 0.2; 
    if(document.getElementById('player').volume <= 0.1){
     document.getElementById('player').volume += 1;
    return true;