YouTip

## HTML Audio/Video DOM volume Property The `volume` property sets or returns the current playback volume of an audio or video element. --- ## Definition and Usage The `volume` property is a standard property of the HTML5 Audio/Video DOM. It allows developers to programmatically control or retrieve the audio level of a media element. --- ## Browser Support The `volume` property is widely supported across all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support HTML5 media elements or the `volume` property.* --- ## Syntax ### Get the current volume: ```javascript let currentVolume = mediaElement.volume; ``` ### Set the volume: ```javascript mediaElement.volume = volumeValue; ``` ### Property Values | Value | Description | | :--- | :--- | | `volumeValue` | A `double` value representing the current volume of the audio/video. Must be a number between **0.0** and **1.0** (inclusive).

**Example values:**
• `1.0` - Highest volume (Default)
• `0.5` - Half volume (50%)
• `0.0` - Muted | ### Technical Details | Feature | Description | | :--- | :--- | | **Return Value** | A number representing the current volume level (from `0.0` to `1.0`). | | **Default Value** | `1.0` | | **Exceptions** | Throws an `IndexSizeError` DOMException if the assigned value is less than `0.0` or greater than `1.0`. | --- ## Code Examples ### Example 1: Setting Video Volume to 20% This example demonstrates how to select a video element and set its volume to 20% (0.2). ```javascript // Get the video element by its ID const myVid = document.getElementById("video1"); // Set the volume to 20% myVid.volume = 0.2; ``` ### Example 2: Creating a Custom Volume Slider You can bind the `volume` property to an HTML `` element to create a custom volume control slider. ```html
Volume: ``` --- ## Important Considerations 1. **Range Constraints**: Always ensure that the value assigned to `volume` is strictly between `0.0` and `1.0`. Assigning a value outside this range (e.g., `-0.1` or `1.5`) will throw a JavaScript runtime error: `Uncaught DOMException: Failed to set the 'volume' property on 'HTMLMediaElement': The volume provided is outside the range [0, 1].` 2. **Muted State vs. Volume**: Setting `volume = 0.0` will make the media silent, but it does not change the boolean state of the `muted` property. For a proper user interface, use the `muted` property to toggle mute/unmute, and use `volume` to control the actual sound level. 3. **Mobile Browser Limitations**: On some mobile operating systems (such as iOS Safari), the `volume` property is read-only because the physical volume buttons on the device are designed to control the audio level directly. Programmatic changes to the `volume` property may be ignored on these platforms.