audiocard

⏯️ AudioCard

⏯️ AudioCard is an opinionated, responsive, audio player for React, designed to be compatible with Twitter Player Cards.

🚀 Quick Start

npm install audiocard
# or
yarn add audiocard
# or
pnpm add audiocard

Basic Usage

import AudioCard from 'audiocard'

<AudioCard
  source="https://example.com/audio.mp3"
  title="My Audio Track"
  art="https://example.com/artwork.jpg"
  duration={180}
  width={750}
/>

Interactive Usage

import AudioCard from 'audiocard'

<AudioCard
  source="https://example.com/audio.mp3"
  title="Interactive Audio"
  duration={180}
  width={750}
  autoplay={true}
  preload={true}
/>

🎯 React Server Components (RSC) Support

AudioCard is fully compatible with React Server Components and Next.js App Router. The component includes the 'use client' directive, so it can be imported and used directly in server components without any additional configuration.

// This works in a Next.js server component
import AudioCard from 'audiocard'

export default function MyServerComponent() {
  return (
    <AudioCard
      source="https://example.com/audio.mp3"
      title="Server Component Audio"
      duration={180}
      width={750}
    />
  )
}

Examples

See the other options on the ⏯️ AudioCard Storybook.

Acknowledgements

The design was heavily influenced by the Twitter card for Overcast.fm.

import AudioCard from 'audiocard'

<AudioCard
  art="https://seekjustice.fm/art300.jpg"
  source="https://dts.podtrac.com/redirect.mp3/seekjustice.fm/media/001.mp3"
  title="Seek Justice Podcast"
  duration={180}
  currentTime={0}
  color="#333"
  background="#f5f5f5"
  width={600}
/>