# Audio

Native audio playback that can provide media to a Video.js player

## Import

Import `Audio` from the audio preset:

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

## Anatomy

```tsx
<Audio>
  <source />
</Audio>
```

## Use with a player

Place `Audio` anywhere inside an `AudioPlayer`, or inside another Video.js `Player` configured for audio. It becomes that player’s media provider automatically. Outside a player, `Audio` behaves as a standalone native `<audio>`.

## Native behavior

Video.js does not replace the native audio API. Use `src` for one URL or add child [`<source>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source) when the browser should choose between candidates. See [Media sources](https://videojs.org/docs/framework/react/guides/media-sources) when you need an HLS, Mux, Spotify, or other playback adapter.

`Audio` forwards native attributes, event handlers, and children to the underlying `<audio>`. Its `ref` resolves to the `HTMLAudioElement`.

See MDN for the complete [`<audio>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio), [`HTMLAudioElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement), and shared [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) APIs.

## Examples

### Basic Usage

This native audio element uses a child source and browser controls while providing media to the surrounding Video.js player.

**App.tsx**

```tsx
import { Container } from '@videojs/react';
import { Audio, AudioPlayer } from '@videojs/react/audio';

import './BasicUsage.css';

export default function BasicUsage() {
  return (
    <AudioPlayer>
      <Container className="react-audio-basic">
        <Audio className="react-audio-basic__media" controls preload="metadata">
          <source src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/audio.m4a" />
        </Audio>
      </Container>
    </AudioPlayer>
  );
}
```

**App.css**

```css
.react-audio-basic {
  display: grid;
  width: 100%;
  padding: 24px;
  background: #e5e7eb;
  border-radius: 8px;
  place-items: center;
}

.react-audio-basic__media {
  width: 100%;
}
```

---

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