A minimal, functional, and modern podcast player web app with Apple-inspired glassmorphism design. Built with vanilla HTML, CSS, and JavaScript with a Python backend for offline downloads.
- RSS Feed Support - Add any podcast via RSS feed URL
- Offline Downloads - Download episodes to local folder for offline playback
- Playback Speed Control - Adjust speed from 0.5x to 2.0x
- Keyboard Shortcuts - Full keyboard control for power users
- Search & Filter - Search through episodes instantly
- Auto-play Next Episode - Queue functionality
- Remember Playback Position - Resume where you left off
- Playlist Generator - Export M3U playlists
- Apple-inspired Design - Beautiful glassmorphism UI with light/dark themes
- Python 3.7 or higher
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Clone or download this repository:
git clone https://github.com/yourusername/podcast-player-app.git
cd podcast-player-app- Install Python dependencies:
pip install requests- Start the server:
python server.py- Open your browser and navigate to:
http://localhost:8080/public/index.html
Edit config.json to customize the app:
{
"app": {
"name": "PodPlay",
"port": 8080,
"downloadsFolder": "data/podcasts"
},
"ui": {
"defaultTheme": "light",
"quickAddFeeds": [...]
},
"playback": {
"defaultSpeed": 1.0,
"availableSpeeds": [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
"skipBackSeconds": 15,
"skipForwardSeconds": 15
}
}- app.name - Application name displayed in header
- app.port - Server port (default: 8080)
- app.downloadsFolder - Where to save downloaded episodes
- ui.defaultTheme - Default theme: "light" or "dark"
- ui.quickAddFeeds - Preset podcast feeds for quick access
- playback.defaultSpeed - Initial playback speed
- playback.availableSpeeds - Speed options available to users
- playback.skipBackSeconds - Seconds to skip backward
- playback.skipForwardSeconds - Seconds to skip forward
| Key | Action |
|---|---|
| Space or K | Play/Pause |
| ← or J | Skip back 15 seconds |
| → or L | Skip forward 15 seconds |
| F | Open search |
| M | Toggle mute |
| N | Play next episode |
| Esc | Close search modal |
- Enter an RSS feed URL in the input field
- Click "Add Podcast" or press Enter
- Or click one of the quick-add buttons for popular podcasts
- Browse to a podcast and view its episodes
- Click the "Download" button on any episode
- Episodes are saved to
data/podcasts/folder - Downloaded files can be played in any media player
- Click on a podcast to view episodes
- Click the "Play" button on any episode
- Use the sticky player controls at the bottom
- Playback position is automatically saved
- Press
Fkey or click the search icon - Type to filter episodes in real-time
- Press
Escto close search
- View a podcast's episodes
- Click the playlist icon in the header
- An M3U playlist file will be downloaded
podcast-player-app/
├── public/
│ ├── index.html # Main HTML file
│ ├── styles.css # Glassmorphism styling
│ └── app.js # Application logic
├── data/
│ └── podcasts/ # Downloaded episodes
├── server.py # Python HTTP server with API
├── manager.py # CLI podcast manager
├── config.json # App configuration
├── .gitignore # Git ignore rules
└── README.md # This file
The Python server provides these endpoints:
GET /api/fetch-feed?url=<feed_url>- Fetch RSS feed (CORS proxy)GET /api/download?url=<audio_url>&title=<episode_title>- Download episodeGET /api/podcasts- Get list of downloaded podcastsGET /Podcasts/<filename>- Serve downloaded audio files
Use manager.py for advanced podcast management:
# List all podcasts
python manager.py list
# Add a podcast
python manager.py add <rss_url>
# Download an episode
python manager.py download <podcast_id> <episode_id>
# Remove a podcast
python manager.py remove <podcast_id>- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Requires modern browser support for:
- CSS backdrop-filter (glassmorphism)
- HTML5 audio
- IndexedDB (for podcast storage)
- Fetch API
- Check that the Python server is running
- Verify the RSS feed URL is valid
- Check browser console for errors
- Ensure the
data/podcasts/folder exists - Check Python server console for error messages
- Verify write permissions
- Some podcast feeds use different image formats
- The app tries multiple methods to extract artwork
- A default placeholder will show if no image is found
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - feel free to use this project for personal or commercial purposes.
Built with vanilla JavaScript, no frameworks required. Inspired by Apple's design language and modern podcast apps.
For issues or questions, please open an issue on GitHub.