Audio Player Component

A customizable audio player built on Vue's <audio> element with advanced controls like play/pause, mute, volume adjustment, progress bar, and optional audio visualizer.

Props

Prop	Type	Default	Description
URL	String	—	The audio file source URL
stop	Boolean	true	Control playback externally (stops and resets audio when set to false)

Features

• Play / Pause Control – Toggle playback with a button.
• Mute / Unmute – Switch between muted and unmuted states.
• Volume Control – Adjust audio volume with a slider.
• Progress Bar – Interactive progress bar to skip to a specific time in the track.
• Time Display – Shows current and total audio duration.
• Visualizer (Optional) – Audio waveform visualization (commented out in template, can be enabled).

Example: With Custom Controls

<template>
  <div>
    <AudioPlayer :URL="audioUrl" />
  </div>
</template>

<script>
import AudioPlayer from "@UIKit/AudioPlayer.vue";

export default {
  components: { AudioPlayer },
  data() {
    return {
      audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
    };
  },
};
</script>

Notes

• The component prevents right-click and certain dev tools key combinations by default (to protect audio content).
• Visualizer functionality requires uncommenting <canvas ref="visualizer"> block in the template and enabling animateVisualizer() inside audioPlay().
• Fully responsive with bootstrap-like utility classes (can be styled further).