GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → davatron5000 → Podcast Player

davatron5000 / Podcast Player

Licence: mit
An audio web component for podcasts

Labels

web-components

Projects that are alternatives of or similar to Podcast Player

Stylable
Stylable - CSS for components
Stars: ✭ 1,109 (+946.23%)
Mutual labels:  web-components
Use Custom Element
Custom hook to bridge Custom Elements (Web Components) to React.
Stars: ✭ 77 (-27.36%)
Mutual labels:  web-components
Aybolit
Lightweight web components library built with LitElement.
Stars: ✭ 90 (-15.09%)
Mutual labels:  web-components
Flip Clock
A flip clock, timer and countdown made with Polymer
Stars: ✭ 69 (-34.91%)
Mutual labels:  web-components
Task Lists Element
Drag and drop task list items.
Stars: ✭ 73 (-31.13%)
Mutual labels:  web-components
Minna Ui
😸 A fast, friendly, and fun web UI kit for everyone.
Stars: ✭ 86 (-18.87%)
Mutual labels:  web-components
Open Ui
Maintain an open standard for UI and promote its adherence and adoption.
Stars: ✭ 1,076 (+915.09%)
Mutual labels:  web-components
Polymer3 Webpack Starter
Polymer 3 starter built with Vaadin components and Vaadin.Router library, using webpack and modern tools
Stars: ✭ 99 (-6.6%)
Mutual labels:  web-components
Wired Elements
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
Stars: ✭ 8,848 (+8247.17%)
Mutual labels:  web-components
Funcy.js
funcy.js - a functional web components wrapper
Stars: ✭ 87 (-17.92%)
Mutual labels:  web-components
Webcomponents From Zero To Hero
An introduction to writing raw web components.
Stars: ✭ 70 (-33.96%)
Mutual labels:  web-components
Enaml Web
Build interactive websites with enaml
Stars: ✭ 71 (-33.02%)
Mutual labels:  web-components
Auto Check Element
An input element that validates its value with a server endpoint.
Stars: ✭ 85 (-19.81%)
Mutual labels:  web-components
Sui Components
SUI Components
Stars: ✭ 66 (-37.74%)
Mutual labels:  web-components
Dataformsjs
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.
Stars: ✭ 95 (-10.38%)
Mutual labels:  web-components
File Input
A better <input type="file">
Stars: ✭ 59 (-44.34%)
Mutual labels:  web-components
Polymer Bundler
Moved to Polymer/tools monorepo
Stars: ✭ 1,206 (+1037.74%)
Mutual labels:  web-components
Gulp Vulcanize
Concatenate a set of Web Components into one file
Stars: ✭ 101 (-4.72%)
Mutual labels:  web-components
Feature Hub
Create scalable web applications using micro frontends.
Stars: ✭ 98 (-7.55%)
Mutual labels:  web-components
Scale
The Scale library offers a set of customizable web components written with Stencil.js & TypeScript. The default theme of the library can be easily replaced so that a corresponding corporate identity of a dedicated brand can be represented.
Stars: ✭ 87 (-17.92%)
Mutual labels:  web-components
View All Similar Projects ➔

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:

  • [x] Play/Pause
  • [x] 30s Rewind Button
  • [x] Seekable Progress Meter
  • [x] Speed Selection
  • [x] Mute/Unmute
  • [x] 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].