vue-audio-visual

Vue HTML5 audio visualization components

• Overview
• Install and setup
• API
  • Common props
  • AvLine props
  • AvBars props
  • AvCircle props
  • AvWaveform props
  • AvMedia props
• Issues
• 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.

There is a DEMO available.

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.

Component AvMedia. Vue template name <av-media>

    <av-media
      :media="mediaObject"
    ></av-media>

This will create following media element:

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

AvMedia props

Please note that common pros are not usable for that element.

Vue component example with media from user device.

<template>
  <audio ref="player" controls />
  <av-media :media="media" />
</template>
<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            media: null
        }
    },
    mounted () {
      const constraints = { audio: true, video: false }
      navigator.mediaDevices.getUserMedia(constraints).
        then(media => {
          this.media = media
          this.$refs.player.srcObject = media
        })
    }
}
</script>

License

MIT Copyright (c) 2018-present, Stas Kobzar