@kpoint/podcast-player

A modular, accessible web component audio player powered by KPoint. Works with any framework — React, Angular, Vue, Svelte, or plain HTML.

Installation

Via CDN (recommended for quick setup):

<script type="module" src="https://cdn.kpoint.com/podcast/player.js"></script>

Or via npm:

npm install @kpoint/podcast-player

import '@kpoint/podcast-player'

Quick Start

<kp-player host="your-domain.kpoint.com" video-id="gcc-your-video-id">
  <kp-default-layout></kp-default-layout>
</kp-player>

That's it. Title, cover image, and duration are auto-fetched from KPoint.

Attributes

| Attribute | Default | Description | |---|---|---| | host | — | Your KPoint domain (required) | | video-id | — | KPoint video ID (required) | | player-type | bitsy | bitsy or silk | | auto-play | false | Auto-play on load | | initial-volume | 1 | Starting volume (0–1) | | initial-playback-rate | 1 | Starting speed |

Responsive Behavior

The default layout adapts automatically:

• Desktop (>= 768px): Full horizontal strip with all controls
• Mobile (< 768px): Minimized cover + title + play button; expands on play

Theming

Override CSS custom properties on kp-player to match your brand:

kp-player {
  --kp-player-bg: #1a1a2e;
  --kp-player-text: #ffffff;
  --kp-player-accent: #e94560;
  --kp-player-progress-bg: #333;
  --kp-player-buffered-bg: #555;
  --kp-player-radius: 8px;
  --kp-player-spacing: 12px;
  --kp-player-font-family: 'Inter', sans-serif;
}

Works Everywhere

Plain HTML, Angular, Vue, React, Svelte — any framework. No dependencies required.

License

MIT