• Stars
    star
    118
  • Rank 299,923 (Top 6 %)
  • Language
  • License
    MIT License
  • Created about 10 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An audio web component for podcasts

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.

More Repositories

1

FitText.js

A jQuery plugin for inflating web type
HTML
6,754
star
2

Lettering.js

A lightweight, easy to use Javascript <span> injector for radical Web Typography
JavaScript
5,385
star
3

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
HTML
4,769
star
4

awesome-standalones

A curated list of awesome framework-agnostic standalone web components
1,315
star
5

Foldy960

A responsive version of the 960 grid, the Pvel way!
CSS
482
star
6

TimeJump

TimeJump – Deep-links for Podcasts
JavaScript
347
star
7

can-i-subsystem-it

316
star
8

deCSS3

A lil' bookmarklet that will strip out your CSS3 rules and show you how gracefully you're degrading.
JavaScript
310
star
9

a11y-nutrition-cards

Nutrition Cards for Accessible Components
HTML
90
star
10

htmlwithsuperpowers

A guidebook to Web Components
88
star
11

Better-Art-Direction

A fork of the incredible Art Direction plugin by Noël Jackson (http://noel.io).
PHP
76
star
12

fitWeird

A window monitor bookmarklet.
JavaScript
62
star
13

WP-Dribbble

A wordpress plugin and widget that pulls in your latest Dribbble shots.
PHP
54
star
14

fit-vids

Web Component version of FitVids from the creator of FitVids
JavaScript
39
star
15

wobbly-box

A web component for drawing wobbly boxes
JavaScript
25
star
16

Borkers

HTML5 Boilerplate + Starkers = Borkers! A starter theme.
PHP
22
star
17

humans-vs-robots

An unpacked chrome extension for Github
JavaScript
19
star
18

alpha-paintlet

A CSS Paint worklet that converts alpha's your bg-color based on some variables.
HTML
14
star
19

NodebotUI

Twitter Bootstrap for Nodebot Interfaces
JavaScript
14
star
20

sortByData

A simple jQuery plugin that lets you sort a collection of elements by any data- attribute you want.
JavaScript
5
star
21

2x

A chrome extension for speedier HTML Media
JavaScript
5
star
22

worker-controller

JavaScript
4
star
23

html-with-superpowers

HTML
4
star
24

htmlwithsuperpowers-deck

Vue
4
star
25

FitGrid

3
star
26

api-screenshot

JavaScript
2
star
27

12th-Street-Bakery

A non-profit bakery teaching at-risk teens the art and skill of baking.
HTML
1
star
28

jekyll-reduced-test-case

Ruby
1
star
29

jekyll-polymer

HTML
1
star
30

davatron5000

1
star
31

begin-graphql-test

Begin app
JavaScript
1
star