{"id":15653937,"url":"https://github.com/likethemammal/visualizer-micro","last_synced_at":"2025-04-30T22:24:00.757Z","repository":{"id":67262328,"uuid":"62319805","full_name":"likethemammal/visualizer-micro","owner":"likethemammal","description":"A JS micro library for just the getSpectrum and getWaveform methods from Dancer.js, using Web Audio API.","archived":false,"fork":false,"pushed_at":"2019-01-11T10:58:44.000Z","size":6880,"stargazers_count":29,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T20:33:40.006Z","etag":null,"topics":["audio-data","micro-framework","visualizer","web-audio"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/likethemammal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-30T15:01:29.000Z","updated_at":"2024-10-01T16:30:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"9fe8e57f-f4bb-4ded-89ab-f0d891785004","html_url":"https://github.com/likethemammal/visualizer-micro","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/likethemammal%2Fvisualizer-micro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likethemammal%2Fvisualizer-micro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likethemammal%2Fvisualizer-micro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likethemammal%2Fvisualizer-micro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/likethemammal","download_url":"https://codeload.github.com/likethemammal/visualizer-micro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251790429,"owners_count":21644216,"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-data","micro-framework","visualizer","web-audio"],"created_at":"2024-10-03T12:48:17.996Z","updated_at":"2025-04-30T22:24:00.736Z","avatar_url":"https://github.com/likethemammal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# visualizer-micro\n\n**zero dependencies**\n\nA JS micro library for creating audio visualizers.\n\nSimplifies the use of the HTML5 Web Audio API for retrieving audio data from an audio source. \n\n\nInspired by [Dancer.js](https://github.com/jsantell/dancer.js/), and the `getSpectrum` and `getWaveform` methods.\n\n## Example / Demo\n\nAn example of basic install and setup can be found [in the source](https://github.com/likethemammal/visualizer-micro/blob/master/example.html) of the [Live Demo](http://likethemammal.github.io/visualizer-micro/example.html).\n\n## Install\n\nvisualizer-micro supports the UMD, meaning it supports install/usage through ES6 modules, CommonJS, AMD, and script tag globals.\n\nCheck out the `dist/` directory for the [minified](dist/visualizer-micro.min.js) and [unminified](dist/visualizer-micro.js) production scripts.\n\n```\nnpm install -d visualizer-micro\n```\n\n## Setup\n\n```\nimport VisualizerMicro from 'visualizer-micro'\n\nvar vm = new VisualizerMicro()\n```\n\n### Check for browser support\n\nBefore getting any visualization data, check for browser support to make sure visualization is possible.\n\n```js\n\nif (vm.isSupported()) {\n    // load audio and get visualizer data\n}\n\n```\n\n### Load an audio source\n\n**Before you can call load(), the user has to click something**. Read more about why [here](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes).\n\nFirst parameter is the source for audio data. This can be an `\u003caudio\u003e` element **or** an instance of the HTML5 `Audio()` class.\n\nSecond parameter is a callback, that will be called once the audio source has been loaded for visualization.\n\n```js\n\n// \u003caudio\u003e element\nvar audioEl = document.getElementById('some-audio-el')\nvar onLoad = function() {\n    // do something after the audio source has be loaded\n}\n\nvm.load(audioEl, onLoad)\n\n```\n\n```js\n\n// Audio class\nvar audio = new Audio()\n\nvm.load(audio, onLoad)\n\n```\n\n`load()` only needs to be called once per audio source. It is not necessary to call it again if `audio.src` is changed.\n\n### Unloading an audio source\n\nWhen the audio source is no longer needed, call `unload()` **before** the audio source has been destroyed/remove/collected.\n\n```js\n\n// before deleting or garbage collecting audio source\n\nvm.unload();\n\n```\n        \n## Usage\n\n### getSpectrum and getWaveform\n\nThese methods retrieve the actual visualization data from the audio source. They each return arrays of numbers. They can be called anytime after an audio source is loaded, but in most cases they'll only be called if the audio source isn't `paused`. Generally they're only called inside an animation loop to capture the **change** in audio data.\n\n```js\n\n// inside an animation loop..\n\nif (!audio.paused) {\n    var spectrum = vm.getSpectrum();\n    \n    // and/or\n    \n    var waveform = vm.getWaveform();\n    \n    // ...loop over spectrum and/or waveform array, parsing visualization numbers..\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flikethemammal%2Fvisualizer-micro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flikethemammal%2Fvisualizer-micro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flikethemammal%2Fvisualizer-micro/lists"}