Web Component built with Stencil.js for Recording Audio from Web using Web RTC and Mobile using native plugins, with a swipe gesture using Ionic Animations inspired by WhatsApp:
<record-audio-button autoplay enable-recording></record-audio-button>
Do you want to see this web component in action? Check our demo projects for Angular, React, Vue, VanillaJS, etc, yay! ๐
<record-audio-button
color="light"
activated="false"
disabled="false"
show
translucent
type="submit"
size="large"
max-threshold="10"
button-style=""
button-class=""
icon-name="mic"
icon-size="large"
icon-style=""
icon-class=""
icon-aria-label=""
icon-ios=""
icon-md=""
icon-src="https://github.com/proyecto26/record-audio-button-enterprise/raw/master/"
scale-x="1.2"
scale-y="1.2"
width="55"
height="55"
max-width="90"
duration="200"
enable-logs
enable-recording
autoPlay
mime-type="audio/webm"
time-slice="0"
audio-bits-per-second="0"
sample-rate="0"
desired-samp-rate="0"
buffer-size="0"
number-of-audio-channels="0"
>
</record-audio-button>
Project | Package |
---|---|
Core | @proyecto26/record-audio-button |
React | @proyecto26/record-audio-button-react |
npm install @proyecto26/record-audio-button --save
<script src='node_modules/@proyecto26/record-audio-button/dist/record-audio-button.js'></script>
in the head of your index.htmlnpm install @proyecto26/record-audio-button --save
import @proyecto26/record-audio-button;
Using record-audio-button
component within an Angular project:
Including 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
:
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
The CUSTOM_ELEMENTS_SCHEMA
needs to be included in any module that uses record-audio-button.
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:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
defineRecordAudioButton(window);
When using a wrapper component, It's not necessary to access the reference directly to attach events, etc. More details here.
import React from 'react';
import {
RecordAudioButton
} from '@proyecto26/record-audio-button';
const App = () => {
return (
<RecordAudioButton
color="light"
scaleX={1.3}
scaleY={1.3}
maxWidth={100}
duration={200}
autoPlay={false}
enableLogs
enableRecording={true}
/>
);
};
export default App;
Other option is using the web component directly:
import React from 'react'
import ReactDOM from 'react-dom'
import { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader'
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
defineRecordAudioButton(window);
In 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:
import Vue from 'vue';
import { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader'
import App from './App.vue';
Vue.config.productionTip = false;
Vue.config.ignoredElements = [/ion-\w*/, /record-\w*/];
// Bind the custom element to the window object
defineRecordAudioButton(window);
new Vue({
render: h => h(App)
}).$mount('#app');
Good Ware
from www.flaticon.comcoolvector
from www.freepik.comMade with โค๏ธ