Vue 3 wave-audio-player-list

NPM install

npm i @futuremeng/vue3-wave-audio-player-list

Import ans use

<template>
  <div style="max-width: 250px">
    <Vue3WaveAudioPlayerList
      wave-type="mirror"
      :data="demo"
      :disable-seeking="true"
      :wave-animation="false"
      :current-time-visible="true"
      :duration-time-visible="true"
    />
  </div>
</template>
<script>
  import Vue3WaveAudioPlayerList from 'vue3-wave-audio-player-list'

  export default {
    name: 'App',
    components: {
      Vue3WaveAudioPlayerList,
    },
    data() {
      return {
        example_options: {
          samples: 50,
          type: 'steps',
          paths: [
            { d: 'V', sy: 0, x: 0, ey: 100 },
            {
              d: 'A',
              sx: 0,
              sy: 100,
              ex: 100,
              ey: 100,
              rx: 10,
              ry: 10,
              angle: 180,
              arc: 1,
              sweep: 1,
            },
            { d: 'V', sy: 0, x: 100, ey: 100 },
          ],
        },
        index: 0,
        demo: [
          {
            title: '国风1',
            src: 'https://one-ywcbs-static.oss-cn-beijing.aliyuncs.com/abc.mp3',
          },
          {
            title: '国风2',
            src: 'https://one-ywcbs-static.oss-cn-beijing.aliyuncs.com/2.mp3',
          },
          {
            title: '国风3',
            src: 'https://one-ywcbs-static.oss-cn-beijing.aliyuncs.com/3.mp3',
          },
        ],
      }
    },
  }
</script>

Attributes

Name	Required	Type	Description
data	True	Array	Array of objects with the following structure:{ title:'',src:''}
wave-width	True	Integer	Width of the Waves. (Not responsive, Also remember that the buttons and the timing strings will take extra ~250px. For example, if(container === 500px) => wave-width = 500 - 250 = 250 )
wave-height	True	Integer	Height of the waves (Not Responsive)
wave-type	False	String	Type of wave. (Not working yet)
wave-options	False	Object	Set settings for the waves (Not working yet)
load-audio-onmount	False	Boolean	Load the path and audio data on mounted
disable-seeking	False	Boolean	Disable time seeking
current-time-visible	False	Boolean	Show current time
duration-time-visible	False	Boolean	Show duration time
disable-seeking	False	Boolean	Disable seeking
load-audio-onmount	False	Boolean	Load the path and audio data on mounted
circle	False	Boolean	Show circle button

Events

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

Name	Required	Type	Return	Description
on-play	False	Func	Boolean	Triggered when user click on play button

Check MDN Doc for all the events.

Report bug or Suggestion

please send a mail at [email protected]. You can also open any issue in the GitHub page. Thanks for using this package.

Inspired by

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