Vue HTML5 audio visualization components

• Overview
• Install and setup
• API
  • Common props
  • AvLine props
  • AvBars props
  • AvCircle props
• Todo
• License

An audio spectrum visualizer plugin for VueJS framework. It is built with HTML5 Web Audio API and compatible with all browsers that support HTML5 audio API. It provides several Vue components that allows to draw light and nice visualization for "audio" HTML elements.

Component AvLine. Vue template name <av-line>

    <av-line
      :line-width="2"
      line-color="lime"
      audio-src="/static/music.mp3"
    ></av-line>

This will create following element:

Component AvBars. Vue template name <av-bars>

    <av-bars
      caps-color="#FFF"
      :bar-color="['#f00', '#ff0', '#0f0']"
      canv-fill-color="#000"
      :caps-height="2"
      audio-src="/static/bach.mp3"
    ></av-bars>

This will create following element:

Component AvCircle. Vue template name <av-circle>

    <av-circle
      :outline-width="0"
      :progress-width="5"
      :outline-meter-space="5"
      :playtime="true"
      playtime-font="18px Monaco"
      audio-src="/static/bach.mp3"
    ></av-circle>

This will create following element:

Also, multiple components can connect to the same audio element by using Vue ref element parameter and "ref-link" property.

<table>
   <tr>
     <td rowspan="2">
       <av-bars ref-link="foo"
         :bar-color="['#f00', '#ff0', '#0f0']"
         canv-fill-color="#000"
         :canv-width="26"
         :bar-space="1"
         :bar-width="12"
         :brick-height="6"
         />
     </td>
     <td>
       <audio src="/static/music_4.mp3" ref="foo" controls="true"> </audio>
     </td>
     <td rowspan="2">
       <av-circle ref-link="foo" :playtime="true" />
     </td>
   </tr>
   <tr>
     <td>
       <av-line ref-link="foo" :canv-height="40" />
     </td>
   </tr>
 </table>

Will look like this:

Install using npm

npm install --save vue-audio-visual

Enable plugin in main.js:

import Vue from 'vue'
import AudioVisual from 'vue-audio-visual'

Vue.use(AudioVisual)

Example of usage in App.vue or any other Vue component:

  <av-bars
    audio-src="/static/bach.mp3">
  </av-bars>

There are three components that comes with plugin: av-line, av-bars, av-circle.

There are a lot of props available to configurate each component. The only mandatory "prop" to pass to component: audio-src. Prop audio-src value should contain URL to media file. Example:

audio-src="https://example.com/media/song.mp3"

Plugin will generate "audio" to control media playback and "canvas" element for visualization.

Another way is to link to existing Vue element using "ref-link" property. When "ref-link" property is set, then "audio-src" property is ignored.

<audio ref="foo" src="music.mp3"></audio>
<av-bars ref-link="foo" />
<av-line ref-link="foo" />

However, it will reference only parent component elements.

There are props that are common for all components and special props for each component.

Name	Type	Default	Description
canv-width	Number	300	Canvas element width. Default 300. Example: :canv-width="600"
canv-height	Number	80	Canvas element height. Default 80. Example: :canv-height="120"
bar-width	Number	5	Width of bars in pixels. Example: :bar-width="12"
bar-space	Number	1	Space between bars. Example: :bar-space="1.6"
bar-color	String, Array	#0A0AFF	Bar fill color. Can be string RGB color or canvas gradients array. Examples: bar-color="#00AAFF" :bar-color="['#FFF', 'rgb(0,255,127)', 'green']"
caps-height	Number	0	Create caps on bars with given height in pixels. When zero no caps created. Example: :caps-height="2"
caps-drop-speed	Number	0.9	Caps drop down animation speed. The higher nubmer the faster caps are going down. Example: :caps-drop-speed="0.5"
caps-color	String	#A0A0FF	Caps rectangles RGB color. Example: caps-color="lime"
brick-height	Number	0	Draw bar as bricks when height is set and not zero. Example: :brick-height="6"
brick-space	Number	1	Space between bricks. Example: :brick-space="2"
symmetric	Boolean	false	Draw bars symmetric to canvas vertical center. Example: :symmetric="true"
fft-size	Number	1024	Represents the window size in samples that is used when performing a Fast Fourier Transform (FFT) to get frequency domain data. Must be power of 2 between 25 and 215. Example: :fft-size="2048"

• Pre-load media source and create waveform graph.

MIT Copyright (c) 2018-present, Stas Kobzar