# audio

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

## Import

The media element is the browser’s native `<audio>`. Import the audio player registration when it should provide media to Video.js:

```ts
import '@videojs/html/audio/player';
```

## Anatomy

```html
<audio>
  <source />
</audio>
```

## Use with a player

Place a native `<audio>` anywhere inside `<audio-player>`. It becomes that player’s media provider automatically.

## 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/html/guides/media-sources) when you need an HLS, Mux, Spotify, or other playback adapter.

`<audio>` is the native element itself. Set its attributes and properties, listen for native media events, and access it through an `HTMLAudioElement` reference.

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.

**index.html**

```html
<audio-player>
  <media-container class="html-audio-basic">
    <audio class="html-audio-basic__media" controls preload="metadata">
      <source src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/audio.m4a" />
    </audio>
  </media-container>
</audio-player>
```

**index.css**

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

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

**index.ts**

```ts
import '@videojs/html/audio/player';
import '@videojs/html/ui/container';
```

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt