CODEWITHSUNDEEP
javascripthtml
RubyRube
RubyRube

Reputation: 602

Change player volume value in JS/HTML5 Player, but volume stays the same

I want to lower the default volume on an HTML player.

I can alter the values here: 

`setAttributes(volumeSlider, { "type": "range", "min": "0", "max": "1",      "step": "any", "value": "1", "orient": "vertical", "id": "volumeSlider" });`

http://codepen.io/Teeke/pen/MJPoOr

Changing value: 1 to 0.1 will make the volume slider lower to 10 per cent, but the playback track volume stays the same.

I've also tried muting and altering values on these two functions, with no effect:

function volumizer() {
    if (audioTrack.volume == 0) { setText(muteButton,"volume"); }
    else { setText(muteButton,"volumehigh"); }
}

function muter() {
    if (audioTrack.volume == 0) {
        audioTrack.volume = restoreValue;
        volumeSlider.value = restoreValue;
} else {
    audioTrack.volume = 0;
    restoreValue = volumeSlider.value;
    volumeSlider.value = 0;
    }
}

What value do I need to change to lower the track volume programmatically?

Upvotes: 1

Views: 582

Answers (1)

RC NL
RC NL

Reputation: 88

What am I missing here... Your example works fine.

When I change the slider, the volume of the track changes both visually, in the console and as audio on this machine.

If it does not for you it might be a browser issue. I use Chrome Version 56.0.2924.87.

To see values in the console, press the console button on the lower left and use the console.log function:

volumeSlider.addEventListener("input", function(){ 
  console.log(['beforeVolChng', volumeSlider.value, audioTrack.volume]);
  audioTrack.volume = volumeSlider.value; 
  console.log(['afterVolChng', volumeSlider.value, audioTrack.volume]);
}, false);

Console.log can take anything: primitive types (int, float, char), objects and arrays etc.

So if your issue is: you want the playback volume on your slider to be applied when you start playing. Let me see.

Here this would be a good solution:

audioTrack.addEventListener('playing', 
   function(){ 
      playhead.max = audioTrack.duration; 
      audioTrack.volume = volumeSlider.value; 
   }, false);

Upvotes: 2

Related Questions