Directory

paper-music-player - Vaadin Add-on Directory

HTML5 Audio player for Polymer 3.0-pre12 supporting playlists paper-music-player - Vaadin Add-on Directory
# \ [![GitHub version](https://badge.fury.io/gh/yveslange%2Fpaper-music-player.svg)](https://badge.fury.io/gh/yveslange%2Fpaper-music-player) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/yveslange/paper-music-player) [![npm version](https://badge.fury.io/js/paper-music-player.svg)](https://badge.fury.io/js/paper-music-player) HTML5 Audio player for Polymer 3.0-pre12 supporting playlists ## Normal player ![Demo](https://github.com/yveslange/paper-music-player/raw/master/demo/screenshot.png) ## Mini player ![Demo](https://github.com/yveslange/paper-music-player/raw/master/demo/screenshot-mini.png) # Features - Controls: play, pause, next, previous, volume - Playlist support - Track timers and real-time clickable progress bar - Responsive - Mobile and Desktop - Polymer 3.0 ready - Support background play (Android, iOS) ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally. Then you can import and use the player in your application: ```js // Don't forget that this component was written using Polymer 3.0-pre.12 import '/paper-music-player/paper-music-player.js'; ``` ```html ``` A `playlist` is an array composed of objects containing the title and the filename: ```js var playlist = [ {title: '…', file: 'my-files/track-1.mp3', img: 'my-files/some-artwork.png'}, {title: '…', file: 'my-files/track-2.mp3'}, …] ``` ## Viewing Your Element ``` $ polymer serve ``` # Credits - Tracks: youtube no license channel - Animation: SiriwaveJS