wavesurfer4vue

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 :

| PluginCursor | Object as PropType

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