Anatomy of this WeWeb Audio Recorder Component
The WeWeb Audio Recorder component is designed to be simple, featuring a single dropzone that acts as a container. This dropzone functions similarly to a standard WeWeb container or div, with the key difference being that it does not allow for item repetition (binding) within it.
Component’s properties
This component includes intuitive custom actions that extend beyond the standard WeWeb component functionalities:
| File format | Dictates the format of the sound file recorded with the WeWeb audio recorder, which can either be webm or wav |
| Debug logs | Dictates whether there should be logs in the Developer Tools’ Console, these logs are very useful to understand and debug the component |
WeWeb Audio Recorder’s workflows
This component includes intuitive custom actions that extend beyond the standard WeWeb component functionalities:
| Start recording | Starts the recording when it’s stopped (to resume the recording when it’s paused, use the Resume recording action) |
| Pause recording | Pauses the recording when it’s running (to stop the recording and save the output use the Stop recording action) |
| Resume recording | Resumes the recording when it’s paused (to start the recording when it’s stopped, use the Start recording action) |
| Stop recording | Stops the recording when it’s running (to pause the recording and save the output use the Pause recording action) |
Component’s states
The component also comes with states, which closely resemble the state of the component, they are triggered when the component is Recording, Paused and Stopped. By default, the audio recorder component is in the Default state in WeWeb, indicating no specific state is defined.
| ready | This state is active when the WeWeb audio recorder has been initialized successfully and it’s ready to record |
| recording | This state is active when the recording is running (after being started or resumed) |
| paused | This state is active when the recording is paused via the Pause recording component workflow |
| stopped | This state is active when the recording is stopped via the Stop recording component workflow |
Audio Recorder’s exposed value variable
Similar to WeWeb’s input elements, the Audio Recorder provides an exposed value variable. This variable contains comprehensive information, including a reference to the recorded file, its size, a link to the file, and the component’s current state.
{
"state": "stopped", // Current state of the component
"blob": "<Blob_file>", // Blob containing the resulting file
"size": "1.33 MB", // Estimate of the resulting file's size
"url": "blob:https://editor.weweb..", // This is a local URL to your file
"format": "wav" // The format you selected for the resulting file
}Component’s triggers and their events
The component includes triggers that respond to various actions, mirroring the state of the Audio Recorder, this allows you to have full control over every little detail in the component:
| On started | Triggers when you invoke the Start recording component action, returns the state: "recording" |
| On paused | Triggers when you invoke the Pause recording component action, returns the state: "paused" |
| On resumed | Triggers when you invoke the Resume recording component action returns the state: "resumed" |
| On stopped | Triggers when you invoke the Stop recording component action, returns the entire value object that also is available as a variable |