{"id":16490448,"url":"https://github.com/alex2wong/vudio","last_synced_at":"2025-03-16T18:31:59.167Z","repository":{"id":57394313,"uuid":"209917204","full_name":"alex2wong/vudio","owner":"alex2wong","description":"visualization audio using AudioContext and Canvas","archived":false,"fork":false,"pushed_at":"2020-09-10T14:48:56.000Z","size":7475,"stargazers_count":47,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T12:16:41.676Z","etag":null,"topics":["audiocontext","canvas","music","visualization"],"latest_commit_sha":null,"homepage":"https://alex2wong.github.io/vudio/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alex2wong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-21T03:13:26.000Z","updated_at":"2024-11-19T17:20:09.000Z","dependencies_parsed_at":"2022-09-19T10:52:01.761Z","dependency_job_id":null,"html_url":"https://github.com/alex2wong/vudio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex2wong%2Fvudio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex2wong%2Fvudio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex2wong%2Fvudio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex2wong%2Fvudio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alex2wong","download_url":"https://codeload.github.com/alex2wong/vudio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826783,"owners_count":20354220,"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":["audiocontext","canvas","music","visualization"],"created_at":"2024-10-11T13:48:02.151Z","updated_at":"2025-03-16T18:31:54.155Z","avatar_url":"https://github.com/alex2wong.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vudio \u003cimg src=\"https://img.shields.io/npm/v/vudio\" /\u003e \u003cimg src=\"https://img.shields.io/npm/l/vudio.svg\" alt=\"license\"\u003e\n### Visualization audio using AudioContext and Canvas\n\nMany visual effects:\n\n![多種視覺效果](https://github.com/alex2wong/vudio/blob/master/demo_src/snapshot.jpg?raw=true)\n\n------\n#### Features：\n- Support effect and custom styles\n- Animation based on Canvas and requestAnimationFrame\n\n#### Install and use\n\n```bash\nnpm i vudio --save\n# or install by yarn\nyarn add vudio\n```\n```javascript\nimport Vudio from 'vudio'\n```\nusing CDN:\n```html\n\u003cscript src=\"https://unpkg.com/vudio@2.1.1/umd/vudio.js\"\u003e\u003c/script\u003e\n```\nUse Vudio\n```javascript\nvar vudio = new Vudio(HTMLAudioElement | MediaStream, HTMLCanvasElement, [option]);\nvudio.dance();\n```\n\n#### Examples\n```html\n\u003ccanvas width=\"256px\" height=\"100px\" id=\"canvas\"\u003e\u003c/canvas\u003e\n\u003caudio src=\"./path/to/audio.mp3\" controls id=\"audio\"\u003e\u003c/audio\u003e\n\u003cscript src=\"path/to/vudio.js\"\u003e\u003c/script\u003e\n```\nSince AudioContext can NOT use CORS resource, so make sure you have fully control of audio resource\n\n```javascript\nvar audioObj = document.querySelector('#audio');\nvar canvasObj = document.querySelector('#canvas');\nvar vudio = new Vudio(audioObj, canvasObj, {\n    effect : 'waveform', // waveform, circlewave, circlebar, lighting (4 visual effect)\n    accuracy : 128, // number of freqBar, must be pow of 2.\n    width : 256, // canvas width\n    height : 100, // canvas height\n    waveform : {\n        maxHeight : 80, // max waveform bar height\n        minHeight : 1, // min waveform bar height\n        spacing: 1, // space between bars\n        color : '#f00', // string | [string] color or waveform bars\n        shadowBlur : 0, // blur of bars\n        shadowColor : '#f00', \n        fadeSide : true, // fading tail\n        horizontalAlign : 'center', // left/center/right, only effective in 'waveform'/'lighting'\n        verticalAlign: 'middle' // top/middle/bottom, only effective in 'waveform'/'lighting'\n    }\n});\n\nvudio.dance();\n\n// pause as you wish\nvudio.pause();\n\n// change option reactively.\nvudio.setOption({\n    waveform : {\n        color : '#06f',\n        verticalAlign: 'bottom'\n    }\n});\n```\n\nOnline Demo: https://alex2wong.github.io/vudio/\n\n### Related VSC extension\n\n![vscode extension](https://user-images.githubusercontent.com/10528482/64496866-f1eca780-d2db-11e9-92e5-cc179758d035.gif)\n\nListen netease music and watch visualization in VSCode :)\nInstall by vsix file\nhttps://github.com/alex2wong/vsc-netease-music/releases\n\nrelated issue:\nhttps://github.com/nondanee/vsc-netease-music/issues/63\n\n### Acknowledge\n\nInspired and based on https://github.com/margox/vudio.js.git\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex2wong%2Fvudio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex2wong%2Fvudio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex2wong%2Fvudio/lists"}