Contact us Create app

Directory

← Back

paper-music-player

HTML5 Audio player for Polymer 3.0-pre12 supporting playlists

Author

Rating

Links

Popularity

<100

<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

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2018-04-26
Maturity
IMPORTED
License
ISC License

Compatibility

Framework
Browser
Browser Independent

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
View on NPM
View on GitHub

paper-music-player version 1.0.17
### Dependencies

Online