headless-audioplayer-react
v1.0.1
Published
<h1 align="center"> Headless Audio Player </h1> <p align="center"> A wrapper to make audio playing more easier </p>
Downloads
64
Maintainers
Readme
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>
);
}