Vue3 Waveform
Visualizer

<script setup lang="ts">
import { ref } from 'vue'
import { useWaveSurfer } from '@meersagor/wavesurfer-vue'
import { useWaveSurferTimeline } from '@meersagor/wavesurfer-vue'
import { useWaveSurferZoom } from '@meersagor/wavesurfer-vue'

const containerRef = ref<HTMLElement | null>(null)

const options = {
  "height": 48,
  "waveColor": "#4F4A85",
  "progressColor": "#383351",
  "barWidth": 3,
  "barGap": 2,
  "barRadius": 4,
  "volume": 0.8,
  "autoplay": false,
  "loop": false,
  "responsive": true,
  "fillParent": true
}

const { waveSurfer, currentTime, totalDuration, isPlaying } = useWaveSurfer({
  containerRef,
  options
})

const { timelinePlugin } = useWaveSurferTimeline({ waveSurfer })
const { zoomPlugin } = useWaveSurferZoom({ waveSurfer })

const formatTime = (seconds: number): string => 
  [seconds / 60, seconds % 60]
    .map((v) => `0${Math.floor(v)}`.slice(-2))
    .join(':')
</script>

<template>
  <div>
    <div ref="containerRef"></div>
    <div class="controls">
      <button @click="waveSurfer?.playPause()">
        {{ isPlaying ? 'Pause' : 'Play' }}
      </button>
    </div>
    <p>Current Time: {{ formatTime(currentTime) }}</p>
    <p>Duration: {{ formatTime(totalDuration) }}</p>
  </div>
</template>