music-component
(no summary available)
<music-component>
Run npm install
$ npm install
Properties
Properties | value (default) | description |
---|---|---|
paused | false | defines wether the song is paused or not |
songUrl | "" | determines the direction of the song |
songDuration | 0 | its set to be the duration of the song in seconds |
startingTime | 0 | determines the starting position of the song (in seconds) |
songProgress | 0 | current progresss of the song |
volume | 0 | determines the volume of the audio player |
searchArgument | "" | search String (used with search-song component) |
hiddenList | true | hide the list of songs(song-list component) |
songName | "" | name of the song to be displayed |
listRequestUrl | "" | url of the songs list (used with song-list component) |
trackUrl | "" | specific song request direction (combination of songUrl and songName) |
invisibleControls | false | determines the visibility of the controls |
Events
song-playing | only fires when the song is playing |
---|---|
song-paused | only fires once the song is paused |
slider-clicked | fires when the time slider is clicked |
dragging-changed | fires once the slider finishes dragging |
volume-changed | fires when the volume is changed |
Styling
Variable name | Type | Used |
---|---|---|
--music-player-component | Mixin | host styling of the music player |
--music-controls-buttons | Mixin | Control buttons styling |
--music-control-button-ink | Variable | Effect of control buttons once clicked |
--player-container-style | Mixin | styling of the music player container |
--player-button-container-style | Mixin | Stilyng of the control buttons container |
--music-slider-color | Variable | color of the progress and volume sliders |
--music-slider-knob-color | Variable | color of the sliders knob |
Install the Polymer-CLI
First, make sure you have the Polymer CLI installed. Then run polymer serve
to serve your element locally.
Viewing Your Element
$ polymer serve
Running Tests
$ polymer test
Your application is already set up to be tested via web-component-tester. Run polymer test
to run your application's test suite locally.
Links
Compatibility
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
- @polymer/paper-button#^3.0.1
- @polymer/paper-input#^3.0.1
- @polymer/paper-slider#^3.0.1
- @polymer/polymer#^3.0.0
- music-list-component#git+https://github.com/jusolete/music-list-component3.git#master
- Released
- 2019-01-10
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
music-component - Vaadin Add-on Directory
(no summary available)View on GitHub
music-component version 0.1.0
### Dependencies
* @polymer/paper-button#^3.0.1
* @polymer/paper-input#^3.0.1
* @polymer/paper-slider#^3.0.1
* @polymer/polymer#^3.0.0
* music-list-component#git+https://github.com/jusolete/music-list-component3.git#master
music-component version 0.1.2
### Dependencies
* @polymer/paper-button#^3.0.1
* @polymer/paper-input#^3.0.1
* @polymer/paper-slider#^3.0.1
* @polymer/polymer#^3.0.0
* music-list-component#git+https://github.com/jusolete/music-list-component3.git#master
music-component version 0.1.6
### Dependencies
* @polymer/paper-button#^3.0.1
* @polymer/paper-input#^3.0.1
* @polymer/paper-slider#^3.0.1
* @polymer/polymer#^3.0.0
* music-list-component#git+https://github.com/jusolete/music-list-component3.git#master