Documentation
Media Recorder
Description
The Media Recorder addon allows you to record audio using your microphone. Then, you can also play your recording.
Note: Be careful with the length of the recording. Long recordings can cause the lesson to be loading longer because each recording is stored in a lesson's state. You should limit the duration of the recording by setting the Maximum recording duration property.
Properties
The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.
| Property name | Description |
|---|---|
| Maximum recording duration | The maximum recording time. You should limit this time so that the lesson's state is lighter. The value cannot exceed 60 seconds. |
| Default recording | The recording that will be loaded after starting the lesson. The recording should have *.mp3 format. |
| Recording start sound | The sound effect that is played when you start recording. The sound effect should have *.mp3 format. |
| Recording stop sound | The sound effect that is played when you stop recording. The sound effect should have *.mp3 format. |
| Show timer | Shows the timer. |
| Show default recording play button | Shows the play button of the default recording. |
| Reset removes recording | When the reset button is pressed, the user recording is deleted. |
| Is disabled | Allows disabling the module so that the user is not able to interact with it. Sets the style class for the entire addon to .disabled |
| Extended mode | In this mode after the recording is complete, it is possible only to play the recording, reset or download it. Only after resetting the recording, user can record again. |
Supported commands
| Command name | Parameters | Description |
|---|---|---|
| startRecording | - | It starts recording when the addon has just been loaded or the recording has been loaded. |
| stopRecording | - | It stops recording. |
| startPlaying | - | It starts playback if there is a loaded recording. |
| stopPlaying | - | It stops playback. |
| setShowErrorsMode | - | It sets the show errors mode. All actions such as playback or recording are interrupted. Causes the addon to be inactive. Sets the style class for the entire addon to .disabled |
| setWorkMode | - | It sets the work mode. All functions are available again. |
| enable | - | All actions are restored. Removes the .disabled style class for the entire addon. |
| disable | - | All actions such as playback or recording are interrupted. Causes the addon to be inactive. Sets the style class for the entire addon to .disabled |
| show | - | Shows the addon. |
| hide | - | Hides the addon. |
| reset | - | It resets the addon. All actions such as playback or recording are interrupted. The user's recording is deleted and the default recording is loaded if it has been defined. |
Advanced Connector integration
Each command supported by the Media Recorder addon can be used in the Advanced Connector addon scripts. The below example shows how to react on changes within the Text module gap content (ie. while putting in it elements from Source List) and change the displayed video accordingly.
EVENTSTART
Source:Text1
Value:1
SCRIPTSTART
var mediaRecorder = presenter.playerController.getModule('Media_Recorder1');
mediaRecorder.startRecording();
SCRIPTEND
EVENTEND
Addon style structure
The structure of the styles of the addon elements is shown above. You can overwrite the default configuration to get the expected effect.
| Class name | Description |
|---|---|
| .media-recorder-wrapper | The container of the whole addon. |
| .media-recorder-player-wrapper | The player container that supports the recording. It may contain elements of the audio or video type. The audio element has a forced style that makes it invisible. |
| .media-recorder-wrapper.disabled | The style class that is added to the container of the whole addon when it is inactive. |
| .media-recorder-player-loader | The container for the animation of loading the recording. |
| .media-recorder-interface-wrapper | The interface container including all interactive elements. |
| .media-recorder-default-recording-play-button | A container that performs the function of a two-state button for playing /stopping playing the default recording. |
| .media-recorder-recording-button | A container that performs the function of a two-state button for recording / stopping recording. |
| .media-recorder-play-button | A container that performs the function of a two-state button for playing / stopping playing. |
| .media-recorder-timer | The container of the recording time counter. The recording counter has the format: mm:ss, and while the playback: mm:ss / mm:ss |
| .media-recorder-sound-intensity | The container showing the level of sound intensity. Its components are shown in the next table. The level of sound intensity is represented on a 6-level scale. |
| .media-recorder-wrapper-browser-not-supported | The style class that is added to the .media-recorder-wrapper when a browser is not supported. |
| Class name | Description |
|---|---|
| .sound-intensity-large | The style of the two large sound levels when the level is inactive. |
| .sound-intensity-medium | The style of the two medium sound levels when the level is inactive. |
| .sound-intensity-low | The style of the two low sound levels when the level is inactive. |
| .selected | The style class that is added to active sound levels. |
Events
| Event name | Field name | Description |
|---|---|---|
| ValueChanged | source | The sender's ID |
| item | Possible values: |
|
| value | Possible values: |
Default styles
.media-recorder-wrapper {
position: absolute;
width: auto;
height: auto;
display: block;
}
.media-recorder-wrapper .media-recorder-player-wrapper {
position: relative;
width: auto;
height: auto;
}
.media-recorder-wrapper .media-recorder-interface-wrapper {
width: 300px;
height: 40px;
display: flex;
align-items: center;
background-color: #EBEFF0;
border-radius: 20px;
padding-left: 10px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.media-recorder-wrapper .media-recorder-recording-button {
width: 25px;
height: 25px;
margin: 0px 3px;
background: url('resources/003-record-button.svg') no-repeat center;
background-size: 100%;
}
.media-recorder-wrapper .media-recorder-recording-button.selected {
background: black url('resources/004-stop-button.svg') no-repeat center;
border-radius: 50%;
background-size: 100%;
}
.media-recorder-wrapper .media-recorder-play-button {
width: 25px;
height: 25px;
margin: 0px 3px;
background: url('resources/001-play-button.svg') no-repeat center;
background-size: 100%;
}
.media-recorder-wrapper .media-recorder-play-button.selected {
background: black url('resources/004-stop-button.svg') no-repeat center;
background-size: 100%;
border-radius: 50%;
}
.media-recorder-wrapper .media-recorder-default-recording-play-button {
width: 25px;
height: 25px;
margin: 0px 3px;
background: url('resources/002-play-default-recording-button.svg') no-repeat center;
background-size: 100%;
}
.media-recorder-wrapper .media-recorder-default-recording-play-button.selected {
background: black url('resources/004-stop-button.svg') no-repeat center;
background-size: 100%;
border-radius: 50%;
}
.media-recorder-wrapper .media-recorder-timer {
width: 100px;
height: 30px;
line-height: 30px;
margin: 0px 10px;
text-align: center;
font-size: 14px;
color: grey;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.media-recorder-wrapper .media-recorder-sound-intensity {
width: 20px;
margin: 0px 10px;
display: flex;
flex-direction: column;
}
.media-recorder-wrapper .sound-intensity-large:first-child {
border-top: 1px solid;
}
.media-recorder-wrapper .sound-intensity-large {
width: 100%;
height: 3px;
border-bottom: 1px solid;
background-color: #990000;
margin: auto;
}
.media-recorder-wrapper .sound-intensity-large.selected {
background-color: #FF0000;
}
.media-recorder-wrapper .sound-intensity-medium {
width: 100%;
height: 3px;
border-bottom: 1px solid;
background-color: #999900;
margin: auto;
}
.media-recorder-wrapper .sound-intensity-medium.selected {
background-color: #E4E400;
}
.media-recorder-wrapper .sound-intensity-low {
width: 100%;
height: 3px;
border-bottom: 1px solid;
background-color: #4C9900;
margin: auto;
}
.media-recorder-wrapper .sound-intensity-low.selected {
background-color: #71E200;
}
.media-recorder-wrapper .media-recorder-player-loader {
}
.media-recorder-wrapper .video-loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #1d2830;
border-radius: 50%;
animation: spin 0.7s linear infinite;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.media-recorder-wrapper.disabled {
opacity: 0.5;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}