Allow your users to upload content directly to Mux.
How To Setup
There is an example with 4 steps:
- Step: recorder is ready to record.
- Step: recorder is recording.
- Step: recorder is loading to the database.
- Step: recorder finished loading, player is ready to play the record.
Add text state “Step” with default value “Step1” for the page:
Place element and button with text “Start” on the page, setup element like on the picture:
Add workflow and conditional for the button:
- Add conditional: Only when state “Step” is “Step1”:
- Add action “Start/Stop recording”
- Set state for page “Step” with value “Step2”
Add following condition for the button:
Add one more workflow and conditional for the button:
- Add conditional: Only when state “Step” is “Step2”:
- Add action “Start/Stop recording”
- Set state for page “Step” with value “Step3”
Add event workflow “When Recording upload finished” and action Set state for page “Step” with value “Step4”
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:
- In the Audio-Video Player enable Wavesurfer and set value “4” for “Bar Height” field:
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
- Add workflow for button “Reset recorder”: Set state “Step” with value “Step1”
- Final look:
Plugin Elements’ Properties
**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
- Start / Stop - start and stop a record.
- Checking microphone support - show alert with the text whether the device supports a microphone or not .
- Pause / Resume - pause and resume a record.
- 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 |