HTML5 Audio player for Polymer 3.0-pre12 supporting playlists

<paper-music-player>

GitHub version Published on webcomponents.org npm version

HTML5 Audio player for Polymer 3.0-pre12 supporting playlists

Normal player

Demo

Mini player

Demo

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

Install

Link to this version
ImportedReleased 26 April 2018ISC License
Framework Support
Browser Independent
Install with
npm install paper-music-player"@1.0.17"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.17

Dependencies