{"name":"vue-audio-visual: Dynamic Audio Visualization Components for Vue.js","description":"vue-audio-visual is a powerful Vue.js plugin offering a suite of HTML5 audio visualization components. Built with the Web Audio API, it enables developers to easily integrate dynamic and visually appealing audio spectrums, waveforms, and circular visualizers into their Vue applications. This library provides flexible components and composable functions for a seamless development experience.","github":"https://github.com/staskobzar/vue-audio-visual","url":"https://osrepos.com/repo/staskobzar-vue-audio-visual","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/staskobzar-vue-audio-visual","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/staskobzar-vue-audio-visual.md","json":"https://osrepos.com/repo/staskobzar-vue-audio-visual.json","topics":["audio","canvas","http5-audio-api","vue","vuejs","waveform","typescript","frontend"],"keywords":["audio","canvas","http5-audio-api","vue","vuejs","waveform","typescript","frontend"],"stars":null,"summary":"vue-audio-visual is a powerful Vue.js plugin offering a suite of HTML5 audio visualization components. Built with the Web Audio API, it enables developers to easily integrate dynamic and visually appealing audio spectrums, waveforms, and circular visualizers into their Vue applications. This library provides flexible components and composable functions for a seamless development experience.","content":"## Introduction\n\n`vue-audio-visual` is an innovative Vue.js plugin designed to bring dynamic audio visualization to your web applications. Leveraging the power of the HTML5 Web Audio API, this library provides a collection of versatile Vue components that enable developers to effortlessly display audio spectrums, waveforms, and other engaging visual effects. It is fully compatible with Vue 3, with a specific version available for Vue 2 projects, ensuring broad applicability.\n\nThe plugin offers various components like `AvLine`, `AvBars`, `AvCircle`, `AvWaveform`, and `AvMedia`, each providing a unique way to visualize audio data. Whether you need a simple line graph, a complex bar spectrum, or an interactive waveform, `vue-audio-visual` has a component to fit your needs. You can explore working examples on the official <a href=\"https://staskobzar.github.io/vue-audio-visual/\" target=\"_blank\">DEMO page</a>.\n\n## Installation\n\nGetting started with `vue-audio-visual` is straightforward.\n\nInstall the package using npm:\n\nbash\nnpm install --save vue-audio-visual\n\n\nFor Vue 2 projects, you should install version 2.5.1:\n\nbash\nnpm i -S vue-audio-visual@2.5.1\n\n\nAfter installation, you can register the plugin globally in your `main.js` file:\n\ntypescript\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport { AVPlugin } from \"vue-audio-visual\";\n\nconst app = createApp(App);\napp.use(AVPlugin);\n\napp.mount(\"#app\");\n\n\nAlternatively, you can import and use individual components as needed:\n\ntypescript\n<script setup lang=\"ts\">\nimport { AVWaveform } from 'vue-audio-visual'\n</script>\n\n<template>\n  <AVWaveform src=\"http://foo.com/music.ogg\" />\n</template>\n\n\nThe plugin also provides composable functions for each component, offering greater control and flexibility by allowing direct access to audio and canvas element refs:\n\ntypescript\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useAVBars } from 'vue-audio-visual'\n\nconst player = ref(null)\nconst canvas = ref(null)\nconst mySource = \"./symphony.mp3\"\n\nuseAVBars(player, canvas, { src: mySource, canvHeight: 40, canvWidth: 200, barColor: 'lime' })\n</script>\n\n<template>\n  <div>\n    <audio ref=\"player\" :src=\"mySource\" controls />\n    <canvas ref=\"canvas\" />\n  </div>\n</template>\n\n\n## Examples\n\nHere are some examples of the visualization components provided by `vue-audio-visual`:\n\n### AvLine\n\nThe `AvLine` component draws a continuous line graph representing the audio spectrum.\n\nhtml\n<av-line :line-width=\"2\" line-color=\"lime\" src=\"/static/music.mp3\"></av-line>\n\n\n### AvBars\n\nThe `AvBars` component displays an audio spectrum as a series of vertical bars, with customizable colors and cap effects.\n\nhtml\n<av-bars\n  caps-color=\"#FFF\"\n  :bar-color=\"['#f00', '#ff0', '#0f0']\"\n  canv-fill-color=\"#000\"\n  :caps-height=\"2\"\n  src=\"/static/bach.mp3\"\n></av-bars>\n\n\n### AvCircle\n\nThe `AvCircle` component renders a circular audio visualizer, often including playtime progress and text.\n\nhtml\n<av-circle\n  :outline-width=\"0\"\n  :progress-width=\"5\"\n  :outline-meter-space=\"5\"\n  :playtime=\"true\"\n  playtime-font=\"18px Monaco\"\n  src=\"/static/bach.mp3\"\n></av-circle>\n\n\n### AvWaveform\n\nThe `AvWaveform` component generates a clickable waveform of the audio, allowing users to seek through the track.\n\nhtml\n<av-waveform src=\"/static/bar.mp3\"></av-waveform>\n\n\n### AvMedia\n\nThe `AvMedia` component visualizes a `MediaStream` object, useful for microphone input or other live audio sources.\n\ntypescript\n<script setup lang=\"ts\">\nimport { AVMedia } from 'vue-audio-visual'\nimport { useUserMedia } from '@vueuse/core'\n// ...\nconst { stream } = useUserMedia()\n// ...\n</script>\n\n<template>\n  <!-- ... -->\n  <AVMedia :media=\"stream\" type=\"circle\" />\n  <!-- ... -->\n</template>\n\n\n## Why Use It?\n\n`vue-audio-visual` stands out as an excellent choice for several reasons:\n\n*   **Ease of Integration**: Quickly add sophisticated audio visualizations to your Vue.js projects with minimal setup.\n*   **Rich Component Library**: Offers a variety of pre-built components (`AvLine`, `AvBars`, `AvCircle`, `AvWaveform`, `AvMedia`) to suit different aesthetic and functional requirements.\n*   **Modern Web API**: Built on the HTML5 Web Audio API, ensuring high performance and broad browser compatibility.\n*   **Vue 3 & Vue 2 Support**: Provides compatibility for both major versions of Vue.js, making it adaptable for various projects.\n*   **Composable Functions**: Offers a flexible API with composable functions, giving developers fine-grained control over audio and canvas elements.\n*   **Customization**: Each component comes with extensive props for detailed customization of colors, sizes, and behaviors.\n\n## Links\n\n*   **GitHub Repository**: <a href=\"https://github.com/staskobzar/vue-audio-visual\" target=\"_blank\">staskobzar/vue-audio-visual</a>\n*   **Demo Page**: <a href=\"https://staskobzar.github.io/vue-audio-visual/\" target=\"_blank\">Live Demo</a>\n*   **npm Package**: <a href=\"https://www.npmjs.com/package/vue-audio-visual\" target=\"_blank\">vue-audio-visual on npm</a>","metrics":{"detailViews":7,"githubClicks":2},"dates":{"published":null,"modified":"2025-10-12T04:00:52.000Z"}}