Podcast Section

A comprehensive podcast player component that dynamically fetches episodes from RSS feeds using the professional Shikwasa audio player. Features a single main player with episode selection, progressive loading, and fallback support for optimal user experience.

Podcast Section Examples

The default section using these options:

  options:
    showEpisodeList: true # Display episode list (default: true)
    initialEpisodes: 5 # Episodes shown initially (default: 5)
    maxEpisodes: 20 # Max episodes to fetch (default: 50)
    autoplay: false # Auto-play first episode (default: false)
    theme: 'dark' # Player theme: 'light', 'dark', 'auto'
    themeColor: '#007aff' # Player accent color

AI Fireside Chat

Conversations about artificial intelligence, machine learning, and the future of technology

Loading episodes from RSS feed...

A minimal internal example

options:
  showHeader: false
  showEpisodeList: false 
  initialEpisodes: 5
  maxEpisodes: 20
  autoplay: false
  theme: 'auto'
  themeColor: '#666'

Example with image background

options:
  showHeader: false
  showEpisodeList: true 
  initialEpisodes: 3
  simpleEpisodesList: true
  maxEpisodes: 20
  autoplay: false
  theme: 'auto'
  themeColor: '#666'

Loading episodes from RSS feed...

Configuration

- sectionType: podcast
  containerTag: section
  # container settings

  podcast: 'ai-fireside-chat'    # references data/podcasts/ai-fireside-chat.json
  options:
    showEpisodeList: true        # Display episode list (default: true)
    initialEpisodes: 5           # Episodes shown initially (default: 5)
    maxEpisodes: 50              # Max episodes to fetch (default: 50)
    autoplay: false              # Auto-play first episode (default: false)
    theme: 'auto'                # Player theme: 'light', 'dark', 'auto'
    themeColor: '#007aff'        # Player accent color
  ctas:
    - url: 'https://example.com/subscribe'
      label: 'Subscribe to Podcast'
      isButton: true
      buttonStyle: 'primary'

Data Structure - RSS-Based (Recommended)

Create podcast data files in lib/data/podcasts/[name].json with RSS URL:

{
  "title": "AI Fireside Chat",
  "description": "Conversations about artificial intelligence and technology",
  "coverImage": "/assets/images/ai-fireside-cover.jpg",
  "rssUrl": "https://media.rss.com/fire-side-chat-brady-bunch-shoots-the-shit-1/feed.xml",
  "platform": "apple",
  "podcastUrl": "https://podcasts.apple.com/us/podcast/ai-fireside-chat/id1780606504"
}

Data Structure - Static Episodes (Alternative)

For internal or curated content:

{
  "title": "Internal Tech Talk",
  "description": "Weekly discussions about web development",
  "coverImage": "/assets/images/internal-cover.jpg",
  "platform": "internal",
  "episodes": [
    {
      "id": "episode-1",
      "title": "Getting Started with Static Sites",
      "episodeNumber": "001",
      "publishDate": "2024-01-20",
      "duration": "12:45",
      "audioFile": "/assets/audio/episode-001.mp3",
      "thumbnail": "/assets/images/episode-001.jpg",
      "description": "An introduction to static site generators."
    }
  ]
}

Player Features (Shikwasa)

Advanced Controls - Play/pause, progress bar, volume, speed control
Speed Options - 0.75x, 1x, 1.25x, 1.5x, 2x playback speeds
Keyboard Navigation - Space (play/pause), arrow keys (seek), M (mute)
Chapter Support - Displays chapters if available in podcast
Download Option - Built-in download functionality
Theme Support - Light, dark, and auto (system preference) themes

Podcast Data

Property	Type	Required	Description
`podcast`	string	Yes	Name of JSON file in `data/podcasts/` directory

Player Options

Property	Type	Required	Description
`showEpisodeList`	boolean	No	Display episode selection list (default: true)
`initialEpisodes`	number	No	Episodes shown initially (default: 5)
`maxEpisodes`	number	No	Maximum episodes to fetch from RSS (default: 50)
`autoplay`	boolean	No	Auto-play first episode on load (default: false)
`theme`	string	No	Player theme - 'light', 'dark', 'auto' (default: 'auto')
`themeColor`	string	No	Player accent color in hex format (default: '#007aff')

Content

Property	Type	Required	Description
`ctas`	array	No	Optional array of call-to-action buttons