paper-music-player v1.0.19

\<paper-music-player>

HTML5 Audio player for Polymer 3.0-pre12 supporting playlists

Normal player

Mini player

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 and npm (packaged with Node.js) 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:

// Don't forget that this component was written using Polymer 3.0-pre.12
import '/paper-music-player/paper-music-player.js';

<!-- use it in a template or directly in the HTML -->
<paper-music-player playlist="[[playlist]]" mini></paper-music-player>

A playlist is an array composed of objects containing the title and the filename:

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