Configuration
All the available options of the audioMotion-analyzer can be passed as an object using the options prop of the Vue plugin:
js
<script setup>
import { onMounted, ref } from 'vue'
const options = {
alphaBars: false,
audioCtx: undefined, // constructor only
barSpace: 0.1,
bgAlpha: 0.7,
connectSpeakers: true, // constructor only
fftSize: 8192,
fillAlpha: 1,
fsElement: undefined, // constructor only
gradient: ‘classic’,
height: undefined,
ledBars: false,
lineWidth: 0,
loRes: false,
lumiBars: false,
maxDecibels: -25,
maxFreq: 22000,
minDecibels: -85,
minFreq: 20,
mirror: 0,
mode: 0,
onCanvasDraw: undefined,
onCanvasResize: undefined,
outlineBars: false,
overlay: false,
radial: false,
reflexAlpha: 0.15,
reflexBright: 1,
reflexFit: true,
reflexRatio: 0,
showBgColor: true,
showFPS: false,
showPeaks: true,
showScaleX: true,
showScaleY: false,
smoothing: 0.5,
source: undefined, // constructor only
spinSpeed: 0,
splitGradient: false,
start: true,
channelLayout: 'single',
useCanvas: true,
volume: 1,
width: undefined
}
const audio = ref()
onMounted(() => { audio.value = document.getElementById('audio') })
</script>
<template>
<audio id="audio" ref="audioRef" src="..."></audio>
<VueAudioMotionAnalyzer :source="audio" :options="options" />
</template>
TypeScript
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { Options } from 'vue-audiomotion-analyzer'
const options: Options = {
mode: 2,
showScaleX: false
}
const audio = ref<HTMLMediaElement>()
onMounted(() => {
audio.value = <HTMLMediaElement> document.getElementById('audio')
})
</script>
<template>
<audio id="audio" ref="audioRef" src="..."></audio>
<VueAudioMotionAnalyzer :source="audio" />
</template>