staskobzar / vue-audio-visual

VueJS audio visualization components

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>

<av-line :line-width="2" line-color="lime" 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"
  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"
  src="/static/bach.mp3"
></av-circle>

This will create following element:

Component AvWaveform. Vue template name <av-waveform>

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

This will create following waveform element:

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

Component AvMedia. Vue component <AvMedia>

<AvMedia :media="mediaObject" type="vbar"></AvMedia>

This will create following media element:

There are more media types. See details below.

⚙️ Get started

Install

Install using npm

npm install --save vue-audio-visual

for Vue 2 install version 2.5.1

npm i -S [email protected]

Use plugin

Install plugin in main.js:

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:

<av-bars src="/static/bach.mp3" bar-color="#CCC"> </av-bars>

Use component

Single component can be imported and used

<script setup lang="ts">
import { AVWaveform } from 'vue-audio-visual'
</script>

<template>
  <AVWaveform src="http://foo.com/music.ogg" />
</template>

Composable functions

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:

<script setup lang="ts">
import { ref } from 'vue'
import { useAVBars } from 'vue-audio-visual'

const player = ref(null)
const canvas = ref(null)
const mySource = "./symphony.mp3"

// composable function useAVBars
useAVBars(player, canvas, { src: mySource, canvHeight: 40, canvWidth: 200, barColor: 'lime' })
</script>

<template>
  <div>
    <audio ref="player" :src="mySource" controls />
    <canvas ref="canvas" />
  </div>
</template>

⚙️ 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".

Common props

Name	Type	Default	Description
src	String	null	URL of Audio element src attribute. When provided creates audio element wrapped in "div".
audio-controls	Boolean	true	Audio element controls attribute. When provided should display audio element with controls.
canv-fill-color	String	null	Canvas fill background RGB color. Default is null, which makes background transperent. Examples: canv-fill-color="#00AAFF"

AVLine 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"
line-width	Number	2	Graph line width in px. Integer or float number. Example: :line-width="0.5"
line-color	String, Array	#9F9	Graph line color. Can be string RGB color or Array of RGB color. When Array is given, plugin creates linear gradient and set it as background. Array value should be binded. Examples: line-color="#00AAFF" :line-color="['#FFF', 'rgb(0,255,127)', '#00f']"
fft-size	Number	128	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="512"

Composable function:

function useAVLine<T extends object>(
  player: Ref<HTMLAudioElement | null>,
  canvas: Ref<HTMLCanvasElement | null>,
  props: T,
);

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"

Composable function

function useAVBars<T extends object>(
  player: Ref<HTMLAudioElement | null>,
  canvas: Ref<HTMLCanvasElement | null>,
  props: T,
);

AVCircle props

Name	Type	Default	Description
canv-width	Number	100	Canvas element width. Example: :canv-width="600"
canv-height	Number	100	Canvas element height. Example: :canv-height="120"
radius	Number	0	Base circle radius. If zero, then will be calculated from canvas width: (canv-width / 2) * 0.7 Example: :radius="20"
line-width	Number	1	Frequency bit line width to draw. Example: :line-width="0.4"
line-space	Number	1	Space between lines to draw. Example: :line-space="2"
outline-color	String	#0000FF	Outline (contour) style RGB color. Example: outline-color="rgb(0,255,0)"
outline-width	Number	0.3	Outline (contour) line width. Float value. Example: :outline-width="1"
bar-width	Number	1	Frequency graph bar width. Example: :bar-width="1"
bar-length	Number	0	Frequency graph bar length/height. Default is a difference between radius and canvas width. Example: :bar-length="27"
bar-color	String, Array	[#FFF,#00F]	Bar style RGB color or radient gradient when array. Example: :bar-color="#12AA55"
progress	Boolean	true	Draw playtime progress meter. Example: :progress="false"
progress-width	Number	1	Playtime progress meter width. Example: :progress-width="2.4"
progress-color	String	#0000FF	Playtime progress meter color. Example: :progress-color="green"
progress-clockwise	Boolean	false	Playtime progress meter arc draw direction. Example: :progress-clockwise="true"
outline-meter-space	Number	3	Space between outline and progress meter. The bigger the closer to the circle centre. Example: :outline-meter-space="1"
playtime	Boolean	false	Draw played time as text in the center of the circle. Example: :playtime="true"
playtime-font	String	14px Monaco	Played time print font. Example: playtime-font="18px monospace"
playtime-color	String	#00f	Played time font color. Example: playtime-color="green"
rotate-graph	Boolean	false	Rotate graph clockwise enable. Example: :rotate-graph="true"
rotate-speed	Number	0.001	Rotate graph speed. Example: :rotate-speed="0.2"
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

function useAVCircle<T extends object>(
  player: Ref<HTMLAudioElement | null>,
  canvas: Ref<HTMLCanvasElement | null>,
  props: T,
);

AVWaveform props

Name	Type	Default	Description
canv-width	Number	500	Canvas element width. Example: :canv-width="600"
canv-height	Number	80	Canvas element height. Example: :canv-height="120"
played-line-width	Number	0.5	Waveform line width for played segment of audio. Example: :playtime-line-width="0.8"
played-line-color	String	navy	Waveform line color for played segment of audio. Example: :playtime-line-color="#ABC123"
noplayed-line-width	Number	0.5	Waveform line width for not yet played segment of audio Example: :noplayed-line-width="1"
noplayed-line-color	String	lime	Waveform line color for not yet played segment of audio. Example: :noplayed-line-color="grey"
playtime	Boolean	true	Display played time next to progress slider. Example: :playtime="false"
playtime-with-ms	Boolean	true	Display milliseconds in played when true. For example: 02:55.054. Example: :playtime-with-ms="false"
playtime-font-size	Number	12	Played time print font size in pixels. Example: :playtime-font-size="14"
playtime-font-family	String	monospace	Played time print font family. Example: :playtime-font-family="monaco"
playtime-font-color	String	grey	Played time print font RGB color string. Example: :playtime-font-color="#00f"
playtime-text-bottom	Boolean	false	Position playtime text bottom. Default on top. Example: playtime-text-bottom
playtime-slider	Boolean	true	Draw played time slider on the waveform. Example: :playtime-slider="false"
playtime-slider-color	String	red	Played slider color. Example: :playtime-slider-color="#fafafa"
playtime-slider-width	Number	1	Played slider width. Example: :playtime-slider-width="2.5"
playtime-clickable	Boolean	true	Allow click on waveform to change playtime. Example: :playtime-clickable="false"

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

export function useAVWaveform<T extends object>(
  player: Ref<HTMLAudioElement | null>,
  canvas: Ref<HTMLCanvasElement | null>,
  props: T,
  fetchOpts: CreateFetchOptions = {},
);

AVMedia props

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.

<script setup lang="ts">
import { AVMedia } from 'vue-audio-visual'
import { useUserMedia } from '@vueuse/core'
...
const { stream } = useUserMedia()
...
</script>

<template>
...
<AVMedia :media="stream" type="circle" />
...
</template>

Name	Type	Default	Description
media	MediaStream	none	Required property. See example above.
type	String	wform	Type of media visualization. Available types: 'wform', 'circle', 'frequ' and 'vbar'. If not set or not recognized then 'wform' is set. See examples in demo. Example: type="frequ"
canv-width	Number	null	Canvas element width. Default value depends on plugin type: circle: 80 frequ: 300 vbar: 50 wform: 200 Example: :canv-width="600"
canv-height	Number	null	Canvas element height. Default value depends on plugin type: circle: 80 frequ: 80 vbar: 20 wform: 40 Example: :canv-height="120"
canv-class	String	null	Canvas element css class name.
fft-size	Number	1024/8192	Represents the window size in samples that is used when performing a Fast Fourier Transform (FFT) to get frequency domain data. Default 8192 for the type 'wform' or 1024 for 'frequ' Example: :fft-size="512"
frequ-lnum	Number	60	Number of vertical lines for 'frequ' type. Example: :frequ-lnum="30"
frequ-line-cap	Boolean	false	Draw lines of 'frequ' type with rounded caps. Example: :frequ-line-cap="true"
frequ-direction	String	lr	Direction to draw the frequency. Available values: 'lr' or 'mo' (left to right or middle out). If not set or not recognized then 'lr' is set. Example: frequ-direction="mo"
line-color	String	#9F9	Graph line RGB color. Examples: line-color="#00AAFF"
line-width	Number	0.5 / 3	Graph line width in px. Integer or float number. If not set then 0.5 for 'wform' type and 3 for 'frequ' Example: :line-width="0.8"
radius	Number	0	Base 'circle' radius. Example: :radius="4"
connect-destination	Boolean	false	Analyser to connect to audio context's destination. Avoid echo during playback. Example: :connect-destination="true"
vbar-bg-color	String	#e1e1e1	Background canvas color for 'vbar' type
vbar-caps	Boolean	true	Rounded bars for 'vbar' types
vbar-space	Number	1	Space between bars in 'vbar' type
vbar-width	Number	4	Width of bars in 'vbar' type
vbar-fill-color	String	lime	Color of bars in 'vbar' type
vbar-right-color	String	#c0c0c0	Color of bars on right side in 'vbar' type

Composable function:

function useAVMedia<T extends object>(
  canvas: Ref<HTMLCanvasElement | null>,
  props: T,
);

License

MIT Copyright (c) 2018-present, Stas Kobzar

vue-audio-visual's Issues

What does the calculation in each function_drawLine mean?

Uncaught (in promise) TypeError: h is not a function

Uncaught (in promise) TypeError: h is not a function

Can vue-audio-visual Support range on AvWaveform type?

Hi staskobzar, thanks so much for making this awsome library. I just want to ask you that does it support time-range on the waveform-type like this below? If not, do you intend to update this feature(actually it can be a prop of waveform type) soon?

playtime prop is not used

Hi, thanks for a great audio visualization library! <3

I believe the drawTime function for Waveform should be called conditionally, only when props.playtime is true

vue-audio-visual/src/components/AvWaveform.js

Line 293 in 0d6f2dd

this.drawTime(time)

Would you accept a PR for this change?

TODO: Allow very long files load for av-waveform

Element crashes when trying to process too long files (2h +)

Add ability to mute audio output

I want to build an application where the user only sees his own microphone input. I'm using the av-media component which works really good, but it always outputs the audio.

The AudioContext was not allowed to start

On page loading console warn:

The AudioContext was not allowed to start. 
It must be resumed (or created) after a user gesture on the page. 
https://goo.gl/7K7WLu

is it possible to do delayed initialization?

Nuxt support

canvas and player load and can play audio source but animation does not render when playing.

Sample code doesn't seem to work

I tried the sample code and noticed that only av-circle worked. I copied and pasted from the readme and only changed the MP3 location. You can see it online here:

https://codesandbox.io/s/vueaudiovisual-test-pii5m

I cannot use ref-link to link audio

AudioContext is undefined on beforeDestroy hook

The issue is easily reproducible when the parent component is destroyed.

TypeError: Cannot read property 'close' of undefined
at VueComponent.beforeDestroy (AvBase.js?7883:192)

Do we need a simple check for the AudioContext to avoid errors?

How to set the canvas width to 100% width of a column?

Hi staskobzar, thank you so much for making this library but how can I set the width of canvas element(AvWaveform) to 100% width of a row like the audio element below?
I know that there's a prop "canv-width" but it only accepts number type so it's hard to set the canvas width equals to a row width(bootstrap).

Safari solution

I think I got a solution for the safari bug from here otalk/hark#38

The problem is in AvBase and AvMedia. Safari works if you only create one instance of AudioContext and analyser like this:

    this.audioCtx = this.audioCtx || new AudioContext()
    this.analyser = this.analyser || this.audioCtx.createAnalyser()

But I don't know if this will cause other problems. Somehow you can't create a new instance of an AudioContext in safari in some cases. The behavior seems random to me :/

Is it possible to update canvas-width dynamically on run-time?

Hello.
First of all, thanks for your great component.

I am using this one, and now i am facing one problem.
Question : is it possible to update canvas width dynamically for AvWaveForm?
For example, i set canv-width as 300 for initial, and in run-time, when i click button, i want to update it as 400, etc.
I tried to set flag for v-if, but it is also not helped.
Is there anyway to solve this problem?

Thanks again and hope for your reply.

I want to be able to load components on demand

I want to be able to load components on demand

no playback on ios 11.3 safari

Audio-Src Media to URL Instead of Local File?

Hi, I hope it's okay to write an informal issue.
When I specify, in VueJS, audio like:

:audio-src="currentSong.src"

the play and all shows up, but there's no sound? I can't hear anything when I press play (this sounds dumb).

The mp3 file is a URL to my google bucket (proper ACL, etc. for public read permissions set to all). What ways can I try to get it to work? If I try local path files, it does work.

update documentation to read proper import names

In the doc it's:

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

Vue.use(AudioVisual)

what works for me is

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

Vue.use(AVPlugin)

best,

M

Why not use `jest-canvas-mock` directly!

The package jest-canvas-mock@v1.0.2 has release new version.

Fixed:

• the canvas instance did not has function toDataUri.
• the ctx instance do not has canvas attribute.
• bug in latest version of jsdom.

cannot use ref-link for audio linking

Hello there when I try to use the ref link for getting my audio component I get an error:
Cannot read property 'load' of undefined
This seems to be the same #34
It does work if I use source directly in the av-circle, but I want the seperate audio tag for customisablity since I am creating a custom audio player interface

result of console.log(this.$refs.audioFile); is the correct audio component

thanks!

my code:

<audio
          :loop="innerLoop"
          ref="audioFile"
          preload="auto"
          style="display: none;"
          :src="file"
          :title="title"
          author="Kaj Munk College"
          :data-title="title"
        ></audio>
<av-circle ref-link="audioFile"></av-circle>

How to control the play / pause by code?

Hi.

It is possible to control the play/pause status by JS code?

It seems that the play/pause for audio component will not be sync with the UI component.

Why the page freezes after drawing <av-waveform>

Draw 6 av-waveform at the same time on one page, redraw 6 av-waveform on the next page, and the page will freeze after ten minutes. The cpu started to rise. How to solve it？
Feeling is this function still in operation after component destroyed, which lead to this. <this.waveform> is not recycling by GC, the passage of time will be a memory leak, Cause the page to freeze

Add space to av-waveform

Hello,

First thanks for this plugin !!
It's not realy a issue..

I've added the fonctionnality (adding space between line for av-waveform) and debug the playtime true/false..

Maybe you can add it in a future update !? :)

Line 33, 250, 302, 328, 388, 389, 399

AvWaveform.zip

Bruno

the audio restarts when i click on the wave in the av-waveform component

The audio restarts when I click on the waveform in the av-waveform, this is my code below.
Please I need help

What is the correct way to use a variable for audio-src?

Please see this minimal working example: https://codesandbox.io/embed/vue-template-68j1o

In the components/Waveform.vue I pass episodes from data to audio-src, and have a dropdown menu with an onChange method that sets episode to the episode selected in the menu. (I've used external .mp3 links for this working example).

If I change episodes to a hard-coded URL it works fine (though the audio element does not update when I change the menu).

Not rendering on iOS or macOS Safari

I am attaching the circle visualizer to an existing player that has a streaming mp3 as its source.
The visualization is appearing perfectly on Google Chrome and Firefox (both on macOS), but it fails to render on desktop (Version 13.0.3 (15608.3.10.1.4)) or iOS (13.3) Safari and there are no error messages logged.

Please let me know if there is any other info I can provide.

Code sample:

<av-circle
    ref-link="player"
    :canv-width="500"
    :canv-height="500"
    :line-width="0.5"
    :radius="125"
    :rotate-graph="true"
    :progress="false"
    :bar-color="['#f7ac46', '#f7c532']"
    :bar-width="4"
    v-show="isPlaying"
/>

Wave Form is not generating for mono channel mp3

I am trying to generate waveform of mp3 file mentioned below

http://www.mediafire.com/file/m0kx030imexx5fi/5f7b1c36cff2a806d352910f.mp3.mp3/file

Audio channels: mono
sampling 44.1 KHz

please guide me what needs to be done

currentTime is always set as 0

Hi.
First of all, thanks for your plugin.
This is really useful one.

---

I am now facing problems on seek from
I checked and in AvWaveform.js -- line 395
this.audio.currentTime = e.offsetX / this.canvWidth * this.duration

While i am debugging, i found out that, right side is correct, but when trying to update currentTime, it is becoming 0.
So player plays from the beginning again.

Any idea?
With your demo, it is working fine, but on my hand it s not. :(
Hope for your quick support. :)

Thank you.

Audio content received in REST API is not working.

I am using vue-audio-visual version 2.0.0

If am trying to use audio file stored in local or remote location then it's working properly. like

Local source:

<av-waveform
  :canv-width="600"
  audio-src="/assets/GetAudioContentDownload.wav"
></av-waveform>

Remote source:

<av-waveform
  :canv-width="600"
  audio-src="https://staskobzar.github.io/vue-audio-visual/file_example_MP3_1MG.mp3"
></av-waveform>

But if I try to do same thing with the REST API, 'Forward-Backward' controls are not working. And sometime download options also not showing e.g.

<av-waveform"
  :canv-width="600"
  :audio-src="baseURL+'<API endpoint>?id1='+Id1+'id2='+Id2+'&id3='+Id3+'&id4='+Id4"
></av-waveform>

Will help me to improve the issue?

Thank you in advance!

Muted audio do not show visualizer

Muted audio do not show visualizer, is there way to enable visualizer when audio is muted?

AVCircle as a feature for AVMedia

Love this project. One request – I'd love to use AVCircle with WebRTC/getUserMedia.

As a workaround, I'm currently trying to get it to visualize MediaStream data with a live srcObject to no avail. Works great once the recording is finished, but not during (even though previewplayer plays the live audio with no issue). Playtime duration works however, just no bars.

I'd be happy to help with a PR if you can help elaborate what exactly would need to be done

    <audio class="mt-4" ref="previewplayer" controls></audio>
    <av-circle
      :canv-height="350"
      :canv-width="350"
      :bar-color="'#fff'"
      :bar-width="5"
      :outline-width="0"
      :bar-length="80"
      :outline-color="'#fff'"
      :progress="false"
      :playtime="true"
      ref-link="previewplayer"
    ></av-circle>

...

    async onMediaSuccess(stream) {
      this.stream = stream;
      this.active = true;

      // for audio only
      this.mediaStreamRecorder = new RecordRTC(
        this.stream,
        this.mediaStreamRecorderOptions
      );

      await this.mediaStreamRecorder.startRecording();

      this.$refs.previewplayer.srcObject = this.stream;
      this.$refs.previewplayer.play();

      this.working = true;
    },

Plans on Updgrading to Vue3

I just upgraded my project into Vue3. But I got an error for this package. I realized that there are some breaking changes on the Global API of Vue2.

Any plans on updating to Vue3?

How can I redraw AvWaveform graphics when audio url changes

How can I redraw AvWaveform graphics when audio url changes？
i use ref-link to link audio，but when audio url change, AvWaveform not change.

Using Vue refs to parent audio element as alternative to "audio-src".

This will allow to use single audio element with many different plugin components.

How could I export frame by frame?

Hello and first of all, awesome implementation.

I want to export this to FFmpeg, but, is it possible to export frame by frame animation?
Do you have any code advice on this one?

[Bug] MediaElementAudioSource outputs zeros due to CORS access restrictions

I received this error:

MediaElementAudioSource outputs zeros due to CORS access restrictions

Here is a fix according to https://stackoverflow.com/questions/31308679/mediaelementaudiosource-outputs-zeros-due-to-cors-access-restrictions-local-mp3

in AvBase.js:

createHTMLElements: function () {
    ...
    audio.crossOrigin = 'anonymous'
    ...
  },

Dynamic rerender

When toggle show true → false → true not rerender visualization, and console warnings:

Construction of AnalyserNode is not useful when context is closed.
Connecting nodes after the context has been closed is not useful.
Connecting nodes after the context has been closed is not useful.

<template>
   <div>
     <audio ref="audio" src="...">
     <av-line v-if="show" ref-link="audio"/>
     <button @click="show = !show">toggle</button>
   </div>
</template>

<script>
export default {
   data() {
      return {
         show: true
      }
   }
}
</script>

In my other case I need dynamic changing visualization component I had same problem:

<template>
  <div>
    <audio ref="audio" src="...">
    <av-line v-if="av === 'line'" ref-link="audio" />
    <av-bars v-else-if="av === 'bars'" ref-link="audio" />
    <av-circle v-else-if="av === 'circle'" ref-link="audio" />
    <select v-model="av">
       <option value="line">line</option>
       <option value="bars">bars</option>
       <option value="circle">circle</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      av: 'line'
    }
  }
}
</script>

Thanks for fast solving 😌

ref-link error .load() on AvBase.js

As i review the code. I saw that this code no longer working on vuejs2
if (this.refLink) { audio = this.$parent.$refs[this.refLink] }
I changed it to something static like
if (this.refLink) { audio = document.getElementById('audioPlayer') }
and I added id attribute on my audio tag to catch and call the player to play it.
and I also added audio.crossOrigin = "anonymous" to bypass the CORS error

i hope this bug would be fixed on next update. im using my own fixed on modifying the AvBase.js

Is it possible it's not up-to-date when doing npm install?

I see the commit for the cors-anonym fix, but I can't see in the code from my project after doing "npm install --save vue-audio-visual".

Thanks

av-circle playtime in in the center - UI

HI thanks for this great plugin!
i use the av-circle component - but the playtime is not in the middle, here is my code :

<av-circle :outline-width="0" :progress-width="5" :outline-meter-space="5" :playtime="true" playtime-font="18px Monaco" :audio-src="file()" ></av-circle>

TODO: Media stream visualization

Visualization of RTPPeerConnection for example for WebRTC

Its possible to pass a custom axios instance?

I'm having some trouble using this awesome component because my project uses an Axios instance with several configs... Idk, perhaps a prop? Passing the instance to be used. I'm talking specifically of this.

Build error using Vuetify: Unexpected token: punc ())

I got this error when trying to build the app in production mode.

ERROR in static/js/vendor.e8bb63ea9110771343a2.js from UglifyJs
Unexpected token: punc ()) [./~/vue-audio-visual/src/components/AvCircle.js:102,0][static/js/vendor.e8bb63ea9110771343a2.js:60172,14]

[Bug] Failed to construct 'AudioContext'

I'm receiving this error in my web page:

DOMException: Failed to construct 'AudioContext': The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6).

I have multiple audio players on my website and here is my implementation:

<av-line
        :line-width="2"
        line-color="lime"
        :audio-src="scope.row.recording_url"
        ref="popover_rec_{{scope.row.id}}"
        v-if="recording_visible">
</av-line>

TODO: Allow dynamically replace audio source for the elements.

npm install vue vue-audio-visual doesn't work

# npm install vue vue-audio-visual
 npm WARN npm npm does not support Node.js v10.21.0
 npm WARN npm You should probably upgrade to a newer version of node as we
 npm WARN npm can't make any promises that npm will work with this version.
 npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
 npm WARN npm You can find the latest version at https://nodejs.org/

 > [email protected] postinstall /var/www/cabinet/node_modules/core-js
 > node -e "try{require('./postinstall')}catch(e){}"

 Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

 The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
 > https://opencollective.com/core-js 
 > https://www.patreon.com/zloirock 

 Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

 npm notice created a lockfile as package-lock.json. You should commit this file.
+ [email protected]
+ [email protected]
 added 7 packages from 9 contributors in 8.736s

# ls node_modules/vue-audio-visual/
 LICENSE  README.md  babel.config.js  package.json  src

I don't see dist/ folder in the module

Todo: Support more then 6 AudioContexts

#2

Limited by browsers. Allow dynamically re-render elements to overcome limitation.

Canvas 100% width

How can i fit canvas to parent div width?

No visualizations when built as a part of web component using Vue CLI 4

I am using av-waveform component to display visualizations when recording from microphone.
This is screenshot of my Vue app when built as part of normal web page:

and when built the same in web component mode it does not appear (voice gets recorded normally. i.e. no problems with retrieving and setting user media. no changes in code between normal build and web component mode build):

there are no errors in browser console or network tab.

build command: yarn build --target wc --inline-vue --name=my-component

Pre-load media source and create waveform graph.