{"id":19185686,"url":"https://github.com/staskobzar/vue-audio-visual","last_synced_at":"2025-05-16T06:06:48.620Z","repository":{"id":28689511,"uuid":"116201890","full_name":"staskobzar/vue-audio-visual","owner":"staskobzar","description":"VueJS audio visualization components","archived":false,"fork":false,"pushed_at":"2025-05-01T01:17:54.000Z","size":7954,"stargazers_count":754,"open_issues_count":29,"forks_count":115,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-16T06:06:38.864Z","etag":null,"topics":["audio","canvas","http5-audio-api","http5-audio-visualizer","vue","vuejs","waveform"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/staskobzar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-01-04T01:55:44.000Z","updated_at":"2025-05-14T07:58:25.000Z","dependencies_parsed_at":"2024-01-02T23:30:15.919Z","dependency_job_id":"cc0cdace-0e2a-43d7-a2de-2583805a3ad0","html_url":"https://github.com/staskobzar/vue-audio-visual","commit_stats":{"total_commits":189,"total_committers":15,"mean_commits":12.6,"dds":0.6296296296296297,"last_synced_commit":"7a32f1f2ecadf82dfcf6e05890a8bc2467dba34d"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staskobzar%2Fvue-audio-visual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staskobzar%2Fvue-audio-visual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staskobzar%2Fvue-audio-visual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staskobzar%2Fvue-audio-visual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/staskobzar","download_url":"https://codeload.github.com/staskobzar/vue-audio-visual/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478190,"owners_count":22077676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","canvas","http5-audio-api","http5-audio-visualizer","vue","vuejs","waveform"],"created_at":"2024-11-09T11:11:32.159Z","updated_at":"2025-05-16T06:06:43.603Z","avatar_url":"https://github.com/staskobzar.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["音频视频","UI Components","Audio / Video"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/staskobzar/vue-audio-visual/blob/master/static/logo.png?raw=true\"/\u003e\n\u003c/p\u003e\n\n# vue-audio-visual\n\n[![Node.js CI](https://github.com/staskobzar/vue-audio-visual/actions/workflows/node.js.yml/badge.svg)](https://github.com/staskobzar/vue-audio-visual/actions/workflows/node.js.yml)\n[![codecov](https://codecov.io/gh/staskobzar/vue-audio-visual/branch/master/graph/badge.svg)](https://codecov.io/gh/staskobzar/vue-audio-visual)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/92c77d2548074f3d9165e3e45b5aa2a4)](https://www.codacy.com/gh/staskobzar/vue-audio-visual/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=staskobzar/vue-audio-visual\u0026utm_campaign=Badge_Grade)\n[![MIT](https://img.shields.io/npm/l/vue-audio-visual.svg)](https://github.com/staskobzar/vue-audio-visual/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/v/vue-audio-visual.svg)](https://www.npmjs.com/package/vue-audio-visual)\n\n\u003e Vue HTML5 audio visualization components\n\n- [Overview](#overview)\n- [Get started](#get-started)\n  - [Install](#install)\n  - [Use plugin](#use-plugin)\n  - [Use component](#use-component)\n  - [Composable functions](#composable-functions)\n- [API details](#api)\n  - [Common props](#common-props)\n  - [Common events](#common-events)\n  - [AvLine props](#avline-props)\n  - [AvBars props](#avbars-props)\n  - [AvCircle props](#avcircle-props)\n  - [AvWaveform props](#avwaveform-props)\n  - [AvMedia props](#avmedia-props)\n- [Issues](#issues)\n- [License](#license)\n\n## UPDATE NOTES\n\n\u003e [!WARNING]\n\u003e Plugin current version is compatibale only with **Vue v3**. For\n\u003e Vue2 use plugin version 2.5.1. See [install](#install-and-setup) chapter for\n\u003e details.\n\n## Overview\n\nAn audio spectrum visualizer plugin for [VueJS](https://vuejs.org/) framework.\nIt is built with HTML5\n[Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\nand compatible with all browsers that support HTML5 audio API. It provides\nseveral Vue components that allows to draw light and nice visualization for\n\"audio\" HTML elements.\n\n\u003e [!NOTE]\n\u003e Visit [**DEMO page**](https://staskobzar.github.io/vue-audio-visual/)\n\u003e for working examples.\n\n_Usage examples_:\n\nComponent **AvLine**. Vue template name **\u0026lt;av-line\u0026gt;**\n\n```html\n\u003cav-line :line-width=\"2\" line-color=\"lime\" src=\"/static/music.mp3\"\u003e\u003c/av-line\u003e\n```\n\nThis will create following element:\n\n![AvLine Intro](https://github.com/staskobzar/vue-audio-visual/blob/master/static/overview-vav-line.png?raw=true)\n\nComponent **AvBars**. Vue template name **\u0026lt;av-bars\u0026gt;**\n\n```html\n\u003cav-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\u003e\u003c/av-bars\u003e\n```\n\nThis will create following element:\n\n![AvBars Intro](https://github.com/staskobzar/vue-audio-visual/blob/master/static/overview-vav-bars.png?raw=true)\n\nComponent **AvCircle**. Vue template name **\u0026lt;av-circle\u0026gt;**\n\n```html\n\u003cav-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\u003e\u003c/av-circle\u003e\n```\n\nThis will create following element:\n\n![AvCircle Intro](https://github.com/staskobzar/vue-audio-visual/blob/master/static/overview-vav-circle.png?raw=true)\n\nComponent **AvWaveform**. Vue template name **\u0026lt;av-waveform\u0026gt;**\n\n```html\n\u003cav-waveform src=\"/static/bar.mp3\"\u003e\u003c/av-waveform\u003e\n```\n\nThis will create following waveform element:\n\n![AvWaveform Intro](https://github.com/staskobzar/vue-audio-visual/blob/master/static/overview-vav-waveform.png?raw=true)\n\nComponent will pre-load audio content and generate clickable waveform.\n\nComponent **AvMedia**. Vue component **\u0026lt;AvMedia\u0026gt;**\n\n```html\n\u003cAvMedia :media=\"mediaObject\" type=\"vbar\"\u003e\u003c/AvMedia\u003e\n```\n\nThis will create following media element:\n\n![AvMedia Intro](https://user-images.githubusercontent.com/147280/201538832-e20b12bc-ac6f-4137-9346-cd6d9e30bdd1.png)\n\nThere are more media types. See details below.\n\n## :gear: Get started\n\n### Install\n\nInstall using npm\n\n```\nnpm install --save vue-audio-visual\n```\n\nfor Vue 2 install version 2.5.1\n\n```\nnpm i -S vue-audio-visual@2.5.1\n```\n\n### Use plugin\n\nInstall plugin in main.js:\n\n```typescript\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\nThen anywhere is your app you can use it like this:\n\n```html\n\u003cav-bars src=\"/static/bach.mp3\" bar-color=\"#CCC\"\u003e \u003c/av-bars\u003e\n```\n\n### Use component\n\nSingle component can be imported and used\n\n```ts\n\u003cscript setup lang=\"ts\"\u003e\nimport { AVWaveform } from 'vue-audio-visual'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cAVWaveform src=\"http://foo.com/music.ogg\" /\u003e\n\u003c/template\u003e\n```\n\n### Composable functions\n\nPlugin provides composable \"use\" functions for each plugin component. Actually,\neach component uses composable function inside. See, for example,\n[line component](https://github.com/staskobzar/vue-audio-visual/blob/master/src/components/AVLine.vue).\n\nComposable functions use audio and canvas element refs. It is handy when you\nneed full access to audio or canvas elements. In the same time it is easy to\nuse:\n\n```ts\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { useAVBars } from 'vue-audio-visual'\n\nconst player = ref(null)\nconst canvas = ref(null)\nconst mySource = \"./symphony.mp3\"\n\n// composable function useAVBars\nuseAVBars(player, canvas, { src: mySource, canvHeight: 40, canvWidth: 200, barColor: 'lime' })\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003caudio ref=\"player\" :src=\"mySource\" controls /\u003e\n    \u003ccanvas ref=\"canvas\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## :gear: API\n\nThere are several components that comes with plugin. Here is the list of\navailable plugins:\n\n| Name | Component name | Composable function |\n| -----------| -------------- | ------------------- |\n| av-bars | AVBars | useAVBars |\n| av-circle | AvCircle | useAVCircle |\n| av-line | AVLine | useAVLine |\n| av-media | AVMedia | useAVMedia |\n| av-waveform | AVWaveform | useAVWaveform |\n\nThere are props that are common for all components and special props for each\ncomponent. All props for components' names follow vue specs when using wiht\ncomposable functions. Meaning when prop's name is \"_foo-bar_\" then in composable\nfunction parameter it is expected to be \"_fooBar_\".\n\n### Common props\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth width=\"150\"\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003esrc\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        URL of Audio element src attribute. When provided creates audio element\n        wrapped in \"div\".\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eaudio-controls\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Audio element controls attribute. When provided should\n        display audio element with controls.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-fill-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas fill background RGB color.\n          Default is null, which makes background transperent.\n          Examples:\u003cbr/\u003e\n          \u003ccode\u003ecanv-fill-color=\"#00AAFF\"\u003c/code\u003e\u003cbr/\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### AVLine props\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth width=\"150\"\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e300\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element width. Default 300.\n          Example: \u003ccode\u003e:canv-width=\"600\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-height\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e80\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element height. Default 80.\n          Example: \u003ccode\u003e:canv-height=\"120\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eline-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e2\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGraph line width in px. Integer or float number.\n          Example: \u003ccode\u003e:line-width=\"0.5\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eline-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e, \u003ccode\u003eArray\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#9F9\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGraph line color. Can be string RGB color or Array of RGB color.\n          When Array is given, plugin creates linear gradient and set it as background.\n          Array value should be binded.\n          Examples:\u003cbr/\u003e\n          \u003ccode\u003eline-color=\"#00AAFF\"\u003c/code\u003e\u003cbr/\u003e\n          \u003ccode\u003e:line-color=\"['#FFF', 'rgb(0,255,127)', '#00f']\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efft-size\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e128\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRepresents the window size in samples that is used when performing\n          a Fast Fourier Transform (FFT) to get frequency domain data.\u003cbr/\u003e\n          Must be power of 2 between 2\u003csup\u003e5\u003c/sup\u003e and 2\u003csup\u003e15\u003c/sup\u003e.\n          Example: \u003ccode\u003e:fft-size=\"512\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nComposable function:\n\n```ts\nfunction useAVLine\u003cT extends object\u003e(\n  player: Ref\u003cHTMLAudioElement | null\u003e,\n  canvas: Ref\u003cHTMLCanvasElement | null\u003e,\n  props: T,\n);\n```\n\n### AVBars props\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth width=\"150\"\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e300\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element width. Default 300.\n          Example: \u003ccode\u003e:canv-width=\"600\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-height\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e80\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element height. Default 80.\n          Example: \u003ccode\u003e:canv-height=\"120\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ebar-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e5\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWidth of bars in pixels. Example: \u003ccode\u003e:bar-width=\"12\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ebar-space\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eSpace between bars. Example: \u003ccode\u003e:bar-space=\"1.6\"\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ebar-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e, \u003ccode\u003eArray\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#0A0AFF\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eBar fill color. Can be string RGB color or canvas gradients array.\u003cbr/\u003e\n          Examples:\u003cbr/\u003e\n          \u003ccode\u003ebar-color=\"#00AAFF\"\u003c/code\u003e\u003cbr/\u003e\n          \u003ccode\u003e:bar-color=\"['#FFF', 'rgb(0,255,127)', 'green']\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecaps-height\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCreate caps on bars with given height in pixels.\n          When zero no caps created. Example: \u003ccode\u003e:caps-height=\"2\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecaps-drop-speed\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0.9\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCaps drop down animation speed. The higher nubmer the faster caps are going down.\n          Example: \u003ccode\u003e:caps-drop-speed=\"0.5\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecaps-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#A0A0FF\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCaps rectangles RGB color.\n          Example: \u003ccode\u003ecaps-color=\"lime\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ebrick-height\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDraw bar as bricks when height is set and not zero.\u003cbr/\u003e\n          Example: \u003ccode\u003e:brick-height=\"6\"\u003c/code\u003e\u003cbr/\u003e\n          \u003cimg src=\"https://github.com/staskobzar/vue-audio-visual/blob/master/static/vav-bars-bricks.png?raw=true\" /\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ebrick-space\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eSpace between bricks. Example: \u003ccode\u003e:brick-space=\"2\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003esymmetric\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDraw bars symmetric to canvas vertical center.\n          Example: \u003ccode\u003e:symmetric=\"true\"\u003c/code\u003e\u003cbr/\u003e\n          \u003cimg src=\"https://github.com/staskobzar/vue-audio-visual/blob/master/static/vav-bars-symm.png?raw=true\" /\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efft-size\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1024\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRepresents the window size in samples that is used when performing\n          a Fast Fourier Transform (FFT) to get frequency domain data.\u003cbr/\u003e\n          Must be power of 2 between 2\u003csup\u003e5\u003c/sup\u003e and 2\u003csup\u003e15\u003c/sup\u003e.\n          Example: \u003ccode\u003e:fft-size=\"2048\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nComposable function\n\n```ts\nfunction useAVBars\u003cT extends object\u003e(\n  player: Ref\u003cHTMLAudioElement | null\u003e,\n  canvas: Ref\u003cHTMLCanvasElement | null\u003e,\n  props: T,\n);\n```\n\n### AVCircle props\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth width=\"150\"\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e100\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element width.\n          Example: \u003ccode\u003e:canv-width=\"600\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-height\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e100\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element height.\n          Example: \u003ccode\u003e:canv-height=\"120\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eradius\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eBase circle radius. If zero, then will be calculated from canvas\n          width: (canv-width / 2) * 0.7\n          Example: \u003ccode\u003e:radius=\"20\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eline-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eFrequency bit line width to draw.\n          Example: \u003ccode\u003e:line-width=\"0.4\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eline-space\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eSpace between lines to draw.\n          Example: \u003ccode\u003e:line-space=\"2\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eoutline-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#0000FF\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eOutline (contour) style RGB color.\n          Example: \u003ccode\u003eoutline-color=\"rgb(0,255,0)\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eoutline-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0.3\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eOutline (contour) line width. Float value.\n          Example: \u003ccode\u003e:outline-width=\"1\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ebar-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eFrequency graph bar width.\n          Example: \u003ccode\u003e:bar-width=\"1\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ebar-length\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eFrequency graph bar length/height.\n          Default is a difference between radius and canvas width.\n          Example: \u003ccode\u003e:bar-length=\"27\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ebar-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e, \u003ccode\u003eArray\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e[#FFF,#00F]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eBar style RGB color or radient gradient when array.\n          Example: \u003ccode\u003e:bar-color=\"#12AA55\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eprogress\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDraw playtime progress meter.\n          Example: \u003ccode\u003e:progress=\"false\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eprogress-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlaytime progress meter width.\n          Example: \u003ccode\u003e:progress-width=\"2.4\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eprogress-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#0000FF\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlaytime progress meter color.\n          Example: \u003ccode\u003e:progress-color=\"green\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eprogress-clockwise\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlaytime progress meter arc draw direction.\n          Example: \u003ccode\u003e:progress-clockwise=\"true\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eoutline-meter-space\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e3\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eSpace between outline and progress meter. The bigger the closer to the circle centre.\n          Example: \u003ccode\u003e:outline-meter-space=\"1\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDraw played time as text in the center of the circle.\n          Example: \u003ccode\u003e:playtime=\"true\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-font\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e14px Monaco\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlayed time print font.\n          Example: \u003ccode\u003eplaytime-font=\"18px monospace\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#00f\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlayed time font color.\n          Example: \u003ccode\u003eplaytime-color=\"green\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003erotate-graph\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRotate graph clockwise enable.\n          Example: \u003ccode\u003e:rotate-graph=\"true\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003erotate-speed\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0.001\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRotate graph speed.\n          Example: \u003ccode\u003e:rotate-speed=\"0.2\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efft-size\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1024\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRepresents the window size in samples that is used when performing\n          a Fast Fourier Transform (FFT) to get frequency domain data.\u003cbr/\u003e\n          Must be power of 2 between 2\u003csup\u003e5\u003c/sup\u003e and 2\u003csup\u003e15\u003c/sup\u003e.\n          Example: \u003ccode\u003e:fft-size=\"2048\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nComposable function\n\n```ts\nfunction useAVCircle\u003cT extends object\u003e(\n  player: Ref\u003cHTMLAudioElement | null\u003e,\n  canvas: Ref\u003cHTMLCanvasElement | null\u003e,\n  props: T,\n);\n```\n\n### AVWaveform props\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth width=\"150\"\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e500\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element width.\n          Example: \u003ccode\u003e:canv-width=\"600\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-height\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e80\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element height.\n          Example: \u003ccode\u003e:canv-height=\"120\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplayed-line-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0.5\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWaveform line width for played segment of audio.\n          Example: \u003ccode\u003e:playtime-line-width=\"0.8\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplayed-line-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enavy\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWaveform line color for played segment of audio.\n          Example: \u003ccode\u003e:playtime-line-color=\"#ABC123\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enoplayed-line-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0.5\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWaveform line width for not yet played segment of audio\n          Example: \u003ccode\u003e:noplayed-line-width=\"1\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enoplayed-line-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003elime\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWaveform line color for not yet played segment of audio.\n          Example: \u003ccode\u003e:noplayed-line-color=\"grey\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDisplay played time next to progress slider.\n          Example: \u003ccode\u003e:playtime=\"false\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-with-ms\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDisplay milliseconds in played when true. For example: 02:55.054.\n          Example: \u003ccode\u003e:playtime-with-ms=\"false\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-font-size\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e12\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlayed time print font size in pixels.\n          Example: \u003ccode\u003e:playtime-font-size=\"14\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-font-family\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003emonospace\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlayed time print font family.\n          Example: \u003ccode\u003e:playtime-font-family=\"monaco\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-font-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003egrey\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlayed time print font RGB color string.\n          Example: \u003ccode\u003e:playtime-font-color=\"#00f\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-text-bottom\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePosition playtime text bottom. Default on top.\n          Example: \u003ccode\u003eplaytime-text-bottom\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-slider\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDraw played time slider on the waveform.\n          Example: \u003ccode\u003e:playtime-slider=\"false\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-slider-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003ered\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlayed slider color.\n          Example: \u003ccode\u003e:playtime-slider-color=\"#fafafa\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-slider-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePlayed slider width.\n          Example: \u003ccode\u003e:playtime-slider-width=\"2.5\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplaytime-clickable\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAllow click on waveform to change playtime.\n          Example: \u003ccode\u003e:playtime-clickable=\"false\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nComposable function is using [useFetch](https://vueuse.org/core/usefetch/) from\n[@vueuse/core](https://vueuse.org/) package. `useAVWaveform` last argument is\noptions for \"createFetch\" function from \"useFetch\" module.\n\n```ts\nexport function useAVWaveform\u003cT extends object\u003e(\n  player: Ref\u003cHTMLAudioElement | null\u003e,\n  canvas: Ref\u003cHTMLCanvasElement | null\u003e,\n  props: T,\n  fetchOpts: CreateFetchOptions = {},\n);\n```\n\n### AVMedia props\n\nComponent expects `MediaStream` object. You can get it directly from\n`navigator.mediaDevices` or from @vueuse/core library function\n[useUserMedia](https://vueuse.org/core/useUserMedia/). Live example can be found\nin\n[App.vue](https://github.com/staskobzar/vue-audio-visual/blob/master/src/App.vue).\n\n```ts\n\u003cscript setup lang=\"ts\"\u003e\nimport { AVMedia } from 'vue-audio-visual'\nimport { useUserMedia } from '@vueuse/core'\n...\nconst { stream } = useUserMedia()\n...\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n...\n\u003cAVMedia :media=\"stream\" type=\"circle\" /\u003e\n...\n\u003c/template\u003e\n```\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth width=\"150\"\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emedia\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eMediaStream\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enone\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRequired property. See example above.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etype\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003ewform\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eType of media visualization. Available types: 'wform', 'circle', 'frequ' and 'vbar'.\n      If not set or not recognized then 'wform' is set. See examples in demo. \u003cbr/\u003e\n          Example: \u003ccode\u003etype=\"frequ\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Canvas element width. Default value depends on plugin type:\n        \u003cul\u003e\n          \u003cli\u003ecircle: 80\u003c/li\u003e\n          \u003cli\u003efrequ: 300\u003c/li\u003e\n          \u003cli\u003evbar: 50\u003c/li\u003e\n          \u003cli\u003ewform: 200\u003c/li\u003e\n        \u003c/ul\u003e\n        Example: \u003ccode\u003e:canv-width=\"600\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-height\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element height. Default value depends on plugin type:\n        \u003cul\u003e\n          \u003cli\u003ecircle: 80\u003c/li\u003e\n          \u003cli\u003efrequ: 80\u003c/li\u003e\n          \u003cli\u003evbar: 20\u003c/li\u003e\n          \u003cli\u003ewform: 40\u003c/li\u003e\n        \u003c/ul\u003e\n          Example: \u003ccode\u003e:canv-height=\"120\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecanv-class\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enull\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCanvas element css class name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efft-size\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1024/8192\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRepresents the window size in samples that is used when performing\n          a Fast Fourier Transform (FFT) to get frequency domain data.\n          Default 8192 for the type 'wform' or 1024 for 'frequ'\n          \u003cbr/\u003e\n          Example: \u003ccode\u003e:fft-size=\"512\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efrequ-lnum\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e60\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber of vertical lines for 'frequ' type.\n          Example: \u003ccode\u003e:frequ-lnum=\"30\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efrequ-line-cap\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDraw lines of 'frequ' type with rounded caps.\n          Example: \u003ccode\u003e:frequ-line-cap=\"true\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efrequ-direction\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003elr\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDirection to draw the frequency. Available values: 'lr' or 'mo' (left to right or middle out).\n      If not set or not recognized then 'lr' is set. \u003cbr/\u003e\n          Example: \u003ccode\u003efrequ-direction=\"mo\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eline-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#9F9\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGraph line RGB color.\n          Examples:\u003cbr/\u003e\n          \u003ccode\u003eline-color=\"#00AAFF\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eline-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0.5 / 3\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGraph line width in px. Integer or float number.\n      If not set then 0.5 for 'wform' type and 3 for 'frequ'\n          Example: \u003ccode\u003e:line-width=\"0.8\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n      \u003ctd\u003eradius\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eBase 'circle' radius.\n          Example: \u003ccode\u003e:radius=\"4\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003econnect-destination\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAnalyser to connect to audio context's destination.\n      Avoid echo during playback.\n          Example: \u003ccode\u003e:connect-destination=\"true\"\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evbar-bg-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#e1e1e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      Background canvas color for 'vbar' type\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evbar-caps\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      Rounded bars for 'vbar' types\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evbar-space\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e1\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      Space between bars in 'vbar' type\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evbar-width\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eNumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e4\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      Width of bars in 'vbar' type\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evbar-fill-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003elime\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      Color of bars in 'vbar' type\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evbar-right-color\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eString\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e#c0c0c0\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      Color of bars on right side in 'vbar' type\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nComposable function:\n\n```ts\nfunction useAVMedia\u003cT extends object\u003e(\n  canvas: Ref\u003cHTMLCanvasElement | null\u003e,\n  props: T,\n);\n```\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT) Copyright (c) 2018-present, Stas\nKobzar\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaskobzar%2Fvue-audio-visual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstaskobzar%2Fvue-audio-visual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaskobzar%2Fvue-audio-visual/lists"}