# Volume

Volume level and mute state for the player store

Controls volume level and mute state. These capabilities have independent availability values because media can support mute without supporting volume-level changes.

## Import

```tsx
import { volumeFeature } from '@videojs/react';
```

The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](https://videojs.org/docs/framework/react/guides/presets) include this feature.

## API Reference

### State

| Property | Type | Description |
| --- | --- | --- |
| `volume` | `number` | Volume level from 0 (silent) to 1 (max). |
| `muted` | `boolean` | Whether audio is muted. |
| `volumeAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether volume can be programmatically set on this platform. |
| `mutedAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether the media can be muted. Separate from `volumeAvailability` because the two come apart: an embed can take a mute command while offering no way to set a level, and iOS Safari refuses a volume write on media that mutes perfectly well. |

### Actions

| Action | Type | Description |
| --- | --- | --- |
| `setVolume` | `(volume: number) => number` | Set volume (clamped 0-1). Returns the clamped value. |
| `toggleMuted` | `() => boolean` | Toggle mute state. Returns the new muted value. |

### Selector

Pass `selectVolume` to [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) to subscribe to volume state. Returns `undefined` if the volume feature is not configured.

Check `volumeAvailability` before showing a volume-level control, and check `mutedAvailability` before showing a mute control.

**VolumeSlider.tsx**

```tsx
import { selectVolume, usePlayer } from '@videojs/react';

function VolumeSlider() {
  const vol = usePlayer(selectVolume);
  if (!vol || vol.volumeAvailability !== 'available') return null;

  return (
    <input
      type="range"
      min={0}
      max={1}
      step={0.01}
      value={vol.volume}
      onChange={(e) => vol.setVolume(Number(e.target.value))}
    />
  );
}
```

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt