JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 31
  • Score
    100M100P100Q53949F
  • License MIT

A simple audio player for React

Package Exports

  • @clxrity/react-audio
  • @clxrity/react-audio/dist/cjs/index.js
  • @clxrity/react-audio/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@clxrity/react-audio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@clxrityy/react-audio

[ BETA ]

A react audio player component library.

pnpm add @clxrityy/react-audio

🗒️ CHANGELOG

Components

Component Controls Customizable
<JustPlayer/> Play/pause ✅
<Waveform /> Play/pause, volume, progress, mute/unmute ✅
<AudioPlayer/> Play/pause, volume, progress, mute/unmute ✅
<AudioLibrary/> Play/pause, volume, progress, mute/unmute, next/previous ✅

<JustPlayer />

Features

  • Just a play button
  • Customizable style
  • Loading state

Use-case

  • Best for mapping over audio files in a visually small listed component
"use client";
import { JustPlayer } from "@clxrityy/react-audio";

export default function Component() {
  return (
    <JustPlayer
      track={{
        src: "/audio.wav",
      }}
    />
  );
}

Styling

<JustPlayer
  track={tracks[0]}
  size={50} {/* ICON SIZE */}
  style={{
    backgroundColor: "red",
    padding: "1rem",
    borderRadius: "1rem",
    boxShadow: "0 0 1rem rgba(0, 0, 0, 0.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }} {/* REACT CSS PROPERTIES */}
/>

styled JustPlayer example

<Waveform />

Features

  • Audio wave visualizer
  • Screen responsive
  • Volume controls
  • Progress bar

Use-case

  • Best for displaying the audio wave
"use client";
import { type Track, Waveform } from "@clxrityy/react-audio";

const track: Track = {
  // ...
};

export default function Component() {
  return (
    <Waveform
      track={track}
      size={{
        width: window.innerWidth,
        height: window.innerHeight,
      }}
      color="#ff0000"
    />
  );
}

Styling

"use client";

export default function Component() {
  return (
    <Waveform
      track={track}
      canvasStyles={{
        borderRadius: "0.5rem",
        border: "1px solid #333",
      }}
      size={{
        width: 300,
        height: 120,
      }}
    />
  );
}

styled waveform example

<AudioPlayer />

Features

  • Visualized audio player
  • Screen responsive
  • Volume controls
  • Progress bar

Use-case

  • Best for displaying a singular audio track
"use client";
import { type Track, AudioPlayer } from "@clxrityy/react-audio";

const track: Track = {
  src: "/audio.wav",
  title: "Track Title",
  author: {
    name: "Track Author",
    url: "https://www.someurl.com",
  },
  thumbnail: "./favicon.ico",
};

export default function Component() {
  return <AudioPlayer track={track} />;
}
audio player example 1 audio player example 2

<AudioLibrary />

Features

  • A visualized audio library with multiple tracks
  • Controls
  • Progress bar
  • Volume control
  • Screen responsive
  • Autoplay next song

Use-case

  • Best for displaying collections of audio files
"use client";
import { AudioLibrary } from "@clxrityy/react-audio";
import { tracks } from "./data";

export default function Component() {
  return (
    <div>
      <AudioLibrary tracks={tracks} />
    </div>
  );
}
audio library example image

Styling

<AudioLibrary
  tracks={tracks}
  styles={{
    backgroundColor: "transparent",
    textColor: "white",
    boxShadow: "10px 5px 5px red",
    theme: "dark",
    border: "1px solid white",
  }}
/>

Construct the audio library yourself

If you'd like further customization, import the base components:

import {
  LibraryPlayer, // The player component
  LibraryTrackItem, // Individual track component
} from "@clxrityy/react-audio";
  • Define states yourself
"use client";
import {
  type Track,
  // ...
} from "@clxrityy/react-audio";
import { useState } from "react";

const tracks: Track[] = [
  // ...
];

export default function Component() {
  const [currentTrackIndex, setCurrentTrackIndex] = useState(-1);

  const currentTrack = tracks[currentTrackIndex];

  return (
    <div>
      <h1>My songs</h1>
      <ul>
        {tracks.map((track, index) => (
          <LibraryTrackItem
            key={index}
            selected={index === currentTrackIndex}
            track={track}
            trackNumberLabel={index}
            onClick={() => setCurrentTrackIndex(index)}
          />
        ))}
      </ul>
      <LibraryPlayer
        key={currentTrackIndex}
        currentTrack={currentTrack}
        trackIndex={current}
        trackCount={tracks.length}
        onNext={() => setCurrentTrackIndex((i) => i + 1)}
        onPrev={() => setCurrentTrackIndex((i) => i - 1)}
      />
    </div>
  );
}

Further customization

audio-library

Example from clxrity.xyz

See examples for more specific usage demonstrations