Fixed Podcast Player

Web Component for a sticky audio player and its Play button.

Preview

• Preview on Netlify
• View on CodePen

Usage

1. Include the assets

Adjust the paths below as needed:

<!-- Podcast Player Assets (CSS, JS, SVG) -->
<link rel="stylesheet" class="fpp" href="./assets/build/podcast-player.min.css">
<script src="./assets/build/podcast-player.min.js" type="module"></script>
<link rel="icon-sprite-sheet" class="fpp" href="./assets/icons.svg">

Icon Sprite Sheet (3rd asset above)

The <link rel="icon-sprite-sheet"> above sets the URL for the SVG sprite sheet used for the icons.

This can be omitted from here if setting the following attribute on the <podcast-player> element:
svg-base="./assets/icons.svg"

2. Add the <podcast-player> element

Note the (self-explanatory) data-title, and data-thumb attributes on the element; as well as the href of .show-and-play inside the element which is the audio source (i.e. the mp3 URL):

<podcast-player data-title="Episode Title" data-thumb="thumbnail.jpg">
  <a class="show-and-play" href="audio.mp3">
    <div icon-name="play-circle-solid">Play</div>
    <div icon-name="pause-circle">Pause</div>
    <div icon-name="play-circle">Resume</div>
  </a>
</podcast-player>

Attributes for the <podcast-player> element

Attribute	Default	Description
data-title	""	The title of the episode
data-thumb	""	The URL to the thumbnail image
data-position	"bottom"	The position of the player: top or bottom
data-variation	""	Player will not touch the edge on large screens if set to floating
show-on	"scroll"	The button event that triggers the player to show: scroll (when the button is scrolled into view for the first time), click, load, or hover

Overridable CSS Variables

You can add variables to your CSS to override the default values.

For example, you can easily change the color of the Play button and the intensity of the player's gradient background:

:root {
  --pp-hue: 205deg;
  --pp-sat: 35%;
  --pp-lig: 40%;
  --pp-gradient-hue-difference: 15deg;
}

Variable	Default	Description
--pp-offset-top	0px	Account for any sticky header or navigation
--pp-offset-top-small	0px	Account for any sticky header or navigation on small screens
--pp-content-width	40rem	The "content" width of the player
--pp-radius	1.25rem / 1rem	The border radius of the player. The x / y format means the corners will be more oval (when x is different from y) instead of circular
--pp-hue	205deg	The hue of the base color
--pp-sat	35%	The saturation of the base color
--pp-lig	40%	The lightness of the base color
--pp-gradient-hue-difference	15deg	The difference in hue between the two colors of the player's background gradient
--body-offset-for-player	110px	Extra padding for the body (at the top or at the bottom) to make space for the player

Build Commands

Install (if not done yet) and run the dev command (asset watch only, no server):

pnpm install
pnpm run dev

Build only command (no watch):

pnpm run build