volumechange

16 March, 2023

Contributors

Milsaware

@milsaware

About

The volumechange event is triggered when the audio or video element's volume changes. This event is fired whenever the volume is adjusted, whether it's done programmatically or by the user using the volume controls on the media player.

The volumechange event can be useful in a variety of scenarios, such as when you want to update the UI to reflect the current volume level, or when you want to perform some action in response to changes in volume. For example, you might want to pause a video automatically if the volume is turned all the way down, or adjust the volume of background music based on user preferences.

To handle the volumechange event, you can use the addEventListener() method to register a callback function that will be executed when the event occurs. Inside the callback function, you can access the volume property of the media element to get the current volume level and perform any necessary actions based on that value.

Event listener

Here's an example of using the addEventListener() method to handle the volumechange event:

HTML

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>

JavaScript

const mediaElement = document.querySelector('audio'); // select the audio element
mediaElement.addEventListener('volumechange', handleVolumeChange);

function handleVolumeChange(event) {
    // get the current volume level and perform some action based on it
    const currentVolume = event.target.volume;
    console.log(`Current volume: ${currentVolume}`);

    // update the UI to reflect the current volume level
    const volumeSlider = document.querySelector('#volume-slider');
    volumeSlider.value = currentVolume;
}

Here, we are using the addEventListener() method to register a callback function called handleVolumeChange on the audio element. This function will be executed whenever the volumechange event occurs on the media element.

Inside the handleVolumeChange function, we are accessing the volume property of the media element to get the current volume level. We are then logging this value to the console and updating a volume slider UI element to reflect the current volume level.

Note that in order to use the addEventListener() method, we first need to select the media element that we want to attach the event listener to. In this example, we are using the querySelector() method to select the first audio element in the document.

This is just a simple example, but you can use the volumechange event to perform a wide range of actions in response to changes in volume, depending on the specific needs of your application.

Property

Here's an example of using the onvolumechange property to handle the volumechange event:

const mediaElement = document.querySelector('audio'); // select the audio element

mediaElement.onvolumechange = function(event) {
    // get the current volume level and perform some action based on it
    const currentVolume = event.target.volume;
    console.log(`Current volume: ${currentVolume}`);

    // update the UI to reflect the current volume level
    const volumeSlider = document.querySelector('#volume-slider');
    volumeSlider.value = currentVolume;
};

Here, we are using the onvolumechange property of the audio element to register an anonymous function that will be executed whenever the volumechange event occurs on the media element.

Inside the function, we are accessing the volume property of the media element to get the current volume level. We are then logging this value to the console and updating a volume slider UI element to reflect the current volume level.

Inline

Here's an example of using the onvolumechange inline attribute to handle the volumechange event in HTML:

HTML

<audio src="music.mp3" controls onvolumechange="handleVolumeChange(event)">
    Your browser does not support the audio element.
</audio>

JavaScript

function handleVolumeChange(event) {
    // get the current volume level and perform some action based on it
    const currentVolume = event.target.volume;
    console.log(`Current volume: ${currentVolume}`);

    // update the UI to reflect the current volume level
    const volumeSlider = document.querySelector('#volume-slider');
    volumeSlider.value = currentVolume;
}

Here, we are adding the onvolumechange inline attribute to an audio element, and setting its value to the name of a function called handleVolumeChange. This function will be executed whenever the volumechange event occurs on the media element.

Note that using inline event handlers like this can make your HTML code harder to read and maintain, especially if you have multiple event handlers that you need to attach to the same element. In general, it's better to use the addEventListener() method or the on[event] property to attach event listeners in JavaScript. However, using inline event handlers can be a quick and convenient way to add simple event handling to your HTML code.

Programmatic trigger

There is no volumechange() method that you can call to programmatically trigger the volumechange event. This event is fired automatically by the browser whenever the volume of a media element is changed by user interaction or by scripting.

However, you can simulate the volumechange event programmatically by using the dispatchEvent() method:

const mediaElement = document.querySelector('audio'); // select the audio element

// simulate a volume change to 50%
mediaElement.volume = 0.5;
mediaElement.dispatchEvent(new Event('volumechange'));

Here, we are first selecting an audio element using the querySelector() method. We are then setting the volume property of the media element to 0.5, which simulates a volume change to 50%.

Finally, we are using the dispatchEvent() method to manually trigger the volumechange event on the media element. We create a new Event object with the 'volumechange' event type, and pass it as an argument to the dispatchEvent() method.

Note that simulating events like this can be useful in some cases, but it's generally better to trigger events through user interaction or changes in the application state. If you need to perform some action in response to a simulated volumechange event, it might be better to call the relevant function directly instead of triggering the event programmatically.

javascript