Press "Enter" to skip to content

VueJS Visualizations With Web Audio Visual API Components

vue-audio-visual is an additional component to make a sound spectrum for Vuejs. It is designed using the HTML5 Web Audio Application interface and is compatible with all browsers that support API HTML5 Audio.

It provides many Vue components that allow light drawing and perception of “audio” HTML elements. This auxiliary program is compatible with Vue2 and Vue3 parties.

javascript audio visualizer, audio visualizer js library, circular audio visualizer javascript, web audio visualizer, javascript microphone visualizer, web audio api visualizer

Angular Library For Declarative Use Of Web Audio API

How to make use of it:

Install & Download:

npm install --save vue-audio-visual

1. Enable the plugin in main.js:

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

Vue.use(AudioVisual)

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

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

Common props

NameTypeDefaultDescription
audio-srcStringnullAudio element src attribute. When provided create an audio element wrapped in “div”.
ref-linkStringnullReference to parent audio element via Vue “ref” attribute. When set, the local audio element is not created and the plugin will connect the audio analyzer to the parent audio element. Multiple plugin instances can connect to the same audio element (see example above).
audio-controlsBooleantrueAudio element controls attribute. When provided should display an audio element with controls.
cors-anonymBooleanfalseSet CORS attribute for audio element. Set this attribute when using an audio source pointing to a different host/domain. When set, the parameter cross-origin of the audio element will be set to ‘anonymous’.
audio-classStringnullAudio element CSS class name.
canv-classStringnullCanvas element CSS class name.
canv-topBooleanfalseBy default plugin creates “audio” element wrapped in “div” and puts “canvas” element below. When “canv-top” is “true” then “canvas” element is set on top. Example: :canv-top="true" or v-bind:canv-top="true"
canv-fill-colorStringnullCanvas fill background RGB color. Default is null, which makes the background transparent. Examples:
canv-fill-color="#00AAFF"

AvLine props

NameTypeDefaultDescription
canv-widthNumber300Canvas element width. Default 300. Example: :canv-width="600"
canv-heightNumber80Canvas element height. Default 80. Example: :canv-height="120"
line-widthNumber2Graph line width in px. Integer or float number. Example: :line-width="0.5"
line-colorStringArray#9F9Graph line color. Can be a string RGB color or an Array of RGB colors. When Array is given, the plugin creates a linear gradient and sets it as background. Array value should be bound. Examples:
line-color="#00AAFF"
:line-color="['#FFF', 'rgb(0,255,127)', '#00f']"
fft-sizeNumber128Represents the window size in samples that are used when performing a Fast Fourier Transform (FFT) to get frequency domain data.
Must be the power of 2 between 25 and 215. Example: :fft-size="512"

AvBars props

NameTypeDefaultDescription
canv-widthNumber300Canvas element width. Default 300. Example: :canv-width="600"
canv-heightNumber80Canvas element height. Default 80. Example: :canv-height="120"
bar-widthNumber5Width of bars in pixels. Example: :bar-width="12"
bar-spaceNumber1Space between bars. Example: :bar-space="1.6"
bar-colorStringArray#0A0AFFBar fill color. Can be a string RGB color or canvas gradients array.
Examples:
bar-color="#00AAFF"
:bar-color="['#FFF', 'rgb(0,255,127)', 'green']"
caps-heightNumber0Create caps on bars with a given height in pixels. When zero no caps are created. Example: :caps-height="2"
caps-drop-speedNumber0.9Caps drop down animation speed. The higher number the faster caps are going down. Example: :caps-drop-speed="0.5"
caps-colorString#A0A0FFCaps rectangles RGB color. Example: caps-color="lime"
brick-heightNumber0Drawbar as bricks when height is set and not zero.
Example: :brick-height="6"
brick-spaceNumber1Space between bricks. Example: :brick-space="2"
symmetricBooleanfalseDrawbars are symmetric to the canvas’s vertical center. Example: :symmetric="true"
fft-sizeNumber1024Represents the window size in samples that are used when performing a Fast Fourier Transform (FFT) to get frequency domain data.
Must be the power of 2 between 25 and 215. Example: :fft-size="2048"

AvCircle props

NameTypeDefaultDescription
canv-widthNumber100Canvas element width. Example: :canv-width="600"
canv-heightNumber100Canvas element height. Example: :canv-height="120"
radiusNumber0Base circle radius. If zero, then will be calculated from canvas width: (canv-width / 2) * 0.7 Example: :radius="20"
line-widthNumber1Frequency bit line width to draw. Example: :line-width="0.4"
line-spaceNumber1Space between lines to draw. Example: :line-space="2"
outline-colorString#0000FFOutline (contour) style RGB color. Example: outline-color="rgb(0,255,0)"
outline-widthNumber0.3Outline (contour) line width. Float value. Example: :outline-width="1"
bar-widthNumber1Frequency graph bar width. Example: :bar-width="1"
bar-lengthNumber0Frequency graph bar length/height. Default is a difference between radius and canvas width. Example: :bar-length="27"
bar-colorStringArray[#FFF,#00F]Bar style RGB color or radiant gradient when array. Example: :bar-color="#12AA55"
progressBooleantrueDraw playtime progress meter. Example: :progress="false"
progress-widthNumber1Playtime progress meter width. Example: :progress-width="2.4"
progress-colorString#0000FFPlaytime progress meter color. Example: :progress-color="green"
progress-clockwiseBooleanfalsePlaytime progress meter arc draw direction. Example: :progress-clockwise="true"
outline-meter-spaceNumber3Space between outline and progress meter. The bigger the closer to the circle center. Example: :outline-meter-space="1"
playtimeBooleanfalseDraw played time as text in the center of the circle. Example: :playtime="true"
playtime-fontString14px MonacoPlayed time print font. Example: playtime-font="18px monospace"
playtime-colorString#00fPlayed time font color. Example: playtime-color="green"
rotate-graphBooleanfalseRotate graph clockwise enable. Example: :rotate-graph="true"
rotate-speedNumber0.001Rotate graph speed. Example: :rotate-speed="0.2"
fft-sizeNumber1024Represents the window size in samples that are used when performing a Fast Fourier Transform (FFT) to get frequency domain data.
Must be the power of 2 between 25 and 215. Example: :fft-size="2048"

AvWaveform props

NameTypeDefaultDescription
canv-widthNumber100Canvas element width. Example: :canv-width="500"
canv-heightNumber80Canvas element height. Example: :canv-height="120"
played-line-widthNumber0.5Waveform line width for a played segment of audio. Example: :playtime-line-width="0.8"
played-line-colorStringnavyWaveform line color for a played segment of audio. Example: :playtime-line-color="#ABC123"
noplayed-line-widthNumber0.5Waveform line width for not yet played segment of audio Example: :noplayed-line-width="1"
noplayed-line-colorStringlimeWaveform line color for not yet played segment of audio. Example: :noplayed-line-color="grey"
playtimeBooleantrueDisplay played time next to the progress slider. Example: :playtime="false"
playtime-with-msBooleantrueDisplay milliseconds in played when true. For example 02:55.054. Example: :playtime-with-ms="false"
playtime-font-sizeNumber12Played time print font size in pixels. Example: :playtime-font-size="14"
playtime-font-familyStringmonospacePlayed time print, font family. Example: :playtime-font-family="monaco"
playtime-font-colorStringgreyPlayed time print font RGB color string. Example: :playtime-font-color="#00f"
playtime-text-bottomBooleanfalsePosition playtime text bottom. Default on top. Example: playtime-text-bottom
playtime-sliderBooleantrueDraw played time slider on the waveform. Example: :playtime-slider="false"
playtime-slider-colorStringredPlayed slider color. Example: :playtime-slider-color="#fafafa"
playtime-slider-widthNumber1Played slider width. Example: :playtime-slider-width="2.5"
playtime-clickableBooleantrueAllow clicking on the waveform to change playtime. Example: :playtime-clickable="false"
requesterObjectnew axios instanceAllow setting a custom requester (Axios/fetch) to be used. Example: :requester="myCustomRequesterInstance"

audio visualization component, vue-audio-visual Plugin/Github, javascript waveform visualizer


See Demo And Download

Official Website(staskobzar): Click Here

This superior jQuery/javascript plugin is developed by staskobzar. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.