Getting Started

This section will help you add the Vue AudioMotion Analyzer plugin to your Vue project.

  • Step 1: Install using your preferred package manager;
yarn
# install in your project
yarn add vue-audiomotion-analyzer
npm
# install in your project
npm install vue-audiomotion-analyzer
pnpm
# install in your project
pnpm install vue-audiomotion-analyzer
  • Step 2: Initialize the plugin in main script:
js
// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { VueAudioMotionAnalyzerPlugin } from 'vue-audiomotion-analyzer'

const app = createApp(App)
app.use(VueAudioMotionAnalyzerPlugin)
app.mount('#app')
  • Step 3: Add the VueAudioMotionAnalyzer component and pass an audio source as prop:
js
<script setup>
import { onMounted, ref } from 'vue'

const audio = ref()
onMounted(() => {
    audio.value = document.getElementById('audio')
})
</script>

<template>
    <audio id="audio" ref="audioRef" src="https://ice5.somafm.com/deepspaceone-128-mp3" control crossorigin="anonymous"></audio>
    <VueAudioMotionAnalyzer :source="audio" />
</template>
ts
<script setup lang="ts">
import { onMounted, ref } from 'vue'

const audio = ref<HTMLMediaElement>()
onMounted(() => {
    audio.value = <HTMLMediaElement> document.getElementById('audio')
})
</script>

<template>
    <audio id="audio" ref="audioRef" src="https://ice5.somafm.com/deepspaceone-128-mp3" control crossorigin="anonymous"></audio>
    <VueAudioMotionAnalyzer :source="audio" />
</template>
Edit this page on GitHub