{"id":13576500,"url":"https://github.com/DannyMoerkerke/audio-recorder","last_synced_at":"2025-04-05T05:32:00.561Z","repository":{"id":57105772,"uuid":"310108374","full_name":"DannyMoerkerke/audio-recorder","owner":"DannyMoerkerke","description":"Audio Recorder Web Component","archived":false,"fork":false,"pushed_at":"2024-11-21T19:14:10.000Z","size":445,"stargazers_count":41,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T10:11:16.368Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dannymoerkerke.github.io/audio-recorder/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DannyMoerkerke.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}},"created_at":"2020-11-04T20:17:04.000Z","updated_at":"2025-01-11T02:56:41.000Z","dependencies_parsed_at":"2024-03-17T04:51:19.079Z","dependency_job_id":null,"html_url":"https://github.com/DannyMoerkerke/audio-recorder","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/DannyMoerkerke%2Faudio-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyMoerkerke%2Faudio-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyMoerkerke%2Faudio-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyMoerkerke%2Faudio-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DannyMoerkerke","download_url":"https://codeload.github.com/DannyMoerkerke/audio-recorder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294448,"owners_count":20915335,"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":[],"created_at":"2024-08-01T15:01:10.777Z","updated_at":"2025-04-05T05:31:55.546Z","avatar_url":"https://github.com/DannyMoerkerke.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# audio-recorder\nAn audio recorder Web Component that records audio through the microphone of the user's device.\n\nIt provides a graphic frequency analyzer and waveform view of the recorded audio and uses the MediaDevices API, \nWeb Audio API and the MediaRecorder API.\n\n## Installation\n```\nnpm i @dannymoerkerke/audio-recorder\n```\n\n## Usage\nAdd a `\u003cscript\u003e` tag to your page:\n\n```css\n\u003cscript type=\"module\" src=\"path/to/node_modules/@dannymoerkerke/src/audio-recorder.js\"\u003e\u003c/script\u003e\n```\n\nor import it:\n\n```javascript\nimport './path/to/node_modules/@dannymoerkerke/src/audio-recorder.js';\n```\n\nYou can also import the bundled version which is in `dist` for use with Webpack:\n\n```javascript\nimport './path/to/node_modules/@dannymoerkerke/dist/audio-recorder.js';\n```\n\nand add the tag to your page:\n\n```html\n\u003caudio-recorder\u003e\u003c/audio-recorder\u003e\n```\n\n### Attributes\n- `bars`: number of bars in frequency analyzer, default: 20\n- `view`: `frequencies` or `waveform`, default: `frequencies`\n\n### Styling\n- `--width`: width of the recorder, default: 600px\n- `--height`: height of the recorder, default: 300px\n- `--border`: border of the recorder, default: none\n- `--frequency-background-color`: background color of frequency analyzer, default: #ffffff\n- `--frequency-bars-color`: background color of frequency bars, default: #ff0000\n- `--waveform-background-color`: background color of waveform view, default: #ffffff\n- `--waveform-color`: color of waveform, default: #ff0000\n- `--waveform-progress-color`: color of waveform of part of file that has already played, default: #337ab7\n\nIn addition, mixins can be applied using the `::part` pseudo element.\n\nUsage: \n\n```css\naudio-recorder::part([selector]) {\n\n   /** css rules **/\n\n}\n\n```\n\nAvailable selectors:\n\n- `::part(button)`: styles the buttons except the volume buttons\n- `::part(volume-button)`: styles the volume buttons\n- `::part(slider)`: styles the volume slider\n- `::part(time)`: styles the elapsed and remaining time display\n\nThe buttons and slider are part of the `material-webcomponents` library ([https://dannymoerkerke.github.io/material-webcomponents/](https://dannymoerkerke.github.io/material-webcomponents/))\n\nThe Custom CSS properties exposed by these components can be used as part of the styling through `::part`.\n\nFor example, the `material-slider` component exposes the properties `--track-size`, `--track-color`, `--thumb-size` and \n`--thumb-color`.\n\nThese can be used in combination with `::part` to style the volume slider:\n\n```css\naudio-recorder::part(slider) {\n  --track-color: #000000;\n  --track-size: 3px;\n  --thumb-color: #000000;\n  --thumb-size: 10px;\n}\n```\n\n### Demo\nTo run the demo, run `npm install` once and then `npm start` and view the demo on\n[http://localhost:8080/](http://localhost:8080/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDannyMoerkerke%2Faudio-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDannyMoerkerke%2Faudio-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDannyMoerkerke%2Faudio-recorder/lists"}