# `Xenia.Adapters.WaveSurferMultitrack`
[🔗](https://github.com/uzaydurdu/xenia/blob/v0.1.1/lib/xenia/adapters/wave_surfer_multitrack.ex#L1)

`<.wavesurfer_multitrack>`: a multitrack audio studio with recording, through Xenia's official adapter.

## Setup

Install the library in your app:

    npm install wavesurfer.js wavesurfer-multitrack --prefix assets

Pass it to the adapter, and register it, in `assets/js/app.js`:

```js
import { createWaveSurferMultitrack } from "xenia/wavesurfer-multitrack"

const wavesurferMultitrack = createWaveSurferMultitrack({
    load: async () => {
      const [ws, record, spectrogram, multitrack] = await Promise.all([
        import("wavesurfer.js"),
        import("wavesurfer.js/dist/plugins/record.esm.js"),
        import("wavesurfer.js/dist/plugins/spectrogram.esm.js"),
        import("wavesurfer-multitrack"),
      ])
      return {
        WaveSurfer: ws.default,
        RecordPlugin: record.default,
        SpectrogramPlugin: spectrogram.default,
        Multitrack: multitrack.default,
      }
    },
})

hooks: { ...colocatedHooks, ...createHooks({ WaveSurferMultitrack: wavesurferMultitrack }) },
```

Then `import Xenia.Adapters.WaveSurferMultitrack` in `html_helpers`, and render
`<.wavesurfer_multitrack id="...">` with the props below. Every event becomes an
`on_<event>` attribute; commands go through `Xenia.push_to/4`.

The factory returns a plain adapter object: spread it to add or change
props, commands and events, without copying the adapter.

The tag uses the adapter name `"WaveSurferMultitrack"`. To register it under
another name, render `<.xenia adapter="...">` or declare your own tag.

## Reference

  Xenia's official adapter for wavesurfer-multitrack, plus microphone recording and a
  spectrogram inspector: a small audio studio.

  Layout (inside the element Xenia hands to mount()):
    1. Multitrack timeline: server tracks plus one reserved "take" slot for
       the latest recording. Tracks can be dragged, trimmed and faded.
    2. Recording preview: a live scrolling waveform while recording.
    3. Inspector (optional): waveform + spectrogram of one selected track.

# `wavesurfer_multitrack`

## Attributes

* `id` (`:string`) (required) - Stable DOM id used for adapter commands.
* `tracks` (`:list`) - Defaults to `[]`.
* `options` (`:map`)
* `zoom` (`:any`)
* `spectrogram` (`:any`)
* `on_ready` (`:string`) - LiveView event triggered when the adapter emits :ready. Defaults to `nil`.
* `on_playback` (`:string`) - LiveView event triggered when the adapter emits :playback. Defaults to `nil`.
* `on_position` (`:string`) - LiveView event triggered when the adapter emits :position. Defaults to `nil`.
* `on_recording` (`:string`) - LiveView event triggered when the adapter emits :recording. Defaults to `nil`.
* `on_recording_progress` (`:string`) - LiveView event triggered when the adapter emits :recording_progress. Defaults to `nil`.
* `on_recorded` (`:string`) - LiveView event triggered when the adapter emits :recorded. Defaults to `nil`.
* `on_track_moved` (`:string`) - LiveView event triggered when the adapter emits :track_moved. Defaults to `nil`.
* `on_track_trimmed` (`:string`) - LiveView event triggered when the adapter emits :track_trimmed. Defaults to `nil`.
* `on_track_faded` (`:string`) - LiveView event triggered when the adapter emits :track_faded. Defaults to `nil`.
* `on_track_volume` (`:string`) - LiveView event triggered when the adapter emits :track_volume. Defaults to `nil`.
* `on_envelope_changed` (`:string`) - LiveView event triggered when the adapter emits :envelope_changed. Defaults to `nil`.
* `on_devices` (`:string`) - LiveView event triggered when the adapter emits :devices. Defaults to `nil`.
* `on_inspected` (`:string`) - LiveView event triggered when the adapter emits :inspected. Defaults to `nil`.
* `on_error` (`:string`) - LiveView event triggered when the adapter emits :error. Defaults to `nil`.
* `shortcuts` (`:map`) - Key combination => LiveView event, while focus is inside (see Xenia.Shortcuts). Defaults to `%{}`.
* `on_crash` (`:string`) - LiveView event sent if the adapter throws (see Xenia.Component). Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `loading` - Shown until the island's first mount finishes.
* `error` - Shown if the adapter throws; data-xenia-retry starts it again.

---

*Consult [api-reference.md](api-reference.md) for complete listing*