vue3-wave-audio-player

Vue 3 wave-audio-player

NPM install :

npm i vue3-wave-audio-player

Import ans use:

<template>
  <div style="max-width: 250px">
    <Vue3WaveAudioPlayer
    :wave_width="250"
    :wave_height="40"
    wave_type="mirror"
    src="/samples/file.mp3"
    />  
    <!-- optional wave_options -->
    <Vue3WaveAudioPlayer
    :wave_width="250"
    :wave_height="40"
    :wave_options='{"samples":50}' 
    src="/samples/file.mp3"
    :load_audio_onmount="false"
    />  
    <Vue3WaveAudioPlayer
    :wave_width="250"
    :wave_height="40"
    :wave_options='{"samples":40,"type":"steps","width":192,"height":40}'
    src="/samples/file.mp3"
    />   
  </div>
</template>
<script>
import Vue3WaveAudioPlayer from 'vue3-wave-audio-player'

export default {
  name: 'App',
  components: {
    Vue3WaveAudioPlayer
  },
}
</script>

Attributes

Events

I have added all the events that html has in the audio tag with a "on_" prefix. Additional events:

// Example 
<Vue3WaveAudioPlayer
:wave_width="250"
:wave_height="40"
src="/samples/file.mp3"

@on_error="onError"
@on_ended="customCallback" // ... many more
/> 

Check MDN Doc for all the events.

Report bug or Suggestion

please send a mail at imdarif122@mail.com or contact@arifdev.com. You can also open any issue in the GitHub page. Thanks for using this package.

Sponsored By:

Kilo Code

Inspired by:

wave-path-audio-player package waveform-path package