CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-h5-audio-player

A customizable React audio player component with TypeScript support, mobile compatibility, and comprehensive accessibility features

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

React H5 Audio Player

React H5 Audio Player is a customizable React audio player component written in TypeScript that provides consistent UI/UX across different browsers and mobile devices. It features comprehensive customization options, full keyboard accessibility, MSE/EME support, and modular design with extensive event handling capabilities.

Package Information

  • Package Name: react-h5-audio-player
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-h5-audio-player

Core Imports

import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';

For CommonJS:

const AudioPlayer = require('react-h5-audio-player');
require('react-h5-audio-player/lib/styles.css');

Additional imports for UI customization and MSE:

import AudioPlayer, { RHAP_UI, OnSeek } from 'react-h5-audio-player';
import { ReactNode, CSSProperties } from 'react';

Basic Usage

import React from 'react';
import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';

const MyAudioPlayer = () => (
  <AudioPlayer
    src="https://example.com/audio.mp3"
    onPlay={e => console.log("Playing audio")}
    onPause={e => console.log("Paused audio")}
    // Additional props as needed
  />
);

Advanced usage with customization:

import React from 'react';
import AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';

const CustomPlayer = () => (
  <AudioPlayer
    src="https://example.com/audio.mp3"
    autoPlay={false}
    showSkipControls={true}
    showJumpControls={true}
    customAdditionalControls={[RHAP_UI.LOOP]}
    customVolumeControls={[RHAP_UI.VOLUME]}
    onClickPrevious={() => console.log('Previous track')}
    onClickNext={() => console.log('Next track')}
    header={<div>Now Playing: Song Title</div>}
    footer={<div>Artist Name</div>}
  />
);

Architecture

React H5 Audio Player is built around several key components:

  • Main Component: H5AudioPlayer class component providing the primary interface
  • UI Modules: Modular components like ProgressBar, VolumeBar, CurrentTime, and Duration
  • Customization System: Extensible UI through custom icons, layouts, and control sections
  • Event System: Comprehensive HTML5 audio event handling with custom extensions
  • Accessibility: Full keyboard navigation and ARIA label support
  • Styling: SCSS/CSS with customizable themes and responsive design

Capabilities

Core Audio Player

The main H5AudioPlayer component providing comprehensive audio playback functionality with extensive customization options.

interface PlayerProps {
  // Core HTML5 audio properties
  src?: string;
  autoPlay?: boolean;
  loop?: boolean;
  muted?: boolean;
  volume?: number;
  preload?: AUDIO_PRELOAD_ATTRIBUTE;
  crossOrigin?: React.AudioHTMLAttributes<HTMLAudioElement>['crossOrigin'];
  mediaGroup?: string;
  
  // Player behavior
  autoPlayAfterSrcChange?: boolean;
  hasDefaultKeyBindings?: boolean;
  listenInterval?: number;
  progressUpdateInterval?: number;
  progressJumpStep?: number;
  progressJumpSteps?: { backward?: number; forward?: number };
  volumeJumpStep?: number;
  
  // UI configuration
  className?: string;
  style?: CSSProperties;
  layout?: MAIN_LAYOUT;
  showJumpControls?: boolean;
  showSkipControls?: boolean;
  showDownloadProgress?: boolean;
  showFilledProgress?: boolean;
  showFilledVolume?: boolean;
  timeFormat?: TIME_FORMAT;
  
  // Custom content
  header?: ReactNode;
  footer?: ReactNode;
  defaultCurrentTime?: ReactNode;
  defaultDuration?: ReactNode;
  children?: ReactNode;
  
  // Event handlers - see Component Props & Events doc
  onPlay?: (e: Event) => void;
  onPause?: (e: Event) => void;
  onEnded?: (e: Event) => void;
  // ... many more event handlers
}

class H5AudioPlayer extends Component<PlayerProps> {
  static defaultI18nAriaLabels: I18nAriaLabels;
  static defaultProps: Partial<PlayerProps>;
  
  togglePlay(e: React.SyntheticEvent): void;
  playAudioPromise(): void;
  isPlaying(): boolean;
}

Component Props & Events

UI Customization & Layout

Advanced customization system for modifying the player's appearance, layout, and individual UI components.

interface CustomIcons {
  play?: ReactNode;
  pause?: ReactNode;
  rewind?: ReactNode;
  forward?: ReactNode;
  previous?: ReactNode;
  next?: ReactNode;
  loop?: ReactNode;
  loopOff?: ReactNode;
  volume?: ReactNode;
  volumeMute?: ReactNode;
}

type CustomUIModule = RHAP_UI | ReactElement;
type CustomUIModules = Array<CustomUIModule>;

enum RHAP_UI {
  CURRENT_TIME = 'CURRENT_TIME',
  CURRENT_LEFT_TIME = 'CURRENT_LEFT_TIME',
  PROGRESS_BAR = 'PROGRESS_BAR',
  DURATION = 'DURATION',
  ADDITIONAL_CONTROLS = 'ADDITIONAL_CONTROLS',
  MAIN_CONTROLS = 'MAIN_CONTROLS',
  VOLUME_CONTROLS = 'VOLUME_CONTROLS',
  LOOP = 'LOOP',
  VOLUME = 'VOLUME'
}

type MAIN_LAYOUT = 'stacked' | 'stacked-reverse' | 'horizontal' | 'horizontal-reverse';
type TIME_FORMAT = 'auto' | 'mm:ss' | 'hh:mm:ss';

UI Customization & Layout

Advanced Features & MSE

Media Source Extensions (MSE), Encrypted Media Extensions (EME) support, and advanced audio features for streaming and encrypted content.

interface MSEPropsObject {
  onSeek: OnSeek;
  onEcrypted?: (e: unknown) => void;
  srcDuration: number;
}

type OnSeek = (audio: HTMLAudioElement, time: number) => Promise<void>;

interface I18nAriaLabels {
  player?: string;
  progressControl?: string;
  volumeControl?: string;
  play?: string;
  pause?: string;
  rewind?: string;
  forward?: string;
  previous?: string;
  next?: string;
  loop?: string;
  loopOff?: string;
  volume?: string;
  volumeMute?: string;
}

Advanced Features & MSE

Types

type AUDIO_PRELOAD_ATTRIBUTE = 'auto' | 'metadata' | 'none';

Install with Tessl CLI

npx tessl i tessl/npm-react-h5-audio-player

docs

advanced-features-mse.md

component-props-events.md

index.md

ui-customization-layout.md

tile.json