Vue3 Waveform Visualizer

Quick Start

Import and use the component in your Vue.js application:

<script setup lang="ts">
  import { ref } from 'vue';
  import type WaveSurfer from 'wavesurfer.js';
  import { WaveSurferPlayer } from '@meersagor/wavesurfer-vue';
  
  const options = ref({
    height: 48,
    waveColor: 'gray',
    progressColor: 'red',
    barGap: 5,
    barWidth: 5,
    barRadius: 8,
    duration: 80,
    url: "https://revews-bucket.s3.ap-southeast-1.amazonaws.com/a06mmMU3sgnzuUkH4OiHvyuUgCFdLSnJaDLBao7y.webm",
  });
  
  const currentTime = ref<string>('00:00');
  const totalDuration = ref<string>('00:00');
  const waveSurfer = ref<WaveSurfer | null>(null);
  
  const formatTime = (seconds: number): string => 
    [seconds / 60, seconds % 60]
      .map((v) => `0${Math.floor(v)}`.slice(-2))
      .join(':');
  
  const timeUpdateHandler = (time: number) => {
    currentTime.value = formatTime(time);
  };
  
  const readyHandler = (duration: any) => {
    totalDuration.value = formatTime(duration);
  };
  
  const readyWaveSurferHandler = (ws: WaveSurfer) => {
    waveSurfer.value = ws;
  };
  </script>
  
  <template>
    <main>
      <h1>WaveSurferPlayer Using Components</h1>
      <WaveSurferPlayer 
        :options="options" 
        @timeupdate="(time: number) => timeUpdateHandler(time)"
        @ready="(duration: number) => readyHandler(duration)" 
        @waveSurfer="(ws: WaveSurfer) => readyWaveSurferHandler(ws)" 
      />
      <p>currentTime: {{ currentTime }}</p>
      <p>totalDuration: {{ totalDuration }}</p>
      <button 
        @click="waveSurfer?.playPause()" 
        :style="{ minWidth: '5em' }"
      >
        Play
      </button>
    </main>
  </template>