@clxrity/react-audio

A react audio player component library.

Peer Dependencies:

npm i @clxrity/react-audio

pnpm add @clxrity/react-audio

yarn add @clxrity/react-audio

Dynamic import example with Next.js

'use client' // (REQUIRED)
import dynamic from 'next/dynamic'
import '@clxrity/react-audio/index.css' // (optional) import the styles

/**
 * You can also import the CSS within your `globals.css` or `index.css` file like so:
 * ```css
 * @import "@clxrity/react-audio/index.css";
 * ```
 */

const Player = dynamic(
  () => import('@clxrity/react-audio').then((mod) => mod.Player),
  { ssr: false }
)

export default function Component() {
  const track = {
    src: '/loop.wav', // (REQUIRED) audio file path (public/loop.wav)
    title: 'Loop',
    artist: {
      name: 'Clxrity',
      url: 'https://wav.clxrity.xyz',
    },
  }

  return <Player track={track} showTrackInfo={true} />
}

• Note: You may use external URLs for the src property for components such as <Player /> and <ShufflePlayer /> components and experience no CORS issues, as the audio files are fetched and played by the client-side.
• However, for components such as <Waveform /> and <Spectrogram /> components, the CORS origins must be set correctly on the server-side to avoid CORS issues. This is only applicable when using external URLs for the src property.
• For example, if using files served from firebase storage, set the CORS origins to * to allow all origins to access the files.
  • Firebase CORS Configuration