Example: :canv-width='600'Ĭanvas element height. Example: :fft-size='2048'Ĭanvas element width. Example: :brick-space='2'ĭraw bars symmetric to canvas vertical center. Example: caps-color='lime'ĭraw bar as bricks when height is set and not zero.

Example: :caps-drop-speed='0.5'Ĭaps rectangles RGB color. The higher nubmer the faster caps are going down. Example: :caps-height='2'Ĭaps drop down animation speed. :bar-color=''Ĭreate caps on bars with given height in pixels. Can be string RGB color or canvas gradients array. Represents the window size in samples that is used when performing a Fast Fourier Transform (FFT) to get frequency domain data. When Array is given, plugin creates linear gradient and set it as background. Can be string RGB color or Array of RGB color. Default is null, which makes background transperent. Example: :canv-top='true' or v-bind:canv-top='true'Ĭanvas fill background RGB color. When 'canv-top' is 'true' then 'canvas' element is set on top. When set, parameter crossOrigin of audio element will be set to 'anonymous'.īy default plugin creates 'audio' element wrapped in 'div' and puts 'canvas' element below. Set this attribute when using audio source is pointing to different host/domain. When provided should display audio element with controls. Multiple plugin instances can connect to the same audio element (see example above).Īudio element controls attribute.

When set, then local audio element is not created and the plugin will connect audio analyser to parent audio element. Reference to parent audio element via Vue 'ref' attribute. When provided creates audio element wrapped in 'div'. Common props NameĪudio element src attribute. There are props that are common for all components and special props for each component. However, it will reference only parent component elements.

Html5 audio visualization