Directory

← Back

music-component

(no summary available)

Author

Contributors

Rating

Build Status

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

Compatibility

(Loading compatibility data...)

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
2019-01-10
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent
Online