VioPlayer

A standalone Angular audio player component (<vio-player>) with playlist support, shuffle/repeat modes, mute, and volume control.

Usage

<vio-player [songs]="songs" [startIndex]="0" [initialMode]="'shuffle'" [showPlaylist]="true" [mute]="false" [volume]="20"></vio-player>

Inputs

| Input | Type | Default | Description | | -------------- | ----------------------- | ----------- | ---------------------------------------- | | songs | Song[] | [] | The playlist to load, in order. | | startIndex | number | 0 | Index of the song to start playing from. | | initialMode | 'shuffle' \| 'repeat' | 'shuffle' | Initial playback mode. | | showPlaylist | boolean | true | Whether the playlist panel is visible. | | mute | boolean | false | Starts the player muted. | | volume | number | 20 | Initial volume level (0-100). |

Song shape

interface Song {
  url: string;
  name: string;
  artist: string;
  coverImageUrl: string;
  genre: string;
}

Theming

VioPlayer is styled entirely with CSS custom properties, so it can be re-themed from the host application without overriding component styles. Set any of the following on the vio-player element (or an ancestor); each falls back to a sensible default if unset.

| CSS variable | Default | Affects | | -------------------------------- | -------------------- | ------------------------------------------------------------ | | --vio-bg-color | #242424 | Player bar background. | | --vio-text-color | #d7d7d7 | Player bar text (also default for time). | | --vio-accent-color | #84579e | Slider thumb; default accent for the currently playing song. | | --vio-time-color | --vio-text-color | Current time / duration labels. | | --vio-btn-bg-color | transparent | Control button background. | | --vio-btn-hover-bg-color | transparent | Control button background on hover. | | --vio-btn-icon-color | #f2f2f2 | Control button icons. | | --vio-cover-size | 50px | Cover art size in the player bar. | | --vio-player-song-title-color | #f2f2f2 | Song title in the player bar. | | --vio-player-song-artist-color | #b3b3b3 | Song artist in the player bar. | | --vio-playlist-bg-color | #ffffff | Playlist panel background. | | --vio-playing-bg-color | #f2f2f2 | Highlight background for the playing row. | | --vio-playing-text-color | --vio-accent-color | Title/genre color for the playing row. | | --vio-song-border-color | #f2f2f2 | Divider between playlist rows. | | --vio-song-info-color | #666666 | Playlist row base text color. | | --vio-song-cover-size | 30px | Cover art size in playlist rows. | | --vio-song-number-color | #999999 | Track number in playlist rows. | | --vio-song-artist-color | #999999 | Artist name in playlist rows. | | --vio-song-title-color | #333333 | Track title in playlist rows. | | --vio-song-genre-color | #333333 | Genre label in playlist rows. |

Changelog

1.22.2

• Fixed a broken npm publish: the package now ships a proper ng-packagr build (FESM bundles + type declarations) instead of raw .ts source, and package.json includes the main, module, typings, and exports fields required for consuming apps to resolve the library.

Code scaffolding

Run ng generate component component-name --project vio-player to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project vio-player.

Note: Don't forget to add --project vio-player or else it will be added to the default project in your angular.json file.

Build

Run ng build vio-player to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build vio-player, go to the dist folder cd dist/vio-player and run npm publish.

Running unit tests

Run ng test vio-player to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.