{"id":13565436,"url":"https://github.com/mathiasvr/audio-oscilloscope","last_synced_at":"2025-06-30T21:10:33.519Z","repository":{"id":28833807,"uuid":"32357446","full_name":"mathiasvr/audio-oscilloscope","owner":"mathiasvr","description":":musical_note: Waveform audio visualizer for the HTML5 canvas.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:34:06.000Z","size":1623,"stargazers_count":94,"open_issues_count":9,"forks_count":13,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-11T08:17:57.655Z","etag":null,"topics":["audio-visualizer","html5-canvas","oscilloscope","waveform"],"latest_commit_sha":null,"homepage":"","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/mathiasvr.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}},"created_at":"2015-03-16T22:44:54.000Z","updated_at":"2025-03-24T07:00:45.000Z","dependencies_parsed_at":"2023-01-14T09:41:39.762Z","dependency_job_id":null,"html_url":"https://github.com/mathiasvr/audio-oscilloscope","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/mathiasvr/audio-oscilloscope","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasvr%2Faudio-oscilloscope","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasvr%2Faudio-oscilloscope/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasvr%2Faudio-oscilloscope/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasvr%2Faudio-oscilloscope/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathiasvr","download_url":"https://codeload.github.com/mathiasvr/audio-oscilloscope/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasvr%2Faudio-oscilloscope/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260531759,"owners_count":23023362,"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-visualizer","html5-canvas","oscilloscope","waveform"],"created_at":"2024-08-01T13:01:46.910Z","updated_at":"2025-06-30T21:10:33.486Z","avatar_url":"https://github.com/mathiasvr.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI components and libraries"],"sub_categories":["Visual waveform generators"],"readme":"# oscilloscope\n[![npm](https://img.shields.io/npm/v/oscilloscope.svg)](https://npm.im/oscilloscope)\n![downloads](https://img.shields.io/npm/dt/oscilloscope.svg)\n![dependencies](https://img.shields.io/:dependencies-none-green.svg)\n[![license](https://img.shields.io/:license-MIT-blue.svg)](https://mvr.mit-license.org)\n\nWaveform audio visualizer for the HTML5 canvas.\n\n![wave](wave.gif)\n\n## install\nImport the module and bundle it for the browser with your favorite module bundler,\n```\n$ npm install oscilloscope\n```\n\nor include it directly in your HTML:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/oscilloscope@1.x\"\u003e\u003c/script\u003e\n```\n\n## example\n```javascript\nvar Oscilloscope = require('oscilloscope')\n\nvar audioContext = new window.AudioContext()\n\n// create source from html5 audio element\nvar source = audioContext.createMediaElementSource(audioElement)\n\n// attach oscilloscope\nvar scope = new Oscilloscope(source)\n\n// start default animation loop\nscope.animate(canvas.getContext(\"2d\"))\n```\n\nSee the [examples](examples) folder for more details on how to customize the animation.\n\n## usage\n### `scope = new Oscilloscope(source [, { fftSize: 2048 }])`\nSupply an [AudioNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) as `source`.\n\nOptionally set the `fftSize` property of the internal [AnalyzerNode](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize).\nThis can be used to adjust the smoothness or resolution of the animated oscilloscope.\n\nFor more control supply an AnalyzerNode as `source`.\n\n#### `scope.draw(context [, x, y, width, height])`\nDraw oscilloscope to a canvas `context`, and optionally set position and dimensions.\n\n#### `scope.animate(context [, x, y, width, height])`\nStart a basic animation loop that redraws the oscilloscope using the `.draw()` method.\n\n#### `scope.stop()`\nStop the animation loop started by the `.animate()` method.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiasvr%2Faudio-oscilloscope","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathiasvr%2Faudio-oscilloscope","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiasvr%2Faudio-oscilloscope/lists"}