{"id":18822059,"url":"https://github.com/proyecto26/record-audio-button-enterprise","last_synced_at":"2026-04-14T04:01:44.349Z","repository":{"id":78889453,"uuid":"217426546","full_name":"proyecto26/record-audio-button-enterprise","owner":"proyecto26","description":"🔴 A Web Component for Recording Audio with a swipe gesture inspired by WhatsApp (Enterprise) 💼","archived":false,"fork":false,"pushed_at":"2026-03-17T04:11:23.000Z","size":2069,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-03-17T18:58:55.847Z","etag":null,"topics":["angular","angular2","angularjs","capacitor","cordova","ionic","ionic-framework","react","reactjs","stencil","stencil-components","stencil-js","stenciljs","stenciljs-components","vanilla-javascript","vanilla-js","vue","vuejs","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"https://proyecto26.com/record-audio-button-enterprise","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/proyecto26.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-10-25T01:33:07.000Z","updated_at":"2026-03-17T04:11:28.000Z","dependencies_parsed_at":"2023-09-24T05:09:15.834Z","dependency_job_id":null,"html_url":"https://github.com/proyecto26/record-audio-button-enterprise","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"f2efa4bc7fc4c4cbebe37022391ed00789dbf78b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/proyecto26/record-audio-button-enterprise","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Frecord-audio-button-enterprise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Frecord-audio-button-enterprise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Frecord-audio-button-enterprise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Frecord-audio-button-enterprise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/proyecto26","download_url":"https://codeload.github.com/proyecto26/record-audio-button-enterprise/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/proyecto26%2Frecord-audio-button-enterprise/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31781292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["angular","angular2","angularjs","capacitor","cordova","ionic","ionic-framework","react","reactjs","stencil","stencil-components","stencil-js","stenciljs","stenciljs-components","vanilla-javascript","vanilla-js","vue","vuejs","webcomponent","webcomponents"],"created_at":"2024-11-08T00:47:39.168Z","updated_at":"2026-04-14T04:01:44.342Z","avatar_url":"https://github.com/proyecto26.png","language":null,"funding_links":["https://github.com/sponsors/proyecto26"],"categories":[],"sub_categories":[],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square)\n\n# Record Audio Button (Enterprise)\n\nWeb Component built with [Stencil.js](https://github.com/ionic-team/stencil) for *Recording Audio* from **Web** using [Web RTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API) and **Mobile** using native plugins, with a swipe gesture using [Ionic Animations](https://ionicframework.com/docs/utilities/animations) inspired by **WhatsApp**:\n\n```html\n\u003crecord-audio-button autoplay enable-recording\u003e\u003c/record-audio-button\u003e\n```\n\n## Demo 🎮\n\nDo you want to see this web component in action? Check our demo projects for Angular, React, Vue, VanillaJS, etc, yay! 🎉\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"400px\" alt=\"Record Audio Button\" src=\"https://github.com/proyecto26/record-audio-button-enterprise/blob/master/img/demo-angular.png?raw=true\"\u003e\n\u003c/p\u003e\n\n## Usage 🎉\n\n```html\n\u003crecord-audio-button\n  color=\"light\"\n  activated=\"false\"\n  disabled=\"false\"\n  show\n  translucent\n  type=\"submit\"\n  size=\"large\"\n  max-threshold=\"10\"\n  button-style=\"\"\n  button-class=\"\"\n  icon-name=\"mic\"\n  icon-size=\"large\"\n  icon-style=\"\"\n  icon-class=\"\"\n  icon-aria-label=\"\"\n  icon-ios=\"\"\n  icon-md=\"\"\n  icon-src=\"\"\n  scale-x=\"1.2\"\n  scale-y=\"1.2\"\n  width=\"55\"\n  height=\"55\"\n  max-width=\"90\"\n  duration=\"200\"\n  enable-logs\n  enable-recording\n  autoPlay\n  mime-type=\"audio/webm\"\n  time-slice=\"0\"\n  audio-bits-per-second=\"0\"\n  sample-rate=\"0\"\n  desired-samp-rate=\"0\"\n  buffer-size=\"0\"\n  number-of-audio-channels=\"0\"\n\u003e\n\u003c/record-audio-button\u003e\n```\n\n## Getting Started 📖\n\n### Packages\n\n| Project | Package |\n| ------- |:-----:|\n| **Core** | [`@proyecto26/record-audio-button`](https://github.com/proyecto26/record-audio-button-enterprise)\n| **React** | [`@proyecto26/record-audio-button-react`](https://github.com/proyecto26/record-audio-button-enterprise)\n\n\u003c!-- ### Script tag TODO: Check other way\n\n- Put a script tag similar to this `\u003cscript src='https://unpkg.com/record-audio-button@1.0.0/dist/record-audio-button.js'\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc --\u003e\n\n### Node Modules\n- Run `npm install @proyecto26/record-audio-button --save`\n- Put a script tag similar to this `\u003cscript src='node_modules/@proyecto26/record-audio-button/dist/record-audio-button.js'\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### In a stencil-starter app\n- Run `npm install @proyecto26/record-audio-button --save`\n- Add an import to the npm packages `import @proyecto26/record-audio-button;`\n- Then you can use the element anywhere in your template, JSX, html etc\n\n## Framework integrations 👨‍💻\n\n### Angular\nUsing `record-audio-button` component within an Angular project:\n\n#### Including the Custom Elements Schema\n\nIncluding the `CUSTOM_ELEMENTS_SCHEMA` in the module allows the use of Web Components in the HTML files. Here is an example of adding it to `AppModule`:\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule {}\n```\n\nThe `CUSTOM_ELEMENTS_SCHEMA` needs to be included in any module that uses **record-audio-button**.\n\n#### Calling defineCustomElements\n\n**record-audio-button** component includes a function used to load itself in the application window object. That function is called `defineCustomElements()` and needs to be executed once during the bootstrapping of your application. One convenient place to add it is in the `main.ts` file as follows:\n\n```tsx\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err =\u003e console.log(err));\ndefineRecordAudioButton(window);\n```\n\n[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/angular.md)\n\n### React\n\n- Specific Wrapper\n\nWhen using a wrapper component, It's not necessary to access the reference directly to attach events, etc. More details [here](./react/README.md).\n```tsx\nimport React from 'react';\nimport {\n  RecordAudioButton\n} from '@proyecto26/record-audio-button';\n\nconst App = () =\u003e {\n  return (\n    \u003cRecordAudioButton\n      color=\"light\"\n      scaleX={1.3}\n      scaleY={1.3}\n      maxWidth={100}\n      duration={200}\n      autoPlay={false}\n      enableLogs\n      enableRecording={true}\n    /\u003e\n  );\n};\nexport default App;\n```\n\n- Web Component\n\nOther option is using the web component directly: \n```tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader'\nimport App from './App';\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n\ndefineRecordAudioButton(window);\n```\n\n[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/react.md)\n\n### Vue\n\nIn order to use the `record-audio-button` Web Component inside of a Vue application, it should be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the `main.js` file as follows:\n\n```tsx\nimport Vue from 'vue';\nimport { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader'\n\nimport App from './App.vue';\n\nVue.config.productionTip = false;\nVue.config.ignoredElements = [/ion-\\w*/, /record-\\w*/];\n\n// Bind the custom element to the window object\ndefineRecordAudioButton(window);\n\nnew Vue({\n  render: h =\u003e h(App)\n}).$mount('#app');\n```\n\n[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/vue.md)\n\n\n## Enterprise Support 💼\n\nThis is an **enterprise product** — free for [Proyecto 26 sponsors](https://proyecto26.com/sponsors/).\n\n### Get Support\n- **Discord**: Join our [#enterprise-audio-button](https://discord.gg/MvBK46bC33) channel for dedicated support, feature requests, and direct access to the maintainer\n- **Issues**: Report bugs and request features on [GitHub Issues](https://github.com/proyecto26/record-audio-button-enterprise/issues)\n- **Sponsors**: Get priority support and access to the private repositories with full source code at [proyecto26.com/sponsors](https://proyecto26.com/sponsors/)\n\n### What Sponsors Get\n- Access to **private repositories** with full source code (`record-audio-button` + `record-audio-button-react`)\n- Priority bug fixes and feature requests\n- Direct support via Discord private channels\n- 1-on-1 meetings with the maintainer (Heroes tier+)\n\n[![Become a Sponsor](https://img.shields.io/badge/Become%20a-Sponsor-f2385a?style=for-the-badge\u0026logo=github-sponsors)](https://github.com/sponsors/proyecto26)\n[![Join Discord](https://img.shields.io/badge/Join-Discord-5865F2?style=for-the-badge\u0026logo=discord\u0026logoColor=white)](https://discord.gg/MvBK46bC33)\n\n## Credits 👍\n\n- Icons made by `Good Ware` from www.flaticon.com\n- Wallpaper made by `coolvector` from www.freepik.com\n\n## Happy coding 💯\nMade with ❤️\n\n\u003cimg width=\"150px\" src=\"https://avatars0.githubusercontent.com/u/28855608?s=200\u0026v=4\" align=\"right\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproyecto26%2Frecord-audio-button-enterprise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fproyecto26%2Frecord-audio-button-enterprise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproyecto26%2Frecord-audio-button-enterprise/lists"}