Xenia.Adapters.WaveSurferMultitrack (Xenia v0.1.1)

Copy Markdown View Source

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

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.

Summary

Functions

wavesurfer_multitrack(assigns)

Functions

wavesurfer_multitrack(assigns)

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.