paper-audio-player

graph TD; A-->B; A-->C; B-->D; C-->D;

paper-audio-player

Build Status Published on webcomponents.org

A custom audio player with material paper style and clean design.

Paper-audio-player example

Live demo

Check the Player live here.

Element usage example

Here is an example of code to add a Paper-Audio-Player element to your page:

<paper-audio-player src="http://nadikun.com/audio/demo.mp3" title="Pink Shades - O+PNR" color="#F05C38"></paper-audio-player>

Title and color attributes are optional.

Install

Install the component using Bower:

bower install paper-audio-player --save

Or download as ZIP.

Dependencies

  • Polymer 1.0
  • Paper-progress
  • Iron-Icons
  • Paper-icon-button
  • Paper-ripple

These dependencies are managed via Bower. You can
install that via:

npm install -g bower

Then, go ahead and download the player's dependencies:

bower install

Usage

  1. Import Web Components' polyfill:

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  2. Import Player element:

    <link rel="import" href="bower_components/paper-audio-player/paper-audio-player.html">

  3. Start using it!

    <paper-audio-player src="track.mp3"></paper-audio-player>
<paper-audio-player src="podcast-2.mp3" title="My Podcast #2"></paper-audio-player>
<paper-audio-player src="song.mp3" title="PANG! - Cry Me A River" color="#F05C38"></paper-audio-player>

Customization

Attribute Options Description
src string The URL path to the audio file
title string Customize the track name
color string Customize the accent color that will be used
auto-play boolean Will start playing the audio file automatically
preload string: auto, metadata, none Defines if audio file should be pre-loaded.
time-offset number Sets the time offset in seconds for audio to start playing at this time.
ga-id string Sets Google Analytics tracking ID, e.g. UA-000000-01.

Note: Just like in native audio element, the preload property will be ignored if auto-play is set on a player.

Google Analytics

If you add your unique GA tracking ID to a player (e.g. ga-id="UA-000000-01"), it will dispatch the following events to your GA: Play, Pause, Scrub, Ended.
Ended means that audio played through to the very end.

For each event Paper Player will pass an event label property that contains a title (if specified) or src value of an audio file.

Development

If you wish to work on your element in isolation, we recommend that you use
Polyserve to keep your element's
bower dependencies in line. You can install it via:

npm install -g polyserve

And you can run it via:

polyserve

Once running, you can preview your element at
http://localhost:8080/components/paper-audio-player/

To work with Demo page styling with Sass, install grunt and its plugins:

npm install

After you made any changes, create new CSS file:

gulp

This will convert Sass into CSS and run Autoprefixer.

Testing

The tests are compatible with web-component-tester.
Install it via:

npm install -g web-component-tester

Then, you can run your tests on all of your local browsers via:

wct

Or, simply navigate to the /test directory if you are using Polyserve: http://localhost:8080/components/paper-audio-player/test/

(OS X only) Manually install the latest SafariDriver extention for Selenium - check the 1st step in Quick Start here.

Firefox 46 At the moment please fall back to test in Firefox 46 or earlier - see WCT issue here.

WCT Tips

wct -l chrome will only run tests in chrome.

wct -p will keep the browsers alive after test runs (refresh to re-run).

wct test/some-file.html will test only the files you specify.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b new-feature
  3. Cover your code with tests and make sure all new and existing tests pass locally before pushing.
  4. Commit your changes: git commit -m 'Add some awesomeness'
  5. Push to the branch: git push origin new-feature
  6. Submit a pull request!

License

MIT License © Nadi Dikun

标题：paper-audio-player

作者：Tanken

来源：http://pipe.b3log.org/blogs/Tanken/paper-audio-player-readme

94