paper-audio-player
A custom audio player with material paper style and clean design.
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:
Title and color attributes are optional.
Install
Install the component using NPM:
npm install paper-audio-player --save
Install the component using Bower:
bower install paper-audio-player --save
Or download as ZIP.
Dependencies
- Polymer 1.0
- Paper-progress
- Iron-Icons
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
-
Import Web Components' polyfill:
-
Import Player element:
-
Start using it!
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 |
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.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b new-feature
- Commit your changes:
git commit -m 'Add some awesomeness'
- Push to the branch:
git push origin new-feature
- Submit a pull request!
License
MIT License © Nadi Dikun