[Marketplace] Audio Recorder

Share your work
, , ,
1

The WeWeb Audio Recorder component is a straightforward yet powerful tool, featuring a single dropzone that works similarly to a form container. This component allows you to record sounds in webm and wav format and makes it effortless to do so.

Where to get it

You can get it in the WeWeb’s marketplace here: https://marketplace.weweb.io/projects/1420742e-9a3f-48eb-aea9-b9ee4c7c55e8/

How it works

You can check out all of the details about the component, in the following specification, together with a how-to-use video and much more.

Component Properties

The component includes several intuitive custom properties, enhancing its functionality beyond typical WeWeb components:

  • File Format: This property allows you to specify the format of the recorded audio file. You can choose between webm or wav formats.
  • Debug Logs: Enables or disables logs in the Developer Tools’ Console, providing valuable insights for understanding and debugging the component’s behavior.

Component Workflows

The component comes with built-in workflows that make controlling audio recording sessions seamless:

  • Start Recording: Initiates recording when it is stopped.
  • Pause Recording: Temporarily halts recording while it’s in progress.
  • Resume Recording: Resumes recording from a paused state.
  • Stop Recording: Ends the recording session and saves the output.

Example of the Audio Recorder being used in the WeWeb editor
Example of the Audio Recorder being used in the WeWeb editor1520×950 86.7 KB

Component States

The component has several states that reflect its current activity, similar to the concept of states in other WeWeb components. These states change based on the recording actions:

  • Recording: The component is actively recording audio.
  • Paused: The recording is temporarily stopped but can be resumed.
  • Stopped: The recording has been ended.

By default, the component is in a neutral state (Default), indicating it is idle.

Exposed Value Variable

The Audio Recorder component, like other WeWeb input elements, has an exposed value variable. This variable provides detailed information, including a reference to the recorded file, its size, a link to access the file, and the component’s current state.

Component states, triggers and actions
Component states, triggers and actions1780×650 93.6 KB

Triggers and Events

The component includes triggers corresponding to various actions, offering precise control over the component’s behavior:

  • On Started: Triggered when the Start Recording action is invoked.
  • On Paused: Triggered when the Pause Recording action is invoked.
  • On Resumed: Triggered when the Resume Recording action is invoked.
  • On Stopped: Triggered when the Stop Recording action is invoked.
8 Likes
3

Hello, do you have any screenshots? It should be just a dropzone (the component itself). I also attached a pre-built component, but I’d need to see what you mean. Also please make sure that you have the library (that should be included) updated. I pushed a fix for the component due to WeWeb’s last breaking update, so you might be running the old version.

If you want, hmu at hello@broberto.sk or in a DM here and I’ll get on it as soon as I have the informations from you.