{"id":13804357,"url":"https://github.com/jerosoler/waveform-path","last_synced_at":"2025-07-30T23:31:48.347Z","repository":{"id":45205171,"uuid":"452334735","full_name":"jerosoler/waveform-path","owner":"jerosoler","description":"🎙 Generator waveform paths for SVG 🎶","archived":false,"fork":false,"pushed_at":"2024-10-18T15:44:18.000Z","size":255,"stargazers_count":105,"open_issues_count":5,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-12T10:56:21.111Z","etag":null,"topics":["audio","audio-player","audio-visual","audio-visualizer","music","path","svg","waveform","webaudio"],"latest_commit_sha":null,"homepage":"https://jerosoler.github.io/waveform-path/","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/jerosoler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"custom":["https://paypal.me/jerosoler"]}},"created_at":"2022-01-26T15:42:58.000Z","updated_at":"2025-04-27T08:46:36.000Z","dependencies_parsed_at":"2024-05-18T11:40:37.748Z","dependency_job_id":"ba95f748-a5f0-46ed-825a-113b98e4ec36","html_url":"https://github.com/jerosoler/waveform-path","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"fdf5b6bc7a85828bc5ecf4d2d281f5e733a4a985"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jerosoler/waveform-path","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwaveform-path","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwaveform-path/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwaveform-path/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwaveform-path/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jerosoler","download_url":"https://codeload.github.com/jerosoler/waveform-path/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwaveform-path/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267960679,"owners_count":24172506,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","audio-player","audio-visual","audio-visualizer","music","path","svg","waveform","webaudio"],"created_at":"2024-08-04T01:00:46.381Z","updated_at":"2025-07-30T23:31:48.011Z","avatar_url":"https://github.com/jerosoler.png","language":"JavaScript","readme":"[![npm](https://img.shields.io/npm/v/waveform-path?color=green)](https://www.npmjs.com/package/waveform-path)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/waveform-path)\n[![GitHub license](https://img.shields.io/github/license/jerosoler/waveform-path)](https://github.com/jerosoler/waveform-path/blob/master/LICENSE)\n[![Twitter URL](https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Ftwitter.com%2Fjerosoler)](https://twitter.com/jerosoler)\n\n# waveform-path\n\n![Logo](https://github.com/jerosoler/waveform-path/raw/master/docs/waveform-logo-with-examples.png)\n\n[LIVE DEMO WITH EXAMPLES](https://jerosoler.github.io/waveform-path/)\n\nSimple library to custom waveforms.\n\n# Install \n## NPM\n```bash\nnpm install waveform-path -s\n```\n\n## Download \nDownload the last realease of repo and copy waveform-path.es.js from dist folder.\n\n\n# How to use\n```javascript\n\u003cscript type=\"module\"\u003e\n    import { getAudioData, linearPath, polarPath } from \"waveform-path\";\n\n    async function AudioPath(file) {\n        const audioData = await getAudioData(file);\n\n        const pathLogo = linearPath(audioData,{ samples: 100,  type: 'steps', top: 20 });\n        document.querySelector(\"#logo path\").setAttribute('d', pathLogo);\n\n    }\n    AudioPath(\"hello_world.ogg\");\n\u003c/script\u003e\n```\n\n\n## Linear Options\nOption | Default | Description\n--- | --- | ---\nchannel | 0 | Channel audio for generate wave\nsamples | length | Length of the data\nheight | 100 | Height of path\nwidth | 800\t| Width of path\ntop\t| 0 | Top margin from path to svg\nleft | 0 | Left margin from path to svg\ntype | 'steps' | 'steps', 'mirror' or 'bars'\npaths | [{d:'Q', sx: 0, sy:0, x: 50, y: 100, ex:100, ey:0}] | Array of commands to create the path.\nanimation | false | To create animations, paths separated by commas\nanimationframes | 10 | Frames per second of the animation\nnormalize | true | Normalize audio to adjust waveform\n\n\n## Linear Path Options\n```javascript\n// Lineto\n{d:'L', sx: 0, sy:0, ex:50, ey:100 }\n\n// Horitzontal\n{d:'H', sx:10, y:90, ex:90}\n\n// Vertical\n{d:'V', sy:0, x:0, ey:100}\n\n// Cubic Bézier Curve - Not 100%\n{d:'C', sx: 0, sy:0, x: 100, y: 100, ex:100, ey:0 },\n\n// Quadratic Bézier Curve\n{d:'Q', sx: 0, sy:0, x: 50, y: 100, ex:100, ey:0}\n\n// Arc\n{d:'A', sx: 0, sy:100,  ex:100, ey:100, rx:10, ry: 10, angle: 180, arc: 1, sweep: 1}\n\n// Z - Close Path no parameters\n{d:'Z'}\n\nsx = start % x position\nx = center % x position\nex = end % x position\n\nsy = start % y position\ny = center % y position\ney = end % y position\n\nThese three extra options can be added:\nminshow: 0.2  // Values 0 to 1 - Default 0\nmaxshow: 1 // Values 0 to 1 - Default 1\nnormalize: true // Normalize value y to 1. - Default false\nExample: \n{d:'H', sx:10, y:90, ex:90, minshow: 0.4, maxshow: 0.6, normalize: true} // Only for y \u003e 0.4 \u0026\u0026 y \u003c 0.6\n\nFor arc view: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve\n```\n\n\n## Polar Options\nOption | Default | Description\n--- | --- | ---\nchannel | 0 | Channel audio for generate wave\nsamples | length | Length of the data\ndistance | 50 | Distance from center\nlength | 100 | Length of wave\ntop | 0 | Top margin from path to svg\nleft | 0 | Left margin from path to svg\ntype | 'steps' | 'steps', 'mirror' or 'bars'\nstartdeg | 0 | Where do you start drawing. To make it natural, 0 is equivalent to north.\nenddeg | 360 | Where do you end drawing\ninvertdeg | false | Reverse the direction of the degrees\ninvertpath | false | Reverse the path vertically\npaths | [{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}] | Array of commands to create the path.\nanimation | false | To create animations, paths separated by commas\nanimationframes | 10 | Frames per second of the animation\nnormalize | true | Normalize audio to adjust waveform\n\n\n## Polar Path Options\n```javascript\n// Lineto\n{d:'L', sdeg:0, sr:0,  edeg:100, er:100 },\n\n// Cubic Bézier Curve - Not 100%\n{d:'C', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}\n\n// Quadratic Bézier Curve\n{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}\n\n// Arc\n{d:'A', sdeg:80, sr:0, edeg: 0, er:0, rx: 100, ry: 100, angle: 100, arc: 0, sweep: 1 },\n\n// Z - Close Path no parameters\n{d:'Z'}\n\nsdeg = start % deg position\ndeg = center % deg position\nedeg = end % deg position\n\nsr = start % radius position\nr = center % radius position\ner = end % radius position\n\nThese three extra options can be added:\nminshow: 0.2  // Values 0 to 1 - Default 0\nmaxshow: 1 // Values 0 to 1 - Default 1\nnormalize: true // Normalize value radius to 1. - Default false\nExample: \n{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0, minshow: 0.4, maxshow: 0.6, normalize: true} // Only for y \u003e 0.4 \u0026\u0026 y \u003c 0.6\n\nFor arc view: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve\n```\n\n","funding_links":["https://paypal.me/jerosoler"],"categories":["Packages"],"sub_categories":["Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerosoler%2Fwaveform-path","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjerosoler%2Fwaveform-path","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerosoler%2Fwaveform-path/lists"}