{"id":13804379,"url":"https://github.com/jerosoler/wave-audio-path-player","last_synced_at":"2025-08-02T16:12:25.694Z","repository":{"id":92843783,"uuid":"465364213","full_name":"jerosoler/wave-audio-path-player","owner":"jerosoler","description":"🌊 Simple audio player webcomponent customizable with waveform","archived":false,"fork":false,"pushed_at":"2022-03-02T16:08:48.000Z","size":33,"stargazers_count":60,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-23T13:18:59.115Z","etag":null,"topics":["audio-player","audio-visualizer","music","path","svg","waveform","webaudio","webcomponent"],"latest_commit_sha":null,"homepage":"https://jerosoler.github.io/wave-audio-path-player/","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-03-02T15:34:24.000Z","updated_at":"2025-06-25T15:46:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"6237ded2-df94-4014-9e95-c6f3e8a81f3a","html_url":"https://github.com/jerosoler/wave-audio-path-player","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"59f4cf4ead44e2c6ebbe72e0d1f89c769d1c503c"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jerosoler/wave-audio-path-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwave-audio-path-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwave-audio-path-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwave-audio-path-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwave-audio-path-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jerosoler","download_url":"https://codeload.github.com/jerosoler/wave-audio-path-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerosoler%2Fwave-audio-path-player/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268416555,"owners_count":24246925,"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-08-02T02:00:12.353Z","response_time":74,"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-player","audio-visualizer","music","path","svg","waveform","webaudio","webcomponent"],"created_at":"2024-08-04T01:00:46.749Z","updated_at":"2025-08-02T16:12:25.677Z","avatar_url":"https://github.com/jerosoler.png","language":"JavaScript","funding_links":["https://paypal.me/jerosoler"],"categories":["Packages"],"sub_categories":["Libraries"],"readme":"[![npm](https://img.shields.io/npm/v/wave-audio-path-player?color=green)](https://www.npmjs.com/package/wave-audio-path-player)\n![npm](https://img.shields.io/npm/dy/wave-audio-path-player)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/wave-audio-path-player)\n[![GitHub license](https://img.shields.io/github/license/jerosoler/wave-audio-path-player)](https://github.com/jerosoler/wave-audio-path-player/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# wave-audio-path-player\n\n![Image demo](https://github.com/jerosoler/wave-audio-path-player/raw/master/docs/wave-audio-path-player.png)\n\n\nSimple audio player webcomponent customizable with waveform.\nCreated with [waveform-path](https://jerosoler.github.io/waveform-path/).\n\n[Live Demo](https://jerosoler.github.io/wave-audio-path-player/)\n\n## Installation\n\n```bash\nnpm i wave-audio-path-player\n```\n\n\n## Usage\n\n### Import\n```javascript\nimport 'wave-audio-path-player'\n```\n\n### Hosted\n```html\n\u003cscript type=\"module\" src=\"YOUR_PATH/wave-audio-path-player.umd.js\"\u003e\u003c/script\u003e\n```\n\n### Using \n```html\n\u003c!-- Basic --\u003e\n\u003cwave-audio-path-player src=\"hello_world.ogg\" wave-width=\"200\" wave-height=\"40\"\u003e\u003c/wave-audio-path-player\u003e\n\n\u003c!-- Complete --\u003e\n\u003cwave-audio-path-player src='hello_world.ogg' wave-width=\"200\" wave-height=\"40\" color=\"#55007f\" wave-color=\"#55007f\" wave-progress-color=\"#ff00ff\" wave-slider=\"#ffaaff\" wave-options='{\"samples\":40,\"type\":\"steps\",\"width\":192,\"height\":40}'\u003e\u003c/wave-audio-path-player\u003e\n```\n\n### Custom CSS\n```css\nwave-audio-path-player {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n#demo1::part(player) {\n  background:rgb(0, 0, 0);\n  padding: 15px 0px;\n  border-radius: 20px;\n  border:1px solid black;\n}\n\n#demo1::part(button) {\n  stroke: white;\n  fill:white;\n}\n\n#demo1::part(currenttime), #demo1::part(duration) {\n  color:white;\n  font-weight: bold;\n}\n\n#demo1::part(path1) {\n  stroke: white;\n}\n\n#demo1::part(path2) {\n  stroke:fuchsia;\n}\n```\n\n### Attributes\nName | Required | Type | Description\n--- | --- | --- | --- \nsrc | True | audio file | Source path to audio file\nwave-width | True | px | Number of pixels\nwave-height | True | px | Number of pixels\ncolor | False | color | Color of elements\nwave-color | False | color | Color of wave incomplete (Only for wave-option \"animation\":false)\nwave-progess-color | False | color | Color of wave complete or animation\nwave-slider | False | color | Color of slider thumb\nwave-options | False | object | Object of waveform-path (width and height is replaced for wave-width and wave-height)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerosoler%2Fwave-audio-path-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjerosoler%2Fwave-audio-path-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerosoler%2Fwave-audio-path-player/lists"}