Documentation
Media Recorder
Description
The Media Recorder module 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 load 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 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Is disabled | Allows disabling the module so that the user is not able to interact with it. Sets the style class for the entire module to .disabled. | ||||||||
| Maximum recording duration | The maximum recording time in seconds. You should limit this time so that the lesson's state is lighter. The value cannot exceed 1800 (equal to 30 minutes). | ||||||||
| Default recording | The recording that will be loaded after starting the lesson. The recording should have *.mp3 format. Works only when Extended mode is not selected. | ||||||||
| 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. Works only when Extended mode is not selected. | ||||||||
| Reset removes recording | Resets executed from the reset command or external sources, such as the Reset Button module, also delete the user's recording. | ||||||||
| Enable in error checking mode | When selected, the module will be enabled in the error-checking mode. | ||||||||
| 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, the user can record again. | ||||||||
| Enable intensity change events | When selected, the module will send the ValueChanged type events to the Event Bus when audio intensity changes. For more information, please check Events section. | ||||||||
| Reset dialog box | Allows to set contents of the reset dialog box. This dialog will open after clicking the reset button provided in Extended mode. Check section Reset dialog box for more information.
|
||||||||
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). | ||||||||
| Speech texts | Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language. |
Supported commands
| Command name | Parameters | Description |
|---|---|---|
| startRecording | - | It starts recording when the module 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. This causes the module to be inactive. Sets the style class for the entire module 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 module. |
| disable | - | All actions such as playback or recording are interrupted. This causes the module to be inactive. Sets the style class for the entire module to .disabled. |
| hide | - | Hides the module if it is visible. |
| show | - | Shows the module if it is hidden. |
| reset | - | Resets the module. All actions, such as playback or recording are interrupted. The user's recording is deleted and the default recording, if defined, is loaded. This command does not reset in the same way as the reset button included after Extended mode is selected. |
Advanced Connector integration
Each command supported by the Media Recorder module can be used in the Advanced Connector module's scripts. The example below shows how to react to changes within the Text module gap content (i.e. while putting in it elements from the 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
Module's structure
The following section describes CSS classes that make up the module's UI. These classes are organized into different groups based on their purpose: main structure, interface, sound intensity interfaces, and reset dialog box. Understanding how these classes are organized and applied will help customize the module's appearance and integrate it seamlessly into your project. Please note that in this module all elements are created at the start, but not all UI elements are working even if some of the CSS styles are given for them. Some UI elements will work after selecting the appropriate properties.
Main structure
| Class name | Description |
|---|---|
| .media-recorder-wrapper | The container of the whole module. |
| .disabled | The style class that is added to the .media-recorder-wrapper when it is inactive. |
| .media-recorder-wrapper-browser-not-supported | The style class that is added to the .media-recorder-wrapper when a browser is not supported. |
| .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-player-loader | The container for the animation of loading the recording. |
| .media-recorder-interface-wrapper | The interface container that includes all interactive elements. |
| .media-recorder-reset-dialog | The reset dialog box. Can be opened with the reset button if Extended mode is selected. |
Interface
| Class name | Description |
|---|---|
| .media-recorder-default-recording-play-button | The container that performs the function of a two-state button for playing / stopping playing the default recording. This component is shown when Extended mode property is not selected and Show default recording play button property is selected. |
| .media-recorder-recording-button | The container that performs the function of a two-state button for recording / stopping recording. |
| .media-recorder-play-button | The container that performs the function of a two-state button for playing / stopping playing the user's recording. |
| .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 when Extended mode property is not selected. Its components are shown in the Sound intensity in default mode section. The level of sound intensity is represented on a 6-level scale. |
| .media-recorder-dotted-sound-intensity | The container showing the level of sound intensity when Extended mode property is selected. Its components are shown in the Sound intensity in extended mode section. The level of sound intensity is represented by the height of the dots. |
| .media-recorder-progress-bar | The container of the progress bar of the user's recording. The component works only when Extended mode is selected and the user's recording is done. |
| .media-recorder-reset-button | The container of the reset button. Opens reset dialog box. Component works only when Extended mode is selected. |
| .media-recorder-download-button | The container of the download button. The component works only when the Extended mode is selected and the user's recording is done. |
Sound intensity in default mode
Representation of sound intensity, when the Extended mode property is not selected, is done by element with CSS class .media-recorder-sound-intensity.
| 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. |
Sound intensity in extended mode
Representation of sound intensity, when the Extended mode property is selected, is done by element with CSS class .media-recorder-dotted-sound-intensity.
| Class name | Description |
|---|---|
| .media-recorder-dot-container | The style class of container with a dot. There are three dots. |
| .sound-intensity-dot | The style class of dot. A change in the height of these dots represents a change in the intensity of the sound. |
| .short-dot | The style class that is added to the left and right dots. |
| .tall-dot | The style class that is added to the middle dot. |
Reset dialog box
Can be opened with the reset button if Extended mode is selected.
| Class name | Description |
|---|---|
| .dialog-text | The style class of container with a message. Default message can be changed in Reset dialog box -> Text property. |
| .dialog-buttons | The style class of container with buttons. |
| .confirm-button | The style class of the confirm button. Default message can be changed in Reset dialog box -> Yes property. |
| .deny-button | The style class of the deny button. Default message can be changed in Reset dialog box -> No property. |
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.extended-mode .media-recorder-timer {
width: auto;
}
.media-recorder-wrapper .media-recorder-sound-intensity {
width: 20px;
margin: 0px 10px;
display: flex;
flex-direction: column;
}
.media-recorder-wrapper .media-recorder-dotted-sound-intensity {
width: 25px;
height: 25px;
margin: 0px 10px;
display: flex;
flex-direction: row;
}
.media-recorder-wrapper .media-recorder-dot-container {
height: 100%;
position: relative;
width: 8px;
}
.media-recorder-wrapper .sound-intensity-dot {
width: 6px;
height: 6px;
border-radius: 6px;
display: block;
background-color: #1870b7;
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.media-recorder-wrapper .center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.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;
}
.media-recorder-wrapper .media-recorder-reset-button {
width: 25px;
height: 25px;
margin: 0px 3px;
background-size: 100%;
background: url('resources/005-reset-button.svg') no-repeat center;
display: none;
}
.media-recorder-wrapper .media-recorder-download-button {
width: 25px;
height: 25px;
margin: 0px 3px;
background-size: 100%;
background: url('resources/006-download-button.svg') no-repeat center;
display: none;
}
.media-recorder-wrapper .media-recorder-progress-bar {
width: 80px;
height: 10px;
margin: 1px 1px;
display: none;
background-color: white;
border-radius: 5px;
position: relative;
}
.media-recorder-wrapper .media-recorder-progress-bar-slider {
width: 10px;
height: 10px;
display: block;
background-color: black;
border-radius: 5px;
position: absolute;
cursor: pointer;
}
.media-recorder-wrapper .media-recorder-progress-bar-wrapper {
width: 80px;
height: 25px;
margin: 0px 3px;
display: none
}
.media-recorder-wrapper .media-recorder-reset-dialog {
display: none;
width:300px;
padding: 10px 10px 15px;
position: absolute;
top:-90px;
background-color: white;
box-shadow: 8px 8px 5px rgb(0 0 0 / 40%);
z-index: 99999;
}
.media-recorder-wrapper .media-recorder-reset-dialog .dialog-text {
text-align: center;
padding: 5px 5px 10px;
}
.media-recorder-wrapper .media-recorder-reset-dialog .dialog-buttons {
display: flex;
}
.media-recorder-wrapper .media-recorder-reset-dialog .deny-button {
margin: auto;
text-align: center;
background-color: red;
color: white;
padding: 3px 15px;
display: block;
cursor: pointer;
}
.media-recorder-wrapper .media-recorder-reset-dialog .confirm-button {
margin: auto;
text-align: center;
background-color: green;
color: white;
padding: 3px 15px;
display: block;
cursor: pointer;
}
.disable-record-button {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Demo presentation
Demo presentation contains examples of how to use the Audio module.