<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.