Opinionated, responsive, audio player compatible with Twitter Cards - Fully RSC compliant
npm install audiocard⏯️ AudioCard is an opinionated, responsive, audio player for React, designed to be compatible with Twitter Player Cards.
``bash`
npm install audiocardor
yarn add audiocardor
pnpm add audiocard
`jsx
import AudioCard from 'audiocard'
title="My Audio Track"
art="https://example.com/artwork.jpg"
duration={180}
width={750}
/>
`
`jsx
import AudioCard from 'audiocard'
title="Interactive Audio"
duration={180}
width={750}
autoplay={true}
preload={true}
/>
`
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.
`jsx
// This works in a Next.js server component
import AudioCard from 'audiocard'
export default function MyServerComponent() {
return (
title="Server Component Audio"
duration={180}
width={750}
/>
)
}
`
See the other options on the ⏯️ AudioCard Storybook.
The design was heavily influenced by the Twitter card for Overcast.fm.
`jsx
import AudioCard from 'audiocard'
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}
/>
``