headless-audioplayer-react

Headless Audio Player

A wrapper to make audio playing more easier

Documentation

Installation

Choose your favorite package manager

• pnpm install headless-audioplayer-react
• npm install headless-audioplayer-react
• yarn add headless-audioplayer-react

Getting started

Headless audio player is a unstyled wrapper to handle all the stuff related to progress, downloadProgress, change current time of playing etc... You can make the player as you want, with your own styles.

Basic example

import { PlayerProvider, Player } from "headless-audioplayer-react";

export default function Web() {
  return (
    <PlayerProvider src="your audio media or audio url">
      <Player>
        {(context) => (
          <div className="w-full max-w-lg mt-10">
            <button onClick={context.togglePlay}>
              {context.isPlaying ? "Pause" : "Play"}
            </button>
            <p>{context.timestamp.current}</p>
            <p>{context.timestamp.total}</p>
          </div>
        )}
      </Player>
    </PlayerProvider>
  );
}

Slider to change the time

To change the time, there's a built in component that you can use, however you can build your own.

Example

import {
  PlayerProvider,
  Player,
  PlayerSlider,
} from "headless-audioplayer-react";

// Slider styles are required
import "headless-audioplayer-react/dist/cjs/css/slider.css"; // If your using nextjs 12, you have to import this in the _app component

export default function Web() {
  return (
    <div className="w-full flex items-center flex-col">
      <PlayerProvider src="your audio media">
        <Player>
          {(context) => (
            <div className="w-full max-w-lg mt-10">
              <PlayerSlider
                downloadProgress={context.downloadProgress}
                onChange={context.onSliderChange}
                progress={context.progress}
              />
              <div className="flex justify-between">
                <p>{context.timestamp.current}</p>
                <p>{context.timestamp.total}</p>
              </div>
              <button onClick={context.increaseVolume}>+1</button>
              <button onClick={context.decreaseVolume}>-1</button>
              <VolumeSlider
                onChange={context.onSliderVolumeChange}
                volume={context.volume}
              />
            </div>
          )}
        </Player>
      </PlayerProvider>
    </div>
  );
}

Building your own range slider

You can use onSliderChange and progress props to build your own slider and style that, the following example shows how to do it.

import { PlayerProvider, Player } from "headless-audioplayer-react";

export default function Web() {
  return (
    <div className="w-full flex items-center flex-col">
      <PlayerProvider src="https://ljinlovesongs.onrender.com/songs/639d2ccd6453443d963f4050">
        <Player>
          {(context) => (
            <div className="w-full max-w-lg mt-10">
              <input
                type="range"
                onChange={context.onSliderChange}
                value={context.progress}
                step="0.01"
                className="w-full"
              />
              <button onClick={context.togglePlay}>
                {context.isPlaying ? "Pause" : "Play"}
              </button>
              <div className="flex justify-between">
                <p>{context.timestamp.current}</p>
                <p>{context.timestamp.total}</p>
              </div>
            </div>
          )}
        </Player>
      </PlayerProvider>
    </div>
  );
}