Erik A Erik A - 2 months ago 6x
HTML Question

Are "muted" and "volume = 0.0" the same? Event Listener treats them differently

I'm very new to coding and I've come to a problem I'm not finding a solution to. I'm making a little media player that I plan to use with athletes I coach. My idea is to force them to listen to my comments on game film they watch. So the player pauses if it's volume is too low. I've made it so playback pauses when the volume is reduced to below 10%. However, when the mute button(in the default HTML5 media player) is pressed, playback does not pause.

So are muted and a volume of 0.0 not the same? When I bring the slider all the way down to zero(I can only do this without the alert, or else it gets stuck at 0.1 when the alert fires), the volume/mute button shows mute. But I'm sure that's because I have to pass the 0.1 threshold the event listener is looking for.

This is what my code looks like

video.addEventListener("volumechange", function() {
if (video.volume < 0.1) {
alert('Video Paused: Volume too low');

I plan to customize the controls of my player anyway, so I think I'll be able to make it work with onclick events pretty easily, but I felt this bit of confusion was worth figuring out in the meantime.

So are volume slider changes all that's included in the volumechange event? Or is there a way to make it so the muted state is recognized by the volumechange event listener? Or a way to make a separate one for muted?(which I know is not an event.) Or should I just table it until I make my custom controls?



The description for the volumechange event says:

Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).

Assuming this is accurate, your event handler will trigger on mute and unmute, so it should just be a matter of using the muted attribute in your if statement:

if (video.volume < 0.1 || video.muted) {
    // Pause.

The value of volume is independent of muted and does not change when you mute or unmute.