{"id":21719604,"url":"https://github.com/stephanepericat/svg-audio-controls","last_synced_at":"2026-05-17T22:34:19.636Z","repository":{"id":39005846,"uuid":"213706808","full_name":"stephanepericat/svg-audio-controls","owner":"stephanepericat","description":"A set of UI controls for web-based audio apps.","archived":false,"fork":false,"pushed_at":"2023-01-07T05:51:59.000Z","size":2652,"stargazers_count":3,"open_issues_count":19,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-25T18:29:51.941Z","etag":null,"topics":["controls","knobs","svg","ui","vector","webaudio"],"latest_commit_sha":null,"homepage":"https://spperic.at/svg-audio-controls","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/stephanepericat.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":"2019-10-08T17:22:56.000Z","updated_at":"2023-04-21T15:43:38.000Z","dependencies_parsed_at":"2023-02-06T13:15:58.226Z","dependency_job_id":null,"html_url":"https://github.com/stephanepericat/svg-audio-controls","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephanepericat%2Fsvg-audio-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephanepericat%2Fsvg-audio-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephanepericat%2Fsvg-audio-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephanepericat%2Fsvg-audio-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stephanepericat","download_url":"https://codeload.github.com/stephanepericat/svg-audio-controls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244687748,"owners_count":20493688,"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":["controls","knobs","svg","ui","vector","webaudio"],"created_at":"2024-11-26T01:38:59.313Z","updated_at":"2026-05-17T22:34:14.600Z","avatar_url":"https://github.com/stephanepericat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/stephanepericat/svg-audio-controls.svg?branch=master)](https://travis-ci.org/stephanepericat/svg-audio-controls)\n[![Coverage Status](https://coveralls.io/repos/github/stephanepericat/svg-audio-controls/badge.svg?branch=master)](https://coveralls.io/github/stephanepericat/svg-audio-controls?branch=master)\n\n# SVG Audio Controls\n\nA set of UI controls for web-based audio apps, built on top of [SVG.js](https://svgjs.com/).\n\n## Demo\n\nA Storybook demoing the various UI components is available [here](https://spperic.at/svg-audio-controls).\n\n## Installation\n\n### Latest (compatible with @svgdotjs/svg.js@3.x)\n\nAdd this line to your `.yarnrc`:\n\n```\n\"@stephanepericat:registry\" \"https://npm.pkg.github.com/stephanepericat\"\n```\n\nThen install:\n\n```shell\nyarn add @stephanepericat/svg-audio-controls\n```\n\n### Legacy (compatible with svg.js@2.7.1)\n\n```shell\nyarn add git+https://github.com/stephanepericat/svg-audio-controls.git#1.0.2\n```\n\n## Components\n\n### Button\n\nA configurable button. Can also be used as a trigger.\n\n```javascript\nimport { SVG } from \"@svgdotjs/svg.js\";\nimport { Button } from \"svg-audio-controls/src/index\";\n\nconst App = SVG()\n  .addTo(document.querySelector(\".container\"))\n  .size(\"100%\", \"100%\");\n\nconst bt = new Button(App, {\n  backgroundColor: \"#ccc\",\n  fillColor: \"#fff\",\n  activeColor: \"#0c0\",\n  offsetLeft: 300,\n  offsetTop: 250,\n  padding: 20,\n  radius: 100,\n  strokeColor: \"#111\",\n  strokeWidth: 10,\n  temporary: false, // 'true' for trigger mode\n});\n\n// append\nbt.append();\n\n// listen to changes\nbt.onValueChange = ({ detail }) =\u003e console.log(\"value changed: \", detail.value);\n```\n\n### Knob\n\nA configurable knob.\n\n```javascript\nimport { SVG } from \"@svgdotjs/svg.js\";\nimport { Knob } from \"svg-audio-controls/src/index\";\n\nconst App = SVG()\n  .addTo(document.querySelector(\".container\"))\n  .size(\"100%\", \"100%\");\n\nconst kb = new Knob(App, {\n  backgroundColor: \"#ccc\",\n  fillColor: \"#fff\",\n  needleColor: \"#f00\",\n  offsetLeft: 300,\n  offsetTop: 100,\n  padding: 20,\n  radius: 100,\n  strokeColor: \"#111\",\n  strokeWidth: 10,\n});\n\n// append\nkb.append();\n\n// listen to changes\nkb.onValueChange = ({ detail }) =\u003e console.log(\"value changed: \", detail.value);\n```\n\n### Label\n\nA configurable label for textual display.\n\n```javascript\nimport { SVG } from \"@svgdotjs/svg.js\";\nimport { Label } from \"svg-audio-controls/src/index\";\n\nconst App = SVG()\n  .addTo(document.querySelector(\".container\"))\n  .size(\"100%\", \"100%\");\n\nconst lbl = new Label(App, {\n  defaultText: \"0.00\",\n  fontColor: \"#f70\",\n  fontFamily: \"Roboto\",\n  fontSize: 22,\n  offsetLeft: 370,\n  offsetTop: 80,\n});\n\n// append\nlbl.append();\n\n// change text\nlbl.value = \"3.14\";\n```\n\n### Led\n\nA configurable LED.\n\n```javascript\nimport { SVG } from \"@svgdotjs/svg.js\";\nimport { Led } from \"svg-audio-controls/src/index\";\n\nconst App = SVG()\n  .addTo(document.querySelector(\".container\"))\n  .size(\"100%\", \"100%\");\n\nconst led = new Led(App, {\n  backgroundColor: \"#ccc\",\n  fillColor: \"#fff\",\n  activeColor: \"#0c0\",\n  offsetLeft: 240,\n  offsetTop: 130,\n  padding: 20,\n  strokeColor: \"#111\",\n  radius: 20,\n  strokeWidth: 2,\n});\n\n// append\nled.append();\n// listen to changes\nled.onValueChange = ({ detail }) =\u003e\n  console.log(\"value changed: \", detail.value);\n\n// turn the led on / off\nled.toggle();\n\n// change the active color\nled.highlightColor = \"#f70\";\n```\n\n### Scope\n\nA configurable oscilloscope.\n\n```javascript\nimport { SVG } from \"@svgdotjs/svg.js\";\nimport { Scope } from \"svg-audio-controls/src/index\";\n\nconst App = SVG()\n  .addTo(document.querySelector(\".container\"))\n  .size(\"100%\", \"100%\");\n\nconst sc = new Scope(App, {\n  backgroundColor: \"#ddd\",\n  divisions: 6,\n  gridColor: \"#f70\",\n  offsetLeft: 250,\n  offsetTop: 480,\n  signalColor: \"#BC6C1C\",\n  signalWidth: 4,\n  width: 400,\n});\n\n// append\nsc.append();\n\n// draw graph\nlet points = [\n  [0, 0],\n  [1, 255],\n];\nsc.draw(points);\n```\n\n### Switch\n\nA configurable switch. Can be used vertically or horizontally.\n\n```javascript\nimport { SVG } from \"@svgdotjs/svg.js\";\nimport { Switch } from \"svg-audio-controls/src/index\";\n\nconst App = SVG()\n  .addTo(document.querySelector(\".container\"))\n  .size(\"100%\", \"100%\");\n\nconst sw = new Switch(App, {\n  backgroundColor: \"#151515\",\n  isHorizontal: false, // 'true' for horizontal mode\n  offsetLeft: 120,\n  offsetTop: 80,\n  padding: 5,\n  size: 30,\n  steps: 3,\n  strokeColor: \"#ccc\",\n  switchColor: \"#666\",\n});\n\n// append\nsw.append();\n\n// listen to changes\nsw.onValueChange = ({ detail }) =\u003e console.log(\"value changed: \", detail.value);\n```\n\n### WaveForm ( _**new in 2.1.0**_ )\n\nA configurable waveform display.\n\n```javascript\nimport { SVG } from \"@svgdotjs/svg.js\";\nimport { WaveForm } from \"svg-audio-controls/src/index\";\n\nconst App = SVG()\n  .addTo(document.querySelector(\".container\"))\n  .size(\"100%\", \"100%\");\n\nconst WaveDisplay = new WaveForm(App, {\n  backgroundColor: \"#111\",\n  hasShadow: true,\n  height: 250,\n  offsetLeft: 550,\n  offsetTop: 20,\n  shadowColor: \"#f00\",\n  shadowOpacity: 0.2,\n  waveFormColor: \"#f70\",\n  width: 700,\n});\n\nWaveDisplay.append();\n\nconst displayWaveForm = async (url, display) =\u003e {\n  const AudioContext = window.AudioContext || window.webkitAudioContext;\n  const ctx = new AudioContext();\n\n  try {\n    const ajax = await fetch(url);\n    const buffer = await ajax.arrayBuffer();\n    const audioBuffer = await ctx.decodeAudioData(buffer);\n    const audioData = audioBuffer.getChannelData(0);\n\n    // assigning the data will trigger rendering\n    display.audioData = audioData;\n  } catch (e) {\n    console.error(e.message);\n  }\n};\n\nconst url = \"/sounds/demo.wav\";\ndisplayWaveForm(url, WaveDisplay);\n```\n\n## Tasks\n\n### Build\n\n```shell\nnpm run build\n```\n\n### Test\n\n```shell\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephanepericat%2Fsvg-audio-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstephanepericat%2Fsvg-audio-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephanepericat%2Fsvg-audio-controls/lists"}