vue-wave-player

Vue Wave Player

🎵 Audio player with Canvas waveform visualization in Telegram style for Vue 3

Changelog

Demo

View Demo →

Installation

npm install vue-wave-player

Quick Start

Global Registration (recommended)

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueWavePlayer from 'vue-wave-player'

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

Now <VueWavePlayer /> component is available everywhere without import.

Local Import

<template>
  <VueWavePlayer src="/audio.mp3" />
</template>

<script setup>
import { VueWavePlayer } from 'vue-wave-player'
</script>

✅ Styles are included automatically, no separate CSS import needed!

Waveform Bar Settings

<!-- Thin bars 1px with 1px gap -->
<VueWavePlayer src="/audio.mp3" :bar-width="1" :bar-gap="1" />

<!-- Wide bars 4px with 4px gap -->
<VueWavePlayer src="/audio.mp3" :bar-width="4" :bar-gap="4" />

Props

Slots

<!-- Custom play button -->
<VueWavePlayer src="/audio.mp3">
  <template #play-button="{ isPlaying, toggle }">
    <button @click="toggle">{{ isPlaying ? 'Pause' : 'Play' }}</button>
  </template>
</VueWavePlayer>

<!-- Custom time display -->
<VueWavePlayer src="/audio.mp3">
  <template #time="{ formattedCurrentTime, formattedDuration }">
    <div>{{ formattedCurrentTime }} of {{ formattedDuration }}</div>
  </template>
</VueWavePlayer>

Events

<VueWavePlayer
  src="/audio.mp3"
  @play="onPlay"
  @pause="onPause"
  @ended="onEnded"
  @timeupdate="onTimeUpdate"
/>

Methods

<template>
  <VueWavePlayer ref="player" src="/audio.mp3" />
  <button @click="player.play()">Play</button>
  <button @click="player.pause()">Pause</button>
  <button @click="player.stop()">Stop</button>
</template>

<script setup>
const player = ref()

player.play()        // start playback
player.pause()       // pause
player.stop()        // stop and reset to start
player.seek(10)      // seek to 10 sec
player.setRate(1.5)  // speed 1.5x
player.currentTime   // current time
player.duration      // duration
player.isPlaying     // is playing
</script>

Examples

Custom Colors

<VueWavePlayer
  src="/audio.mp3"
  primary-color="#E91E63"
  background-color="#FCE4EC"
/>

Playback Speed

<VueWavePlayer
  src="/audio.mp3"
  show-playback-rate
  :playback-rates="[1, 1.5, 2]"
/>

License

MIT © 2025 Spot