vue-audio-visual


> Vue HTML5 audio visualization components

- Overview
- Get started
- Install
- Use plugin
- Use component
- Composable functions
- API details
- Common props
- Common events
- AvLine props
- AvBars props
- AvCircle props
- AvWaveform props
- AvMedia props
- Issues
- License

UPDATE NOTES

> [!WARNING]
> Plugin current version is compatibale only with Vue v3. For
> Vue2 use plugin version 2.5.1. See install chapter for
> details.

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.

> [!NOTE]
> Visit DEMO page
> for working examples.

_Usage examples_:

Component AvLine. Vue template name <av-line>

``html

`

This will create following element:

!AvLine Intro

Component AvBars. Vue template name <av-bars>

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

This will create following element:

!AvBars Intro

Component AvCircle. Vue template name <av-circle>

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

This will create following element:

!AvCircle Intro

Component AvWaveform. Vue template name <av-waveform>

`html

`

This will create following waveform element:

!AvWaveform Intro

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

Component AvMedia. Vue component <AvMedia>

`html

`

This will create following media element:

!AvMedia Intro

There are more media types. See details below.

:gear: Get started

$3

Install using npm

`
npm install --save vue-audio-visual
`

for Vue 2 install version 2.5.1

`
npm i -S vue-audio-visual@2.5.1
`

$3

Install plugin in main.js:

`typescript
import { createApp } from "vue";
import App from "./App.vue";
import { AVPlugin } from "vue-audio-visual";

const app = createApp(App);
app.use(AVPlugin);

app.mount("#app");
`

Then anywhere is your app you can use it like this:

`html

`

$3

Single component can be imported and used

`ts



`

$3

Plugin provides composable "use" functions for each plugin component. Actually,
each component uses composable function inside. See, for example,
line component.

Composable functions use audio and canvas element refs. It is handy when you
need full access to audio or canvas elements. In the same time it is easy to
use:

`ts



`

:gear: API

There are several components that comes with plugin. Here is the list of
available plugins:

| Name | Component name | Composable function |
| -----------| -------------- | ------------------- |
| av-bars | AVBars | useAVBars |
| av-circle | AvCircle | useAVCircle |
| av-line | AVLine | useAVLine |
| av-media | AVMedia | useAVMedia |
| av-waveform | AVWaveform | useAVWaveform |

There are props that are common for all components and special props for each
component. All props for components' names follow vue specs when using wiht
composable functions. Meaning when prop's name is "_foo-bar_" then in composable
function parameter it is expected to be "_fooBar_".

$3

$3

Composable function:

`ts
function useAVLine(
player: Ref,
canvas: Ref,
props: T,
);
`

$3

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"

Composable function

`ts
function useAVBars(
player: Ref,
canvas: Ref,
props: T,
);
`

$3

Composable function

`ts
function useAVCircle(
player: Ref,
canvas: Ref,
props: T,
);
`

$3

Composable function is using useFetch from
@vueuse/core package. useAVWaveform last argument is
options for "createFetch" function from "useFetch" module.

`ts
export function useAVWaveform(
player: Ref,
canvas: Ref,
props: T,
fetchOpts: CreateFetchOptions = {},
);
`

$3

Component expects MediaStream object. You can get it directly from
navigator.mediaDevices or from @vueuse/core library function
useUserMedia. Live example can be found
in
App.vue.

`ts



`

Composable function:

`ts
function useAVMedia(
canvas: Ref,
props: T,
);
``

License

MIT Copyright (c) 2018-present, Stas
Kobzar