Telegram-Style Audio Player with Waveforms – Vue Wave Player

Install & Download:

# NPM
$ npm install vue-wave-player

Description:

Vue Wave Player is a Vue component that visualizes audio files with a Canvas-based waveform. It handles waveform rendering, playback controls, and time tracking.

You can configure the player through props for visual style and audio behavior. Styles load automatically without a separate CSS import.

Features

• 🎵 Canvas Waveform: Renders an audio waveform on an HTML5 canvas element. You control the bar width and gap.
• 🎨 Telegram Style: Applies a specific UI design from Telegram’s voice messages, including color scheme and layout.
• ⚙️ Configurable Playback: Controls playback speed with a toggle button. You define the available speed rates.
• 📊 Convenient API: Exposes methods for play, pause, stop, seek, and rate change. It provides reactive properties for the current time and duration.
• 🎚️ Customizable Slots: Offers slots to replace the default play button and time display with your own components.
• 🔊 Event Handling: Emits standard audio events like play, pause, ended, timeupdate, and seeking for external logic.

Use Cases

• Chat Applications: Renders voice messages with visual feedback in messaging interfaces.
• Music Portfolios: Displays track previews with interactive waveforms for artists.
• Podcast Players: Manages episode playback with adjustable speed controls.
• Sound Libraries: Previews short audio clips or sound effects efficiently.

How to Use It

1. Register the plugin in your main entry file to use the component across your entire application.

// 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')

2. Insert the component into your template and bind the src prop to your audio file. The player renders the waveform immediately upon loading the file.

<template>
  <div class="player-container">
    <VueWavePlayer src="/assets/audio/track-1.mp3" />
  </div>
</template>

3. You can adjust the visual appearance and control playback programmatically. This example demonstrates how to change the bar styles and use a reference to control the player methods.

<template>
  <VueWavePlayer
    ref="audioPlayer"
    src="/music/demo.mp3"
    :bar-width="4"
    :bar-gap="2"
    primary-color="#6366f1"
    background-color="#f3f4f6"
    show-playback-rate
  />
  <div class="controls">
    <button @click="playAudio">Play</button>
    <button @click="pauseAudio">Pause</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// Create a reference to the component
const audioPlayer = ref(null)
// Access internal methods via the reference
const playAudio = () => {
  audioPlayer.value?.play()
}
const pauseAudio = () => {
  audioPlayer.value?.pause()
}
</script>

4. Available component props

5. slots

6. Available events:

7. API methods:

Related Resources

• Wavesurfer.js: Renders interactive waveforms using the Web Audio API and HTML5 Canvas.
• Howler.js: Manages audio sprites and playback consistency across all modern browsers.

FAQs

Q: Does this library support Vue 2?
A: No, this package targets Vue 3 applications specifically.

Q: Can I use this with Nuxt?
A: Yes, you can use it with Nuxt 3 by registering it as a client-side plugin.

Q: How does it handle large audio files?
A: The browser must load the file to analyze the frequency data, so very large files may delay the initial rendering.

Q: Do I need to import a CSS file?
A: No, the component injects the required styles automatically.

Q: Can I fetch the audio source dynamically?
A: Yes. The src prop is reactive. You can bind it to a variable and update it. The component will load the new audio source.

Q: Is the waveform generated from the audio file?
A: No. The component uses a simplified, simulated waveform for visual effect. It does not perform audio analysis to generate a true waveform from the audio data.