Skip to content
An audio web component for podcasts
Branch: master
Clone or download
Pull request Compare This branch is 5 commits ahead of davatron5000:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
demo.html
podcast-player.html

README.md

podcast-player

Screenshot of podcast-player

<a href="my.mp3" is="podcast-player">Listen</a>

A web component for audio podcasts. It has a few features that make it most suitable for podcasts:

  • Play/Pause
  • 30s Rewind Button
  • Seekable Progress Meter
  • Speed Selection
  • Mute/Unmute
  • Accessibility
  • TimeJump?

Usage

To get started, you'll need a copy of webcomponents.js. Either link from CDNjs or

bower install webcomponentsjs

Include webcomponents.min.js and podcast-player.html in the <head> of your episode page:

<script src="webcomponents.min.js"></script>
<link rel="import" href="podcast-player.html"/>

Then in the body of your post, invoke the custom component using an <a> element with the is="podcast-player" attribute.

<a href="my.mp3" is="podcast-player">Listen</a>

BINGO-BANGO! Now you should be able to style it with good old fashioned CSS. Make it your own, good buddy.

Testing Locally

To test out web components locally, you need to start a local server so you don't get a CORS violation with something like:

cd to/my/directory/
python -m SimpleHTTPServer

If you have questions about web components, read up on them at webcomponents.org.

Download, Fork, Commit

If you like to contribue, please feel free to fork the repo. If you created a brand new feature, I recommend discussing it in an issue first rather wasting your whole weekend working on it, then Hail Mary'ing it my way.

If you're reporting a bug, you'd better have an editable reduced test case on a CodePen or GTFO. Sorry, thems the brakes. I got kids.

You can’t perform that action at this time.