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:

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

Anatomy

<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 when the browser should choose between candidates. See 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, HTMLAudioElement, and shared 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. The shared demo MP4 supplies its audio track, so the <source> does not claim an audio-only MIME type.

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/highest.mp4" />
        </Audio>
      </Container>
    </AudioPlayer>
  );
}

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

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

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

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

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

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