Allow your users to upload content directly to Mux.

How To Setup

There is an example with 4 steps:
  1. Step: recorder is ready to record.
  1. Step: recorder is recording.
  1. Step: recorder is loading to the database.
  1. Step: recorder finished loading, player is ready to play the record.
Add text state “Step” with default value “Step1” for the page:
Image without caption
Place element and button with text “Start” on the page, setup element like on the picture:
Image without caption
Add workflow and conditional for the button:
  • Add conditional: Only when state “Step” is “Step1”:
Image without caption
  • Add action “Start/Stop recording”
  • Set state for page “Step” with value “Step2”
Image without caption
Add following condition for the button:
Image without caption
Add one more workflow and conditional for the button:
  • Add conditional: Only when state “Step” is “Step2”:
Image without caption
  • Add action “Start/Stop recording”
  • Set state for page “Step” with value “Step3”
Image without caption
Add event workflow “When Recording upload finished” and action Set state for page “Step” with value “Step4”
Image without caption
Add element Audio-Video Player on the page:
  • Set dynamic value for Source field as the AudioRecorder’s state “Value”.
  • In the Layout tab turn off visibility
  • Add following condition for the Audio-Video player:
Image without caption
  • In the Audio-Video Player enable Wavesurfer and set value “4” for “Bar Height” field:
Image without caption
Add new button with text “Reset recorder”:
  • In the layout tab uncheck box “This element is visible on page load”
  • Set conditional When page’s state “Step” is “Step4” this element is visible
Image without caption
  • Add workflow for button “Reset recorder”: Set state “Step” with value “Step1”
Image without caption
  • Final look:
Image without caption

Plugin Elements’ Properties

Image without caption
**Title **
Description
Type
Recorder Audio Channels
How many channels should contain the audio file. If you will select "ogg" format in Chrome, automatically will be used the "Stereo".
String
Format
Available values: wav,webm (Chrome),ogg,mp3 The recorded audio format. The audio format that is saved depends on the browser being used. The "webm" format is exclusively supported by Chrome, so if you choose it while using Firefox, the recorded audio will be saved in the default "ogg" format of Firefox. In Chrome, the "ogg" format is saved using the "vorbis" codec, while in Firefox, the "ogg" format uses the "opus" codec.
Dropdown menu
Save to AWS
If is checked, the recorded audio will be uploaded on AWS after stopping. Otherwise, it will be automatically saved on your device.
Boolean (yes/no)

Element Actions

  1. Start / Stop - start and stop a record.
  1. Checking microphone support - show alert with the text whether the device supports a microphone or not .
  1. Pause / Resume - pause and resume a record.
  1. Cancel Recording - cancel Recording without save.

Exposed states

Name
Description
Type
Value
URL to the recorded File
File
Loading (recording)
“yes” if loading, “no” if loaded.
Boolean (yes/no)
Loading (upload to AWS)
“yes” if loading, “no” if loaded.
Boolean (yes/no)
Error Message
If there an error, there will be the description,
String
Access media
Is there browser access to media.
Boolean (yes/no)
File Size
The size of the recorded file in bytes.
String
Recording duration
Duration of the recorded file in seconds.
number
Pause
“yes” when recording is paused.
Boolean (yes/no)
Safari device
“yes” when page opened in the Safari browser.
Boolean (yes/no)
Upload file progress
Upload precents.
Number
Logs
Show logs.
String
Permission denied by user
Yes when user denied microphone permission. Permission is asked after run “Start / Stop” action.
Boolean (yes/no)

Element Events

Name
Description
Recording upload finished
When recording upload finished