vue-audio-visual

Vue HTML5 audio visualization components

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

Overview

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:

Component AvWaveform. Vue template name <av-waveform>

    <av-waveform       audio-src="/static/bar.mp3"     ></av-waveform>

This will create following waveform element:

Component will pre-load audio content and generate clickable waveform.

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 and setup

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>

API

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="http://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.

Common props

AvLine props

AvBars props

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"

AvCircle props

AvWaveform props

License

MIT Copyright (c) 2018-present, Stas Kobzar