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

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 to disable the addon so that it won't be able to interact. Sets the style class for the entire addon to .disabled

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

alt 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.

alt style structure

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:
  • recorder – for recording actions
  • player – for playing a user recording
  • default – for playing a default recording
  • value Possible values:
  • start – for starting recording / playing
  • stop – for stopping recording / playing
  • 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);
        }
    }
    

    Demo presentation

    Run demo presentation