Skip to content

thewebplatform/podcast-player

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

podcast-player

Screenshot of podcast-player

<podcast-player src="my.mp3"></podcast-player>

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 the <podcast-player> element.

<podcast-player src="my.mp3"></podcast-player>

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.

About

An audio web component for podcasts

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published