Podcast Player Embed
Drop a real episode from your podcast feed onto a page, with artwork and show notes.
What it adds
An embeddable block that pulls a chosen episode from a podcast feed and renders artwork, notes, and a player.
What your agent is told to do
5
What your agent is told to do
5-
1
Let an editor paste a feed address once, then pick an episode from a list rather than pasting an episode URL. The picker is the whole point; a raw URL field puts the work back on the user.
-
2
Render the audio through the app's existing Audio Player rather than embedding the host's own widget. A third-party iframe means their branding, their tracking, and their outage on your page.
-
3
Read the feed on the server on a schedule and store what you render. Do not fetch the feed from the visitor's browser on every page view.
-
4
Show artwork, episode title, publication date, duration, and show notes, and link out to the episode on its original host for people who want their own podcast app.
-
5
Do not trust the show notes. Feeds carry arbitrary markup written by whoever runs the show; strip scripts, event handlers, and embedded frames, and allow only the small set of tags the notes actually need.
Edge cases it handles
8
Edge cases it handles
8- Fetching the feed on every page view will get you rate limited or blocked by the host. Cache the parsed feed with a sensible refresh interval and serve the cached copy while a refresh runs in the background.
- Feeds reorder themselves, republish episodes with new file addresses, and drop old episodes entirely. Match on the episode identifier the feed provides, not on position in the list, and keep showing a stored copy of an episode that has vanished rather than blanking the block.
- Show notes arrive as untrusted markup and are the most likely injection route in this feature. Sanitise on the server before storage as well as on render, so a stored payload cannot leak through a later template change.
- When the feed is unreachable, the block must still render the last known episode with its artwork and a working play link, not an empty box or a raw fetch error.
- Long episodes make seek precision matter. A scrubber a few hundred pixels wide over a three-hour recording needs a fine-seek affordance or keyboard nudge, or listeners cannot land where they meant to.
- Artwork comes from a remote host at unpredictable dimensions. Reserve the space before it loads so the page does not jump, and fall back to a placeholder rather than a broken image.
- A feed address that is not a podcast feed, or that returns a login page, must fail at the point the editor pastes it, with a message saying what was wrong.
- Very large feeds with hundreds of episodes need paging or search in the picker, and a parse limit so one enormous feed cannot exhaust memory.
Definition of done
9
Definition of done
9- An editor pastes a feed once and selects episodes from a list.
- Feeds are fetched and parsed server-side on a schedule, not per page view.
- Show notes are sanitised before storage and before render, and scripts and frames never survive.
- An unreachable feed still renders the last known episode with artwork and playback.
- Artwork space is reserved so the layout does not shift on load.
- Playback uses the app's existing audio player, not a third-party embed.
- An invalid or non-podcast feed address is rejected with a clear message at entry time.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Picture-in-Picture Mode
Picture-in-Picture Mode
Let viewers pop a video into a floating window and keep using the rest of the app.
What it does
A control on the video player that hands the video to the browser's floating always-on-top window.
How it works
- 1 Add the control to the app's existing video player rather than building a separate popped-out player. Two players competing over the same element is the main way this feature goes wrong.
- 2 Keep the app in sync with the floating window in both directions. Pausing, seeking, or changing volume from the floating window must update the in-page player, and closing the floating window must return playback to the page at the same position.
- 3 Decide explicitly what happens when the user navigates away from the page that owns the video. Either keep the floating window alive and reconnect when they return, or end it cleanly, but do not leave a floating window playing a video the app has forgotten about.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/picture-in-picture-mode
Audio Waveform Scrubber
Audio Waveform Scrubber
Show the shape of a track so listeners can see the quiet and loud parts and click to them.
What it does
A waveform rendered from precomputed amplitude data, doubling as the seek control on the audio player.
How it works
- 1 Compute the amplitude data on the server when the file is first stored, and serve it as a small dataset the page can draw. Do not decode the audio in the browser to build the waveform.
- 2 Replace the plain scrub bar in the app's existing Audio Player with this surface rather than adding a second seek control beside it.
- 3 Draw played and unplayed regions distinctly, and keep the playhead position exact under click, drag, and keyboard seeking on the same surface.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/audio-waveform-scrubber
Hover Video Preview
Hover Video Preview
Hovering a video card plays a short silent clip so people see what it is before clicking.
What it does
A silent, short-loop preview that plays inside a video card on deliberate hover and returns to the poster on exit.
How it works
- 1 Generate a short, low-resolution, silent preview clip during video processing and store it alongside the poster frame. Do not play the full source file behind the card.
- 2 Require a deliberate hover before doing anything. Wait several hundred milliseconds after the pointer settles, then load, so a cursor crossing a grid does not fire a dozen requests.
- 3 Give touch devices an explicit preview control on the card, since hover does not exist there. A long-press or a small preview button is fine; silently doing nothing on mobile is not.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/hover-video-preview
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.