Simple Vue wraper for wavesurfer.js
npm install vue-wavesurfer-playerSimple Vue wraper for wavesurfer.js
sh
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import WavesurferPlugin from './WavesurferPlugin';const app = createApp(App);
app.use(WavesurferPlugin);
app.mount('#app')
import type { WavesurferOptions } from "vue-wavesurfer-player/dist/components/WavesurferOptions";
//import styles
let options: WavesurferOptions = {
waveColor: "violet",
progressColor: "purple",
scrollParent: false,
backend: "WebAudio",
barHeight: .8,
cursorWidth: 3,
cursorColor: "#eb7ee9",
height: 64,
barWidth: 0.1,
barGap: 1.5
} as WavesurferOptions;
:options="wavesurferOption1"
src="./../soundEffect.wav"
effectName="Cick effect"
>
// or with base64 file
:options="wavesurferOption2"
:srcBase64="fileAsBlob"
effectName="Cick effect 2"
>
by adding: ref="playerRef"
like
class="wave-surfer-item"
:options="wavesurferOption2"
:srcBase64="fileAsBlob"
effectName="Cick effect 2"
>
you can access functions like:
this.$refs.playerRef.loadBlob(this.fileAsBlob2);
this.$refs.playerRef.loadFile("your_file_url");
this.$refs.playerRef.getDurationInMiliSeconds();
``