# stemplayer-js
A Stem Player web component
**Mixins:** ResponsiveMixin
## Properties
| Property | Attribute | Modifiers | Type | Default | Description |
|----------------------|----------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
| `audioContext` | `audioContext` | | `object` | | Inject a pre instantiated AudioContext |
| `audioDuration` | `audioDuration` | | | | |
| `autoplay` | `autoplay` | | `boolean` | false | Whether to (attempt) autoplay |
| `collapsed` | `collapsed` | | `boolean` | false | |
| `controlsComponents` | | readonly | `array` | | |
| `currentTime` | | | `number` | | Set the curentTime of playback, seeking to that time. |
| `destination` | `destination` | | `object` | | Inject a pre instantiated destination for the audio context to use |
| `duration` | `duration` | | `number` | | overrides the duration |
| `isLoading` | `isLoading` | | | | |
| `lockRegions` | `lockRegions` | | `boolean` | false | Enable locking for the region selection |
| `loop` | `loop` | | `boolean` | false | Allows looping (experimental) |
| `noKeyboardEvents` | `no-keyboard-events` | | `boolean` | false | Controls the player by keyboard events (e.g. space = start/pause) |
| `offset` | `offset` | | `number` | | the offset |
| `pct` | | | `number` | | Sets the currentTime to a pct of total duration, seeking to that time |
| `pixelsPerSecond` | `pixelsPerSecond` | | | 0 | Pixels per second for waveform rendering (calculated) |
| `playerState` | | | `object` | {"currentTime":0,"currentPct":0,"duration":0,"isPlaying":false,"loop":false,"collapsed":false,"peaks":null} | |
| `regionDuration` | `regionDuration` | | | | |
| `regionOffset` | `regionOffset` | | | | |
| `regions` | `regions` | | `boolean` | false | Enable region selection |
| `slottedElements` | | readonly | `array` | | |
| `state` | | readonly | `{ state: any; currentTime: any; offset: any; duration: any; stems: { id: any; src: any; waveform: any; volume: any; muted: any; solo: any; }[]; }` | | Exports the current state of the player |
| `stemComponents` | | readonly | `array` | | Get the stem componenents |
| `uiUpdateInterval` | `ui-update-interval` | | `number` | 250 | How often the UI should update during playback, in milliseconds.
Defaults to 250ms (approximately 4 times per second). Controls both the
player state updates and the timeupdate event emission rate. |
| `zoom` | `zoom` | | `number` | 1 | Zoom waveform |
## Methods
| Method | Type | Description |
|-------------------------------|-------------------------|--------------------------------------------------|
| `#getLargeScreenTpl` | `(): TemplateResult<1>` | |
| `#getSmallScreenTpl` | `(): TemplateResult<1>` | |
| `#handleKeypress` | `(e: any): void` | |
| `#loadStem` | `(e: any): void` | |
| `#onRegionUpdate` | `(e: any): void` | |
| `#onToggleCollapse` | `(): void` | |
| `#onToggleLoop` | `(): void` | |
| `#recalculatePixelsPerSecond` | `(): void` | |
| `destroy` | `(): void` | |
| `pause` | `(): any` | Pause playback |
| `play` | `(): any` | Start playback |
| `recalculateDisplayMode` | `(): void` | Recalculate display mode (public API for manual recalculation) |
## Events
| Event | Type | Description |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `end` | | Fires when the player reaches the end of the playback |
| `loading-end` | | Fires when the player completes loading data |
| `loading-start` | | Fires when the player starts loading data |
| `pause` | | Fires when the player pauses playback |
| `peaks` | `CustomEvent<{ peaks: any; }>` | |
| `resize` | | |
| `seek` | | Fires when the player seeks |
| `start` | | Fires when the player starts playing |
| `timeupdate` | `CustomEvent<{ t: any; pct: any; remaining: any; act: any; }>` | Fires the player progresses |
## Slots
| Name | Description |
|----------|-------------------------|
| | The default (body) slot |
| `footer` | |
| `header` | |
## CSS Custom Properties
| Property | Default |
|-------------------------------------------------|--------------------------------------------------|
| `--stemplayer-js-background-color` | "black" |
| `--stemplayer-js-brand-color` | "rgb(1, 164, 179)" |
| `--stemplayer-js-color` | "rgb(220, 220, 220)" |
| `--stemplayer-js-font-family` | "'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif" |
| `--stemplayer-js-font-size` | "16px" |
| `--stemplayer-js-grid-base` | "1.5rem" |
| `--stemplayer-js-max-height` | "auto" |
| `--stemplayer-js-progress-background-color` | "rgba(255, 255, 255, 1)" |
| `--stemplayer-js-progress-mix-blend-mode` | "overlay" |
| `--stemplayer-js-row-controls-background-color` | "black" |
| `--stemplayer-js-row-end-background-color` | "black" |
| `--stemplayer-js-row-height` | "4.5rem" |
| `--stemplayer-js-waveform-bar-gap` | |
| `--stemplayer-js-waveform-bar-width` | |
| `--stemplayer-js-waveform-color` | |
| `--stemplayer-js-waveform-pixel-ratio` | |
# stemplayer-js-controls
A component to render a single stem
**Mixins:** WaveformHostMixin, PlayerStateConsumerMixin, ResponsiveConsumerMixin
## Properties
| Property | Attribute | Type | Default | Description |
|---------------|---------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `collapsed` | | | | |
| `controls` | `controls` | `string` | ["playpause","loop","progress","duration","time"] | The controls that are enables |
| `currentPct` | `currentPct` | `number` | | The percentage of the current time |
| `currentTime` | `currentTime` | `number` | | The current time of playback |
| `duration` | `duration` | `number` | | The duration of the track |
| `isPlaying` | `isPlaying` | `boolean` | | The playing state |
| `label` | `label` | `string` | | The label to display |
| `loop` | `loop` | `boolean` | | Whether the loop is toggled on or off |
| `peaks` | `peaks` | `object` | | The peaks data that are to be used for displaying the waveform |
## Methods
| Method | Type | Description |
|---------------------|--------------------------------------------------|--------------------------------------------------|
| `#onZoominClick` | `(): void` | |
| `#onZoomoutClick` | `(): void` | |
| `#renderControl` | `(value: any, mandatory: any): "" \| TemplateResult<1>` | |
| `#toggleLoop` | `(e: any): void` | |
| `isControlEnabled` | `(value: any): boolean` | |
| `renderLargeScreen` | `(): TemplateResult<1>` | |
| `renderSmallScreen` | `(): TemplateResult<1>` | |
| `updateProgress` | `(val: any): void` | Called when currentPct is updated so that subclasses can directly update
their UI controls without triggering a Lit re-render. |
## Events
| Event | Type |
|---------------------|-----------------------|
| `controls:collapse` | |
| `controls:download` | |
| `controls:loop` | `CustomEvent` |
| `controls:pause` | |
| `controls:play` | |
| `controls:seek` | `CustomEvent` |
| `controls:seeking` | `CustomEvent` |
| `controls:zoom:in` | |
| `controls:zoom:out` | |
## CSS Custom Properties
| Property |
|---------------------------------------------|
| `--stemplayer-js-controls-background-color` |
| `--stemplayer-js-controls-color` |
# stemplayer-js-stem
A component to render a single stem
**Mixins:** WaveformHostMixin, PlayerStateConsumerMixin, ResponsiveConsumerMixin
## Properties
| Property | Attribute | Modifiers | Type | Default | Description |
|---------------------|---------------------|-----------|-----------|---------|------------------------------------|
| `currentPct` | `currentPct` | | `number` | | The percentage of the current time |
| `duration` | `duration` | | `number` | | The duration of the track |
| `label` | `label` | | `string` | | The label to display |
| `muted` | `muted` | | `boolean` | | |
| `peaks` | | readonly | `array` | | |
| `solo` | `solo` | | `string` | "off" | |
| `src` | `src` | | `string` | | The url of the audio file |
| `volume` | `volume` | | `number` | | Set the volume |
| `waveColor` | `waveColor` | | `string` | | The colour of the waveform |
| `waveProgressColor` | `waveProgressColor` | | `string` | | The wave progress colour |
| `waveform` | `waveform` | | `string` | | The url of the waveform file |
## Methods
| Method | Type | Description |
|---------------------|------------------------------------|--------------------------------------------------|
| `load` | `(controller: any): Promise` | |
| `renderLargeScreen` | `(): TemplateResult<1>` | |
| `renderSmallScreen` | `(): TemplateResult<1>` | |
| `requestLoad` | `(): void` | When the src changes, trigger a request to reload the stem (in the context of the player) |
| `unload` | `(): void` | |
| `updateProgress` | `(val: any): void` | Called when currentPct is updated so that subclasses can directly update
their UI controls without triggering a Lit re-render. |
## Events
| Event | Type |
|---------------------|--------------------|
| `stem:load:end` | |
| `stem:load:error` | `CustomEvent` |
| `stem:load:request` | |
| `stem:load:start` | |
# stemplayer-js-workspace
An area that represents the timeline providing functionality to select regions
**Mixins:** PlayerStateConsumerMixin, ResponsiveConsumerMixin
## Properties
| Property | Modifiers | Type | Description |
|-----------------|-----------|-----------------------------------------|--------------------------------------------------|
| `dragState` | readonly | `{ offset: number; duration: number; }` | Gets the current selection state.
When a handle is being dragged, we return the public properties
(which are updated by the handle-drag code). Otherwise, we compute
the state from the normal region drag selection. |
| `horizon` | readonly | `{ left: any; right: number; }` | The horizon represents the limit in which mouse events matter. It coincides with the area where the waveforms are rendered
We do not simply render an absolutely positioned overlay and listen to events on that element, since this would disrupt the normal
event paths, and would prevent us from e.g. listening to click events on a inner element such as a stem. |
| `waveformWidth` | readonly | `number` | |
## Methods
| Method | Type |
|----------------------|--------------------------------------------------|
| `#handleClick` | `(e: any): void` |
| `#onDeselectClick` | `(e: any): void` |
| `#onMouseDown` | `(e: any): void` |
| `#onMouseMove` | `(e: any): void` |
| `#onMouseOut` | `(): void` |
| `#onMouseUp` | `(): void` |
| `#onRegionMouseDown` | `(e: any): void` |
| `resolveOffsets` | `(e: any): { offsetX: number; offsetWidth: number; offsetXRelativeToParent: number; }` |
## Events
| Event | Type |
|---------------------|--------------------------------------------------|
| `region:change` | `CustomEvent<{ offset: number; duration: number; }>` |
| `region:hover` | `CustomEvent<{ offset: number; duration: number; }>` |
| `region:pre-update` | `CustomEvent<{ offset: number; duration: number; }>` |
| `region:seek` | `CustomEvent` |
| `region:update` | `CustomEvent<{ offset: number; duration: number; }>` |