Wavesurfer VUE3 component

This a wrap of wavesurfer for VUE3.

usage

npm i -S wavesurfer4vue
npm i -S wavesurfer.js

main.ts

import { createApp } from 'vue'
import App from './App.vue'

import './style.css'


import Wavesurfer4Vue from 'wavesurfer4vue'

const app = createApp(App)
app.use(Wavesurfer4Vue)
app.mount('#app')

App.vue

<script setup lang="ts">
import { ref } from "vue"; 
 


import { RegionsPluginParams } from "wavesurfer.js/src/plugin/regions";
import { TimelinePluginParams } from "wavesurfer.js/src/plugin/timeline";

const player1 = ref()
const process = ref()

// const a: MinimapPluginParams
// const aa: TimelinePluginParams


const pluginMinimap = ref(false)

const pluginTimeline = ref<TimelinePluginParams | null>({ container: "" })

const regions = ref<RegionsPluginParams>({ regions: [{ start: 3, end: 5 }] })


function onReady() {
  console.log('ready   ');
}

function onLoading(p: number) {
  process.value = p
}
function onPlay(e: MouseEvent) {
  console.log('e :>> ', e);
  player1.value.play()
}
function onProcess(p: number) {
  process.value = Math.round(p * 100) / 100
}
</script>

<template>
  <div class="main">
    <Wavesurfer4Vue ref="player1" id="player1" @ready="onReady" @audioprocess="onProcess" @loading="onLoading"
      :PluginMinimap="pluginMinimap" :PluginTimeline="pluginTimeline" :ScrollParent="true" :PluginRegions="regions"
      url="https://dxxx/test1_section01.mp3" />
  </div>
  <div>{{ process }}</div>
  <div>
    <div><input type="checkbox" v-model="pluginMinimap" />pluginMinimap</div>
    <div><button @click="onPlay">play</button></div>
  </div>
</template>

<style scoped>
.main {
  width: 300px;
}
</style>

document

package exports Object:

export default { 
	Wavesurfer4Vue, 

Wavesurfer4Vue props

offering vue component props :

| option | type | default | description | | ----------- | ----------- | ----------- | ----------- |

| PluginCursor | Object as PropType| default: null| | | PluginElan | Object as PropType | default: null | | | PluginMarkers | Object as PropType | default: null | | | PluginMediaSession | Object as PropType | default: null | | | PluginMicrophone | Object as PropType | default: null | | | PluginMinimap | Boolean | default: false | | | PluginPlayhead | Object as PropType | default: null | | | PluginRegions | Object as PropType | default: null | | | PluginSpectrogram | Object as PropType | default: null | | | PluginTimeline | Object as PropType | default: null | | | AudioRate | float | 1 | Speed at which to play audio. Lower number is slower. | | AudioContext | object | null | Use your own previously initialized AudioContext or leave blank. | | AudioScriptProcessor | object | null | Use your own previously initialized ScriptProcessorNode or leave blank. | | AutoCenter | boolean | true | If a scrollbar is present, center the waveform around the progress. | | AutoCenterImmediately | boolean | false | Whether to apply transition effect when seeking waveforms. Useful if you handle large waveforms and the transition is struggling. | | Backend | string | "WebAudio" | WebAudio, MediaElement or MediaElementWebAudio. MediaElement is a fallback for unsupported browsers. | | BackgroundColor | string | "null" | Change background color of the waveform container. | | BarGap | number | null | The optional spacing between bars of the wave, if not provided will be calculated in legacy format. | | BarHeight | number | 1 | Height of the waveform bars. Higher number than 1 will increase the waveform bar heights. | | BarMinHeight | number | null | Minimum height to draw a waveform bar. Default behavior is to not draw a bar during silence. | | BarRadius | number | 0 | The radius that makes bars rounded. | | BarWidth | number | null | If specified, the waveform will be drawn like this: ▁ ▂ ▇ ▃ ▅ ▂ | | CloseAudioContext | boolean | false | Close and nullify all audio contexts when the destroy method is called. | | Container | mixed | "null" | CSS-selector or HTML-element where the waveform should be drawn. This is the only required parameter. | | CursorColor | string | "#333" | The fill color of the cursor indicating the playhead position. | | CursorWidth | number | 1 | Measured in pixels. | | DrawingContextAttributes | object | {desynchronized: true} | Specify canvas 2d drawing context attributes. | | FillParent | boolean | true | Whether to fill the entire container or draw only according to minPxPerSec. | | ForceDecode | boolean | false | Force decoding of audio using web audio when zooming to get a more detailed waveform. | | Height | number | 128 | The height of the waveform. Measured in pixels. | | HideScrollbar | boolean | false | Whether to hide the horizontal scrollbar when one would normally be shown. | | HideCursor | boolean | false | Hide the mouse cursor when hovering over the waveform. By default it will be shown. | | Interact | boolean | true | Whether the mouse interaction will be enabled at initialization. You can switch this parameter at any time later on. | | LoopSelection | boolean | true | (Use with regions plugin) Enable looping of selected regions. | | MaxCanvasWidth | number | 4000 | Maximum width of a single canvas in pixels, excluding a small overlap (2 * pixelRatio, rounded up to the next even number). If the waveform is longer than this value, additional canvases will be used to render the waveform, which is useful for very large waveforms that may be too wide for browsers to draw on a single canvas. This parameter is only applicable to the MultiCanvas renderer. | | MediaControls | boolean | false | (Use with backend MediaElement) this enables the native controls for the media element. | | MediaType | string | "audio" | 'audio' or 'video'. Only used with backend MediaElement. | | MinPxPerSec | number | 50 | Minimum number of pixels per second of audio. Essentially zooming. Needs scrollParent: true or fillParent: false to have an effect. | | Normalize | boolean | false | If true, normalize by the maximum peak instead of 1.0. | | PartialRender | boolean | false | Use the PeakCache to improve rendering speed of large waveforms. | | PixelRatio | number | window.devicePixelRatio | Can be set to 1 for faster rendering. | | Plugins | array | [] | An array of plugin definitions to register during instantiation. They will be directly initialised unless they are added with the deferInit property set to true. | | ProgressColor | string | "#555" | The fill color of the part of the waveform behind the cursor. When progressColor and waveColor are the same the progress wave is not rendered at all. | | RegionsMinLength | number | null | Default minLength for regions, in seconds. When creating a region, specifying the minLength parameter for that region will override this. | | RemoveMediaElementOnDestroy | boolean | true | Set to false to keep the media element in the DOM when the player is destroyed. This is useful when reusing an existing media element via the loadMediaElement method. | | Renderer | Object | MultiCanvas | Can be used to inject a custom renderer. | | Responsive | boolean or float | false | If set to true resize the waveform, when the window is resized. This is debounced with a 100ms timeout by default. If this parameter is a number it represents that timeout. | | ScrollParent | boolean | false | Whether to scroll the container with a lengthy waveform. Otherwise the waveform is shrunk to the container width (see fillParent). | | SkipLength | float | 2 | Number of seconds to skip with the skipForward() and skipBackward() methods. | | SplitChannels | boolean | false | Render with seperate waveforms for the channels of the audio. | | SplitChannelsOptionsOverlay | boolean | false | Overlay waveforms for channels instead of rendering them on separate rows | | SplitChannelsOptionsRelativeNormalization | boolean | false | Normalization maintains proportionality between channels. Only applies when normalize=true | | SplitChannelsOptionsFilterChannels | array | [] | List of channel numbers to be excluded from rendered waveforms. Channels are 0-indexed | | SplitChannelsOptionsChannelColors | object | {} | Overrides color per channel. Each key indicates a channel number and the corresponding value is an object describing it's color porperties. For example: channelColors={ 0: { progressColor: 'green', waveColor: 'pink' }, 1: { progressColor: 'orange', waveColor: 'purple' } } | | WaveColor | string | "#999" | The fill color of the waveform after the cursor. |

Wavesurfer4Vue events

	(e: 'audioprocess', pos: number): void //audioprocess – Fires continuously as the audio plays.
	(e: 'dblclick'): void// dblclick – When instance is double - clicked.
	(e: 'destroy'): void// destroy – When instance is destroyed.
	(e: 'error', err: string): void// error – Occurs on error.Callback will receive(string) error message.
	(e: 'finish'): void// finish – When it finishes playing.
	(e: 'interaction'): void// interaction – When there's interaction with the waveform.
	(e: 'loading', percentage: number): void// loading – Fires continuously when loading using fetch or drag'n'drop.Callback will receive(integer) loading progress in percents[0..100].
	(e: 'mute', bMute: boolean): void// mute – On mute change.Callback will receive(boolean) new mute status.
	(e: 'pause'): void// pause – When audio is paused.
	(e: 'play'): void// play – When playback starts.
	(e: 'ready'): void// ready – When audio is loaded, decoded and the waveform drawn.This fires before the waveform is drawn when using MediaElement, see waveform - ready.
	(e: 'scroll', event: Event): void// scroll - When the scrollbar is moved.Callback will receive a ScrollEvent object.
	(e: 'seek', pos: number): void// seek – On seeking.Callback will receive(float) progress[0..1].
	(e: 'volume', vol: number): void// volume – On volume change.Callback will receive(integer) new volume.
	(e: 'waveform-ready'): void// waveform - ready – Fires after the waveform is drawn when using the MediaElement backend.If you're using the WebAudio backend, you can use ready.
	(e: 'zoom', minPxPerSec: number): void // zoom – On zooming.Callback will receive(integer) minPxPerSec.

	(e: 'region-click', region: any, ev: Event): void

	(e: 'region-update-end', region: any): void
	(e: 'region-updated', region: any): void
	(e: 'region-removed', region: any): void
	(e: 'region-in', region: any): void
	(e: 'region-out', region: any): void
	(e: 'region-play', region: any): void


	(e: 'load-start'): void
	(e: 'load-end'): void

Wavesurfer4Vue properties

	wavesurfer, //native wavesurfer object. You can operate this object to controll all features.

Wavesurfer4Vue methods

methods of VUE component.

	getRegions,  //get all regions in array format.

Those methods below are wrap the same-name-methods of wavesurfer.js. In fact, it's unnecessary, you can use $player.wavesurfer.xxx() to call native wavesurfer methods.

	getActivePlugins,
	getDuration,
	getCurrentTime,
	setCurrentTime,
	play,
	setPlayEnd,
	pause,
	playPause,
	isPlaying,
	skipBackward,
	skipForward,
	skip,
	seekAndCenter,
	seekTo,
	stop,
	setSinkId,
	setVolume,
	getVolume,
	setPlaybackRate,
	getPlaybackRate,
	toggleMute,
	setMute,
	getMute,
	getFilters,
	toggleScroll,
	toggleInteraction,
	getWaveColor,
	setWaveColor,
	getProgressColor,
	setProgressColor,
	getBackgroundColor,
	setBackgroundColor,
	getCursorColor,
	setCursorColor,
	getHeight,
	setHeight,
	setFilteredChannels,
	zoom,
	load,
	decodeArrayBuffer,
	exportPCM,
	exportImage,
	cancelAjax,
	empty