Wavesurfer.js

https://wavesurfer.xyz/docs
Admin
Wavesurfer.js is an interactive waveform rendering and audio playback library for web applications,...
Tokens:33,013
Snippets:343
Trust Score:7.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://wavesurfer.xyz/docs/index.html

Start the TypeScript compiler in watch mode and launch an HTTP server for live development.

```bash
yarn start

```

--------------------------------

### Install Dev Dependencies

Source: https://wavesurfer.xyz/docs/index.html

Install development dependencies using yarn.

```bash
yarn

```

--------------------------------

### Install wavesurfer.js via npm

Source: https://wavesurfer.xyz/docs/index.html

Install the wavesurfer.js package using npm for use in your project.

```bash
npm install --save wavesurfer.js
Copy
```

--------------------------------

### play

Source: https://wavesurfer.xyz/docs/classes/wavesurfer.default.html

Start playing the audio.

```APIDOC
## play

### Description
Start playing the audio.

### Method
POST

### Endpoint
wavesurfer.play(start?, end?)

### Parameters
#### Path Parameters
- **start** (number) - Optional - The time to start playing from.
- **end** (number) - Optional - The time to stop playing at.

### Returns
Promise<void>
```

--------------------------------

### play

Source: https://wavesurfer.xyz/docs/methods

Start or resume audio playback. Can specify a start and end time.

```APIDOC
## play

### Description
Start playing the audio.

### Method
POST

### Endpoint
/play

### Parameters
#### Request Body
- **start** (number) - Optional - The time to start playback from.
- **end** (number) - Optional - The time to end playback at.
```

--------------------------------

### getVolume

Source: https://wavesurfer.xyz/docs/methods

Get the current audio volume level.

```APIDOC
## getVolume

### Description
Get the audio volume.

### Method
GET

### Endpoint
/volume

### Returns
- **number**: The current volume level (typically between 0 and 1).
```

--------------------------------

### Get Available Audio Devices

Source: https://wavesurfer.xyz/docs/classes/plugins_record.default

Retrieves a list of all available audio input devices (microphones) on the user's system. This is useful for selecting a specific microphone for recording.

```APIDOC
## getAvailableAudioDevices

### Description
Get a list of available audio devices. You can use this to get the device ID of the microphone to use with the startMic and startRecording methods. Will return an empty array if the browser doesn't support the MediaDevices API or if the user has not granted access to the microphone. You can ask for permission to the microphone by calling startMic.

### Method
`getAvailableAudioDevices(): Promise<MediaDeviceInfo[]>`

### Returns Promise<MediaDeviceInfo[]>
```

--------------------------------

### getWrapper

Source: https://wavesurfer.xyz/docs/classes/wavesurfer.default.html

For plugins only: get the waveform wrapper div.

```APIDOC
## getWrapper

### Description
For plugins only: get the waveform wrapper div.

### Method
GET

### Endpoint
wavesurfer.getWrapper()

### Returns
HTMLElement
```

--------------------------------

### getSrc

Source: https://wavesurfer.xyz/docs/methods

Get the source URL of the audio file currently loaded.

```APIDOC
## getSrc

### Description
Get the source URL of the audio.

### Method
GET

### Endpoint
/src

### Returns
- **string**: The source URL of the audio.
```

--------------------------------

### setScrollTime

Source: https://wavesurfer.xyz/docs/methods

Moves the start of the viewing window to a specific time in the audio. The time is provided in seconds.

```APIDOC
## setScrollTime

### Description
Move the start of the viewing window to a specific time in the audio (in seconds).

### Method
`setScrollTime(time: number): void`

### Parameters
#### Path Parameters
- **time** (number) - Required - The time in seconds to scroll to.
```

--------------------------------

### Run Test Suite

Source: https://wavesurfer.xyz/docs/index.html

Launch the test suite locally after building the project.

```bash
yarn cypress

```

--------------------------------

### Create a wavesurfer instance with options

Source: https://wavesurfer.xyz/docs/index.html

Instantiate wavesurfer.js with configuration options like container, colors, and audio URL.

```javascript
const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})
Copy
```

--------------------------------

### Build Project for Tests

Source: https://wavesurfer.xyz/docs/index.html

Build the project before running the test suite locally.

```bash
yarn build

```

--------------------------------

### getPlaybackRate

Source: https://wavesurfer.xyz/docs/methods

Gets the current playback speed.

```APIDOC
## getPlaybackRate

### Description
Get the playback speed.

### Method
`getPlaybackRate(): number`

### Returns
`number` - The current playback rate.
```

--------------------------------

### Basic WaveSurfer.js Initialization

Source: https://wavesurfer.xyz/docs/wavesurfer.default.html

This snippet shows how to create a basic wavesurfer.js instance, specifying the container, colors, and audio URL. It also includes an event listener to play audio on interaction.

```html
<div id="waveform">
  <!-- the waveform will be rendered here -->
</div>
```

```javascript
import WaveSurfer from 'https://cdn.jsdelivr.net/npm/wavesurfer.js@7/dist/wavesurfer.esm.js'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3'
})

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})
```

--------------------------------

### create

Source: https://wavesurfer.xyz/docs/classes/plugins_spectrogram.default.html

Creates a new instance of the Spectrogram plugin with optional configuration options.

```APIDOC
## create create

### Description
Creates a new instance of the Spectrogram plugin.

### Method
create(options?: SpectrogramPluginOptions): default

### Parameters
* **options** (Optional, SpectrogramPluginOptions) - An object containing configuration options for the plugin.

### Returns
* **default** - A new instance of the Spectrogram plugin.
```

--------------------------------

### getDuration

Source: https://wavesurfer.xyz/docs/methods

Gets the total duration of the audio in seconds.

```APIDOC
## getDuration

### Description
Get the duration of the audio in seconds.

### Method
`getDuration(): number`

### Returns
`number` - The total duration of the audio in seconds.
```

--------------------------------

### getCurrentTime

Source: https://wavesurfer.xyz/docs/methods

Gets the current playback time in seconds.

```APIDOC
## getCurrentTime

### Description
Get the current audio position in seconds.

### Method
`getCurrentTime(): number`

### Returns
`number` - The current playback time in seconds.
```

--------------------------------

### constructor

Source: https://wavesurfer.xyz/docs/methods

Creates a new WaveSurfer instance with the provided options.

```APIDOC
## constructor

### Description
Create a new WaveSurfer instance.

### Method
`constructor(options: WaveSurferOptions): default`

### Parameters
#### Parameters
- **options** (WaveSurferOptions) - Required - Configuration options for the WaveSurfer instance.
```

--------------------------------

### getScroll

Source: https://wavesurfer.xyz/docs/methods

Get the current scroll position of the waveform in pixels.

```APIDOC
## getScroll

### Description
Get the current scroll position in pixels.

### Method
GET

### Endpoint
/scroll

### Returns
- **number**: The current scroll position in pixels.
```

--------------------------------

### create

Source: https://wavesurfer.xyz/docs/classes/plugins_spectrogram.default

Creates a new instance of the Spectrogram plugin with optional configuration.

```APIDOC
## create

### Description
Creates a new instance of the Spectrogram plugin. Accepts optional configuration options.

### Method
(Static method)

### Parameters
#### Path Parameters
(None)

#### Query Parameters
(None)

#### Request Body
(None)

### Parameters
* **options** (Optional SpectrogramPluginOptions) - Configuration options for the spectrogram plugin.

### Request Example
(Not specified)

### Response
#### Success Response (200)
(Not specified, returns default instance)

#### Response Example
(Not specified)
```

--------------------------------

### Constructor

Source: https://wavesurfer.xyz/docs/classes/plugins_envelope.default.html

Creates a new instance of the Envelope plugin.

```APIDOC
## new default(options)

### Description
Create a new Envelope plugin.

### Parameters
* **options** (EnvelopePluginOptions) - Options for the Envelope plugin.

### Returns
default - The new Envelope plugin instance.
```

--------------------------------

### create

Source: https://wavesurfer.xyz/docs/methods

Creates a new instance of WaveSurfer with the specified options. This is a static method used for initialization.

```APIDOC
## create

### Description
Create a new WaveSurfer instance.

### Method
`create(options: WaveSurferOptions): default`

### Parameters
#### Path Parameters
- **options** (WaveSurferOptions) - Required - Configuration options for the new WaveSurfer instance.
```

--------------------------------

### getWrapper

Source: https://wavesurfer.xyz/docs/methods

Get the waveform wrapper DOM element. Primarily for plugin use.

```APIDOC
## getWrapper

### Description
For plugins only: get the waveform wrapper div.

### Method
GET

### Endpoint
/wrapper

### Returns
- **HTMLElement**: The waveform wrapper DOM element.
```

--------------------------------

### Create Record Plugin Instance

Source: https://wavesurfer.xyz/docs/classes/plugins_record.default

Creates a new instance of the Record plugin. This is the entry point for using the plugin's recording functionalities.

```APIDOC
## create

### Description
Create an instance of the Record plugin.

### Method
`create(options?: RecordPluginOptions): default`

### Parameters
#### Path Parameters
- **options** (RecordPluginOptions) - Optional - Configuration options for the Record plugin.

### Returns default
```

--------------------------------

### getWidth

Source: https://wavesurfer.xyz/docs/methods

Get the client width of the scroll container. Primarily for plugin use.

```APIDOC
## getWidth

### Description
For plugins only: get the scroll container client width.

### Method
GET

### Endpoint
/width

### Returns
- **number**: The client width of the scroll container.
```

--------------------------------

### MinimapPlugin Static Create Method

Source: https://wavesurfer.xyz/docs/classes/plugins_minimap.default

A static method to create and initialize a Minimap plugin instance with the provided options.

```APIDOC
## Static create

### Description
Creates and returns a new instance of the Minimap plugin.

### Parameters
* **options** (MinimapPluginOptions) - Configuration options for the Minimap plugin.

### Returns
* default - The newly created Minimap plugin instance.
```

--------------------------------

### create

Source: https://wavesurfer.xyz/docs/classes/plugins_envelope.default.html

Static method to create a new Envelope plugin instance.

```APIDOC
## create(options)

### Description
Static factory method to create a new Envelope plugin.

### Parameters
* **options** (EnvelopePluginOptions) - Options for the Envelope plugin.

### Returns
default - A new instance of the Envelope plugin.
```

--------------------------------

### WaveSurferOptions

Source: https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferOptions

Configuration options for initializing a WaveSurfer.js instance. These options control various aspects of the waveform's appearance, behavior, and playback.

```APIDOC
## Type alias WaveSurferOptions

WaveSurferOptions: {
  audioRate?: number;
  autoCenter?: boolean;
  autoScroll?: boolean;
  autoplay?: boolean;
  backend?: "WebAudio" | "MediaElement";
  barAlign?: "top" | "bottom";
  barGap?: number;
  barHeight?: number;
  barRadius?: number;
  barWidth?: number;
  blobMimeType?: string;
  container: HTMLElement | string;
  cspNonce?: string;
  cursorColor?: string;
  cursorWidth?: number;
  dragToSeek?: boolean | {
    debounceTime: number;
  };
  duration?: number;
  fetchParams?: RequestInit;
  fillParent?: boolean;
  height?: number | "auto";
  hideScrollbar?: boolean;
  interact?: boolean;
  media?: HTMLMediaElement;
  mediaControls?: boolean;
  minPxPerSec?: number;
  normalize?: boolean;
  peaks?: (Float32Array | number[])[];
  plugins?: GenericPlugin[];
  progressColor?: string | string[] | CanvasGradient;
  renderFunction?: ((peaks, ctx) => void);
  sampleRate?: number;
  splitChannels?: (Partial<WaveSurferOptions> & {
    overlay?: boolean;
  })[];
  url?: string;
  waveColor?: string | string[] | CanvasGradient;
  width?: number | string;
}

### Type declaration

* ##### `Optional` audioRate?: number
  Audio rate, i.e. the playback speed
* ##### `Optional` autoCenter?: boolean
  If autoScroll is enabled, keep the cursor in the center of the waveform during playback
* ##### `Optional` autoScroll?: boolean
  Automatically scroll the container to keep the current position in viewport
* ##### `Optional` autoplay?: boolean
  Play the audio on load
* ##### `Optional` backend?: "WebAudio" | "MediaElement"
  Playback "backend" to use, defaults to MediaElement
* ##### `Optional` barAlign?: "top" | "bottom"
  Vertical bar alignment
* ##### `Optional` barGap?: number
  Spacing between bars in pixels
* ##### `Optional` barHeight?: number
  A vertical scaling factor for the waveform
* ##### `Optional` barRadius?: number
  Rounded borders for bars
* ##### `Optional` barWidth?: number
  If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂
* ##### `Optional` blobMimeType?: string
  Override the Blob MIME type
* ##### container: HTMLElement | string
  Required: an HTML element or selector where the waveform will be rendered
* ##### `Optional` cspNonce?: string
  Nonce for CSP if necessary
* ##### `Optional` cursorColor?: string
  The color of the playback cursor
* ##### `Optional` cursorWidth?: number
  The cursor width
* ##### `Optional` dragToSeek?: boolean | {
  debounceTime: number;
}
  Allow to drag the cursor to seek to a new position. If an object with `debounceTime` is provided instead then `dragToSeek` will also be true. If `true` the default is 200ms
* ##### `Optional` duration?: number
  Pre-computed audio duration in seconds
* ##### `Optional` fetchParams?: RequestInit
  Options to pass to the fetch method
* ##### `Optional` fillParent?: boolean
  Stretch the waveform to fill the container, true by default
* ##### `Optional` height?: number | "auto"
  The height of the waveform in pixels, or "auto" to fill the container height
* ##### `Optional` hideScrollbar?: boolean
  Hide the scrollbar
* ##### `Optional` interact?: boolean
  Pass false to disable clicks on the waveform
* ##### `Optional` media?: HTMLMediaElement
  Use an existing media element instead of creating one
* ##### `Optional` mediaControls?: boolean
  Whether to show default audio element controls
* ##### `Optional` minPxPerSec?: number
  Minimum pixels per second of audio (i.e. the zoom level)
* ##### `Optional` normalize?: boolean
  Stretch the waveform to the full height
* ##### `Optional` peaks?: (Float32Array | number[])[]
  Pre-computed audio data, arrays of floats for each channel
* ##### `Optional` plugins?: GenericPlugin[]
  The list of plugins to initialize on start
* ##### `Optional` progressColor?: string | string[] | CanvasGradient
  The color of the progress mask
* ##### `Optional` renderFunction?: ((peaks, ctx) => void)
  Custom render function
    * Parameters:
        * peaks: (Float32Array | number[])[]
        * ctx: CanvasRenderingContext2D
    * Returns: void
* ##### `Optional` sampleRate?: number
  Decoding sample rate. Doesn't affect the playback. Defaults to 8000
* ##### `Optional` splitChannels?: (Partial<WaveSurferOptions> & {
  overlay?: boolean;
})[]
  Render each audio channel as a separate waveform
* ##### `Optional` url?: string
  Audio URL
* ##### `Optional` waveColor?: string | string[] | CanvasGradient
  The color of the waveform
* ##### `Optional` width?: number | string
  The width of the waveform in pixels or any CSS value; defaults to 100%
```

--------------------------------

### SpectrogramPlugin Constructor

Source: https://wavesurfer.xyz/docs/classes/plugins_spectrogram.default.html

Initializes a new instance of the Spectrogram plugin with specified options.

```APIDOC
## constructor

### Description
Initializes a new instance of the Spectrogram plugin.

### Signature
`new default(options: SpectrogramPluginOptions): default`

### Parameters
*   **options** (SpectrogramPluginOptions) - The configuration options for the spectrogram plugin.
```

--------------------------------

### Minimap Plugin Static Create Method

Source: https://wavesurfer.xyz/docs/classes/plugins_minimap.default.html

A static method to create and initialize a new Minimap plugin instance with the provided options.

```APIDOC
## create

### Description
Creates and returns a new instance of the Minimap plugin.

### Parameters
* **options** (MinimapPluginOptions) - Configuration options for the Minimap plugin.

### Returns
* default - The newly created Minimap plugin instance.
```

--------------------------------

### Record Plugin Static Methods

Source: https://wavesurfer.xyz/docs/classes/plugins_record.default.html

Static methods for creating and managing Record plugin instances and audio devices.

```APIDOC
## `Static` create
  * create(options?): default
  * Create an instance of the Record plugin.

### Parameters
#### Path Parameters
- **options** (RecordPluginOptions) - Optional - Configuration options for the Record plugin.

### Returns default

## `Static` getAvailableAudioDevices
  * getAvailableAudioDevices(): Promise<MediaDeviceInfo[]>
  * Get a list of available audio devices. You can use this to get the device ID of the microphone to use with the startMic and startRecording methods. Will return an empty array if the browser doesn't support the MediaDevices API or if the user has not granted access to the microphone. You can ask for permission to the microphone by calling startMic.

### Returns Promise<MediaDeviceInfo[]>
```

--------------------------------

### Timeline Plugin Constructors

Source: https://wavesurfer.xyz/docs/classes/plugins_timeline.default

Provides information on how to instantiate the Timeline plugin.

```APIDOC
## Constructors

### constructor
  * new default(options?): default
  * #### Parameters
    * ##### `Optional` options: TimelinePluginOptions
#### Returns default
```

--------------------------------

### create

Source: https://wavesurfer.xyz/docs/classes/plugins_regions.default.html

Creates a new instance of the RegionsPlugin. Optional configuration options can be provided.

```APIDOC
## create

### Description
Creates a new instance of the RegionsPlugin. Optional configuration options can be provided.

### Method
N/A (Static method signature provided)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "example": "No request body for static create method"
}
```

### Response
#### Success Response (default)
- **default**: The created RegionsPlugin instance.

#### Response Example
```json
{
  "example": "RegionsPlugin instance"
}
```
```

--------------------------------

### Basic Waveform Initialization

Source: https://wavesurfer.xyz/docs/wavesurfer.WaveSurferOptions.html

Initializes a basic waveform visualization using wavesurfer.js. This snippet requires an HTML container and includes basic styling and audio playback on interaction.

```html
<div id="waveform">
  <!-- the waveform will be rendered here -->
</div>
```

```javascript
import WaveSurfer from 'https://cdn.jsdelivr.net/npm/wavesurfer.js@7/dist/wavesurfer.esm.js'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})
```

--------------------------------

### loadBlob

Source: https://wavesurfer.xyz/docs/classes/wavesurfer.default.html

Load an audio blob.

```APIDOC
## loadBlob

### Description
Load an audio blob.

### Method
POST

### Endpoint
wavesurfer.loadBlob(blob, channelData?, duration?)

### Parameters
#### Path Parameters
- **blob** (Blob) - Required - The audio blob.
- **channelData** (Array<Float32Array | number[]>) - Optional - Pre-decoded audio data.
- **duration** (number) - Optional - The duration of the audio.

### Returns
Promise<void>
```

--------------------------------

### Zoom Plugin Static Create Method

Source: https://wavesurfer.xyz/docs/classes/plugins_zoom.default

A static method to create and initialize a new instance of the Zoom plugin with optional configuration.

```APIDOC
## create

### Description
Creates and returns a new instance of the Zoom plugin, optionally configured with provided options.

### Method
Static create

### Parameters
#### Path Parameters
- **options** (ZoomPluginOptions) - Optional - Configuration options for the Zoom plugin.

### Response
#### Success Response (200)
- **default** - A new instance of the Zoom plugin.
```

--------------------------------

### MinimapPlugin Methods

Source: https://wavesurfer.xyz/docs/classes/plugins_minimap.default

Provides details on the public methods available for interacting with the Minimap plugin, such as initialization, event subscription, and destruction.

```APIDOC
## Methods

### destroy

### Description
Unmounts and cleans up the Minimap plugin instance.

### Returns
* void

### emit

### Description
Emits a custom event from the Minimap plugin.

### Type Parameters
* **EventName** - The name of the event to emit, constrained to MinimapPluginEvents.

### Parameters
* **eventName** (EventName) - The name of the event.
* **...args** (...MinimapPluginEvents[EventName]) - The arguments to pass with the event.

### Returns
* void

### on

### Description
Subscribes to a specific event emitted by the Minimap plugin. Returns a function to unsubscribe.

### Type Parameters
* **EventName** - The name of the event to subscribe to.

### Parameters
* **event** (EventName) - The event to listen for.
* **listener** (EventListener<MinimapPluginEvents, EventName>) - The callback function to execute when the event is fired.
* **options?** ({ once?: boolean }) - Optional configuration, such as `once: true` to listen only one time.

### Returns
* (() => void) - A function that can be called to unsubscribe from the event.

### onInit

### Description
Callback function executed when the Minimap plugin is initialized by wavesurfer.js. Do not call manually.

### Returns
* void

### once

### Description
Subscribes to an event, but the listener will only be called the first time the event is fired.

### Type Parameters
* **EventName** - The name of the event to subscribe to.

### Parameters
* **event** (EventName) - The event to listen for.
* **listener** (EventListener<MinimapPluginEvents, EventName>) - The callback function to execute.

### Returns
* (() => void) - A function that can be called to unsubscribe from the event.

### un

### Description
Unsubscribes a listener from a specific event.

### Type Parameters
* **EventName** - The name of the event to unsubscribe from.

### Parameters
* **event** (EventName) - The event to unsubscribe from.
* **listener** (EventListener<MinimapPluginEvents, EventName>) - The listener function to remove.

### Returns
* void

### unAll

### Description
Removes all event listeners attached to the Minimap plugin.

### Returns
* void
```

--------------------------------

### load

Source: https://wavesurfer.xyz/docs/methods

Load an audio file by URL. Optionally provide pre-decoded audio data and duration.

```APIDOC
## load

### Description
Load an audio file by URL, with optional pre-decoded audio data.

### Method
POST

### Endpoint
/load

### Parameters
#### Query Parameters
- **url** (string) - Required - The URL of the audio file.
- **channelData** (Array<Float32Array | number[]>) - Optional - Pre-decoded audio data.
- **duration** (number) - Optional - The duration of the audio in seconds.
```

--------------------------------

### setOptions

Source: https://wavesurfer.xyz/docs/methods

Update WaveSurfer options and re-render the waveform.

```APIDOC
## setOptions

### Description
Set new wavesurfer options and re-render it.

### Method
PUT

### Endpoint
/options

### Parameters
#### Request Body
- **options** (Partial<WaveSurferOptions>) - Required - An object containing the options to update.
```

--------------------------------

### RegionsPlugin Constructor

Source: https://wavesurfer.xyz/docs/classes/plugins_regions.default

Creates an instance of the RegionsPlugin. This is the primary way to initialize the plugin.

```APIDOC
## new default(options?): default

### Description
Create an instance of RegionsPlugin

### Parameters
#### Path Parameters
* **options** (undefined) - Optional - Options for the plugin
```

--------------------------------

### HoverPlugin Class

Source: https://wavesurfer.xyz/docs/classes/plugins_hover.default.html

Provides documentation for the default HoverPlugin class, including its constructor, properties, and methods.

```APIDOC
## Class default

### Constructors

#### constructor

* `new default(options?: HoverPluginOptions): default`

##### Parameters

* `Optional` options: HoverPluginOptions

## Properties

### `Private` label

label: HTMLElement

### `Protected` options

options: HoverPluginOptions & {
  labelPreferLeft: boolean;
  labelSize: number;
  lineWidth: number;
  formatTimeCallback(seconds): string;
}

#### Type declaration

* labelPreferLeft: boolean
* labelSize: number
* lineWidth: number
* formatTimeCallback: function
  * formatTimeCallback(seconds): string
    * Parameters:
      * seconds: number
#### Returns string

### `Protected` subscriptions

subscriptions: (() => void)[] = []

#### Type declaration

* (): void
#### Returns void

### `Private` unsubscribe

unsubscribe: (() => void) = ...

#### Type declaration

* (): void
#### Returns void

### `Protected` `Optional` wavesurfer

wavesurfer?: default

### `Private` wrapper

wrapper: HTMLElement

## Methods

### `Private` _init

* _init(wavesurfer): void

Do not call directly, only called by WavesSurfer internally

#### Parameters

* wavesurfer: default
#### Returns void

### `Private` addUnits

* addUnits(value): string

#### Parameters

* value: string | number
#### Returns string

### destroy

* destroy(): void

Unmount

#### Returns void

### `Protected` emit

* emit<EventName>(eventName, ...args): void

Emit an event

#### Type Parameters

* EventName extends "destroy" | "hover"
#### Parameters

* eventName: EventName
* `Rest` ...args: HoverPluginEvents[EventName]
#### Returns void

### on

* on<EventName>(event, listener, options?): (() => void)

Subscribe to an event. Returns an unsubscribe function.

#### Type Parameters

* EventName extends "destroy" | "hover"
#### Parameters

* event: EventName
* listener: EventListener<HoverPluginEvents, EventName>
* `Optional` options: {
    once?: boolean;
  }
  * `Optional` once?: boolean
#### Returns (() => void)

### onInit

* onInit(): void

Called by wavesurfer, don't call manually

#### Returns void

### `Private` onPointerLeave

* onPointerLeave(): void

#### Returns void

### `Private` onPointerMove

* onPointerMove(e): void

#### Parameters

* e: PointerEvent | WheelEvent
#### Returns void

### once

* once<EventName>(event, listener): (() => void)

Subscribe to an event only once

#### Type Parameters

* EventName extends "destroy" | "hover"
#### Parameters

* event: EventName
* listener: EventListener<HoverPluginEvents, EventName>
#### Returns (() => void)

### un

* un<EventName>(event, listener): void

Unsubscribe from an event

#### Type Parameters

* EventName extends "destroy" | "hover"
#### Parameters

* event: EventName
* listener: EventListener<HoverPluginEvents, EventName>
#### Returns void

### unAll

* unAll(): void

Clear all events

#### Returns void

### `Static` create

* create(options?): default

#### Parameters

* `Optional` options: HoverPluginOptions
#### Returns default
```

--------------------------------

### Timeline Plugin Methods

Source: https://wavesurfer.xyz/docs/classes/plugins_timeline.default

Details the available methods for interacting with the Timeline plugin, such as initialization, event handling, and destruction.

```APIDOC
## Methods

### destroy
  * destroy(): void
  * Unmount
#### Returns void

### emit
  * emit<EventName>(eventName, ...args): void
  * Emit an event
#### Type Parameters
    * #### EventName extends "ready" | "destroy"
#### Parameters
    * ##### eventName: EventName
    * ##### `Rest` ...args: TimelinePluginEvents[EventName]
#### Returns void

on
  * on<EventName>(event, listener, options?): (() => void)
  * Subscribe to an event. Returns an unsubscribe function.
#### Type Parameters
    * #### EventName extends "ready" | "destroy"
#### Parameters
    * ##### event: EventName
    * ##### listener: EventListener<TimelinePluginEvents, EventName>
    * ##### `Optional` options: {   
once?: boolean;   
}
      * ##### `Optional` once?: boolean
#### Returns (() => void)
    *       * (): void
      * Subscribe to an event. Returns an unsubscribe function.
#### Returns void

### onInit
  * onInit(): void
  * Called by wavesurfer, don't call manually
#### Returns void

### once
  * once<EventName>(event, listener): (() => void)
  * Subscribe to an event only once
#### Type Parameters
    * #### EventName extends "ready" | "destroy"
#### Parameters
    * ##### event: EventName
    * ##### listener: EventListener<TimelinePluginEvents, EventName>
#### Returns (() => void)
    *       * (): void
      * Subscribe to an event only once
#### Returns void

un
  * un<EventName>(event, listener): void
  * Unsubscribe from an event
#### Type Parameters
    * #### EventName extends "ready" | "destroy"
#### Parameters
    * ##### event: EventName
    * ##### listener: EventListener<TimelinePluginEvents, EventName>
#### Returns void

unAll
  * unAll(): void
  * Clear all events
#### Returns void
```

--------------------------------

### setVolume

Source: https://wavesurfer.xyz/docs/classes/wavesurfer.default.html

Sets the audio volume.

```APIDOC
## setVolume

### Description
Set the audio volume.

### Method
wavesurfer.setVolume(volume: number): void

### Parameters
#### Path Parameters
* **volume** (number) - Required - The desired volume level.
```

--------------------------------

### registerPlugin

Source: https://wavesurfer.xyz/docs/methods

Register a WaveSurfer.js plugin with the instance.

```APIDOC
## registerPlugin

### Description
Register a wavesurfer.js plugin.

### Method
POST

### Endpoint
/plugins/register

### Parameters
#### Request Body
- **plugin** (T) - Required - The plugin instance to register.
```

--------------------------------

### Record Plugin Methods

Source: https://wavesurfer.xyz/docs/classes/plugins_record.default.html

This section outlines the public methods available on the Record plugin for controlling and querying the audio recording process.

```APIDOC
## Class default

### Constructors

#### constructor

* `new default(options: RecordPluginOptions): default`
* Create an instance of the Record plugin

#### Parameters

* `options` (RecordPluginOptions) - Required - Options for the Record plugin.

#### Returns

* `default` - An instance of the Record plugin.

### Properties

* `dataWindow` (null | Float32Array) - Private - Holds the audio data window.
* `duration` (number) - Private - The current duration of the recording.
* `isWaveformPaused` (boolean) - Private - Indicates if the waveform display is paused.
* `lastDuration` (number) - Private - The duration of the last recording segment.
* `lastStartTime` (number) - Private - The start time of the last recording segment.
* `mediaRecorder` (null | MediaRecorder) - Private - The MediaRecorder instance.
* `options` (RecordPluginOptions) - Protected - The options for the Record plugin.
* `originalOptions` (Partial<WaveSurferOptions>) - Private - Optional original WaveSurfer options.
* `stream` (null | MediaStream) - Private - The MediaStream from the microphone.
* `subscriptions` (Array<() => void>) - Protected - Array of unsubscribe functions for event listeners.
* `timer` (Timer) - Private - Timer instance for managing recording intervals.
* `wavesurfer` (default) - Protected - Optional reference to the wavesurfer instance.

### Methods

#### `_init(wavesurfer: default): void`

* Private method called internally by wavesurfer.js to initialize the plugin.

#### `applyOriginalOptionsIfNeeded(): void`

* Private method to apply original options if needed.

#### `destroy(): void`

* Destroy the plugin and release resources.

#### `emit<EventName>(eventName: EventName, ...args: RecordPluginEvents[EventName]): void`

* Emit a custom event from the plugin.

#### `getDuration(): number`

* Get the total duration of the recording in seconds.

#### `isActive(): boolean`

* Check if the plugin is currently active.

#### `isPaused(): boolean`

* Check if the recording is currently paused.

#### `isRecording(): boolean`

* Check if the audio is currently being recorded.

#### `on<EventName>(event: EventName, listener: EventListener<RecordPluginEvents, EventName>, options?: { once?: boolean }): () => void`

* Subscribe to an event. Returns a function to unsubscribe the listener.

#### `once<EventName>(event: EventName, listener: EventListener<RecordPluginEvents, EventName>): () => void`

* Subscribe to an event that will be triggered only once. Returns a function to unsubscribe the listener.

#### `pauseRecording(): void`

* Pause the current audio recording.

#### `renderMicStream(stream: MediaStream): MicStream`

* Render the microphone stream. (Note: Return type `MicStream` is not fully defined in source).

#### `resumeRecording(): void`

* Resume a paused audio recording.

#### `startMic(options?: MediaTrackConstraints): Promise<MediaStream>`

* Request access to the microphone and start monitoring incoming audio.

#### `startRecording(options?: MediaTrackConstraints): Promise<void>`

* Start recording audio from the microphone.

#### `stopMic(): void`

* Stop monitoring incoming audio from the microphone.

#### `stopRecording(): void`

* Stop the current audio recording.

#### `un<EventName>(event: EventName, listener: EventListener<RecordPluginEvents, EventName>): void`

* Unsubscribe from a specific event.
```

--------------------------------

### Minimap Plugin Methods

Source: https://wavesurfer.xyz/docs/classes/plugins_minimap.default.html

Provides an overview of the public methods available on the Minimap plugin instance for managing its lifecycle and behavior.

```APIDOC
## Methods

### destroy

### Description
Unmounts and cleans up the Minimap plugin instance.

### Returns
* void

### emit

### Description
Emits a custom event with the given name and arguments.

### Type Parameters
* **EventName** - The name of the event to emit, constrained to MinimapPluginEvents.

### Parameters
* **eventName** (EventName) - The name of the event.
* **...args** (MinimapPluginEvents[EventName]) - The arguments to pass to the event listener.

### Returns
* void

### on

### Description
Subscribes to a specific event emitted by the Minimap plugin. Returns a function to unsubscribe.

### Type Parameters
* **EventName** - The name of the event to subscribe to.

### Parameters
* **event** (EventName) - The event to listen for.
* **listener** (EventListener<MinimapPluginEvents, EventName>) - The callback function to execute when the event is fired.
* **options** (Optional) - An object containing options, such as `once`.
  * **once** (Optional, boolean) - If true, the listener will only be called once.

### Returns
* (() => void) - A function that can be called to unsubscribe the listener.

### once

### Description
Subscribes to a specific event, ensuring the listener is called only once.

### Type Parameters
* **EventName** - The name of the event to subscribe to.

### Parameters
* **event** (EventName) - The event to listen for.
* **listener** (EventListener<MinimapPluginEvents, EventName>) - The callback function to execute when the event is fired.

### Returns
* (() => void) - A function that can be called to unsubscribe the listener.

### un

### Description
Unsubscribes a specific listener from a given event.

### Type Parameters
* **EventName** - The name of the event to unsubscribe from.

### Parameters
* **event** (EventName) - The event to unsubscribe from.
* **listener** (EventListener<MinimapPluginEvents, EventName>) - The listener function to remove.

### Returns
* void

### unAll

### Description
Removes all event listeners subscribed to the Minimap plugin.

### Returns
* void
```

--------------------------------

### EnvelopePlugin constructor

Source: https://wavesurfer.xyz/docs/classes/plugins_envelope.default

Creates a new instance of the Envelope plugin. It takes an options object to configure the plugin's behavior.

```APIDOC
## constructor

### Description
Create a new Envelope plugin.

### Parameters
* **options** (EnvelopePluginOptions) - Configuration options for the plugin.

### Returns
default - The newly created Envelope plugin instance.
```

--------------------------------

### TimelinePluginOptions

Source: https://wavesurfer.xyz/docs/types/plugins_timeline.TimelinePluginOptions.html

Configuration options for the TimelinePlugin.

```APIDOC
## TimelinePluginOptions

### Description
Configuration options for the TimelinePlugin.

### Properties

*   **container** (HTMLElement | string) - Optional - HTML element or selector for a timeline container, defaults to wavesufer's container.
*   **duration** (number) - Optional - The duration of the timeline in seconds, defaults to wavesurfer's duration.
*   **formatTimeCallback** (function(seconds: number): string) - Optional - A callback function to format the time into a suitable label. It takes seconds (number) as input and returns a string.
*   **height** (number) - Optional - The height of the timeline in pixels, defaults to 20.
*   **insertPosition** (InsertPosition) - Optional - Specifies the position to insert the timeline, e.g., 'beforebegin' to insert on top of the waveform.
*   **primaryLabelInterval** (number) - Optional - Interval between primary numeric labels in seconds.
*   **primaryLabelSpacing** (number) - Optional - Interval between primary numeric labels in timeIntervals (i.e., notch count).
*   **secondaryLabelInterval** (number) - Optional - Interval between secondary numeric labels in seconds.
*   **secondaryLabelOpacity** (number) - Optional - Opacity of the secondary labels, defaults to 0.25.
*   **secondaryLabelSpacing** (number) - Optional - Interval between secondary numeric labels in timeIntervals (i.e., notch count).
*   **style** (Partial<CSSStyleDeclaration> | string) - Optional - Custom inline style to apply to the container.
*   **timeInterval** (number) - Optional - Interval between ticks in seconds.
*   **timeOffset** (number) - Optional - Offset in seconds for the numeric labels.
```

--------------------------------

### Include wavesurfer.js via UMD script tag

Source: https://wavesurfer.xyz/docs/index.html

Include wavesurfer.js using a script tag to export it as a global WaveSurfer variable.

```html
<script src="https://unpkg.com/wavesurfer.js@7"></script>
Copy
```

--------------------------------

### RecordPluginOptions

Source: https://wavesurfer.xyz/docs/types/plugins_record.RecordPluginOptions.html

Configuration options for the Record plugin, allowing customization of audio recording parameters and waveform display during recording.

```APIDOC
## RecordPluginOptions

### Description
Configuration options for the Record plugin.

### Properties
#### `Optional` audioBitsPerSecond?: MediaRecorderOptions["audioBitsPerSecond"]
The audio bitrate to use when recording audio, defaults to 128000 to avoid a VBR encoding.

#### `Optional` continuousWaveform?: boolean
Accumulate and render the waveform data as the audio is being recorded, false by default.

#### `Optional` continuousWaveformDuration?: number
The duration of the continuous waveform, in seconds.

#### `Optional` mediaRecorderTimeslice?: number
The timeslice to use for the media recorder.

#### `Optional` mimeType?: MediaRecorderOptions["mimeType"]
The MIME type to use when recording audio.

#### `Optional` renderRecordedAudio?: boolean
Whether to render the recorded audio at the end, true by default.

#### `Optional` scrollingWaveform?: boolean
Whether to render the scrolling waveform, false by default.

#### `Optional` scrollingWaveformWindow?: number
The duration of the scrolling waveform window, defaults to 5 seconds.
```

--------------------------------

### Zoom Plugin Constructor

Source: https://wavesurfer.xyz/docs/classes/plugins_zoom.default.html

Information about the constructor for the Zoom plugin.

```APIDOC
## Constructors

### constructor
  * new default(options?): default
  * #### Parameters
    * ##### `Optional` options: ZoomPluginOptions
  * #### Returns default
```

--------------------------------

### Import wavesurfer.js Regions plugin (ES Modules)

Source: https://wavesurfer.xyz/docs/index.html

Import the Regions plugin when using ES modules.

```javascript
import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js'
Copy
```

--------------------------------

### on

Source: https://wavesurfer.xyz/docs/classes/plugins_envelope.default.html

Subscribes a listener to a specific event, with an option to only trigger once.

```APIDOC
## on<EventName>(event, listener, options?)

### Description
Subscribe to an event. Returns an unsubscribe function.

### Type Parameters
* **EventName** - The name of the event to subscribe to, constrained to "destroy", "volume-change", or "points-change".

### Parameters
* **event** (EventName) - The event to subscribe to.
* **listener** (EventListener<EnvelopePluginEvents, EventName>) - The callback function to execute when the event is fired.
* **`Optional` options** - Optional configuration for the subscription.
    * **`Optional` once** (boolean) - If true, the listener will only be called once.

### Returns
(() => void) - A function to unsubscribe the listener.
```

--------------------------------

### Timeline Plugin Constructor

Source: https://wavesurfer.xyz/docs/classes/plugins_timeline.default.html

Instantiates the Timeline plugin. It can be configured with various options to customize its appearance and behavior.

```APIDOC
## new default(options?)

### Description
Instantiates the Timeline plugin.

### Parameters
* **options** (TimelinePluginOptions) - Optional - Configuration options for the timeline.

### Returns
default - An instance of the Timeline plugin.
```

--------------------------------

### setTime

Source: https://wavesurfer.xyz/docs/methods

Jumps to a specific time in the audio. The time is provided in seconds.

```APIDOC
## setTime

### Description
Jump to a specific time in the audio (in seconds).

### Method
`setTime(time: number): void`

### Parameters
#### Path Parameters
- **time** (number) - Required - The time in seconds to jump to.
```

--------------------------------

### loadBlob

Source: https://wavesurfer.xyz/docs/methods

Load an audio file from a Blob object. Optionally provide channel data and duration.

```APIDOC
## loadBlob

### Description
Load an audio blob.

### Method
POST

### Endpoint
/load-blob

### Parameters
#### Request Body
- **blob** (Blob) - Required - The audio blob to load.
- **channelData** (Array<Float32Array | number[]>) - Optional - Pre-decoded audio data.
- **duration** (number) - Optional - The duration of the audio in seconds.
```

--------------------------------

### Style wavesurfer.js elements using CSS ::part()

Source: https://wavesurfer.xyz/docs/index.html

Style specific parts of the wavesurfer.js Shadow DOM using the ::part() pseudo-selector.

```css
#waveform ::part(cursor):before {
  content: '🏄';
}
#waveform ::part(region) {
  font-family: fantasy;
}
Copy
```

--------------------------------

### getActivePlugins

Source: https://wavesurfer.xyz/docs/methods

Returns a list of all currently registered plugins.

```APIDOC
## getActivePlugins

### Description
Get all registered plugins.

### Method
`getActivePlugins(): GenericPlugin[]`

### Returns
`GenericPlugin[]` - An array of active plugin instances.
```

--------------------------------

### RecordPluginOptions

Source: https://wavesurfer.xyz/docs/types/plugins_record.RecordPluginOptions

Configuration options for the RecordPlugin, allowing customization of audio recording and waveform display.

```APIDOC
## RecordPluginOptions

### Description
Configuration options for the RecordPlugin.

### Properties

- **audioBitsPerSecond** (number) - Optional - The audio bitrate to use when recording audio, defaults to 128000 to avoid a VBR encoding.
- **continuousWaveform** (boolean) - Optional - Accumulate and render the waveform data as the audio is being recorded, false by default.
- **continuousWaveformDuration** (number) - Optional - The duration of the continuous waveform, in seconds.
- **mediaRecorderTimeslice** (number) - Optional - The timeslice to use for the media recorder.
- **mimeType** (string) - Optional - The MIME type to use when recording audio.
- **renderRecordedAudio** (boolean) - Optional - Whether to render the recorded audio at the end, true by default.
- **scrollingWaveform** (boolean) - Optional - Whether to render the scrolling waveform, false by default.
- **scrollingWaveformWindow** (number) - Optional - The duration of the scrolling waveform window, defaults to 5 seconds.
```

--------------------------------

### Timeline Plugin Static Methods

Source: https://wavesurfer.xyz/docs/classes/plugins_timeline.default

Details the static methods available for the Timeline plugin, primarily for creating instances.

```APIDOC
## Static Methods

### `Static` create
  * create(options?): default
  * #### Parameters
    * ##### `Optional` options: TimelinePluginOptions
#### Returns default
```
Tokens:
Raw