Login Register

Documentation

Audio

The Audio module allows users to play sounds in their presentations. This module works on all common browsers. You can use the MP3 and/or OGG format.

Note: It's recommended to use files with bitrate 64 kb/s or higher. Files with lower quality could have difficulties with reproduction.

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
MP3 This property serves for uploading an audio file in mp3 format into the module.

This property allows online resources. Find out more »
OGG This property serves for uploading an audio file in ogg format into the module.

This property allows online resources. Find out more »
Default controls If this property is checked, the default HTML player will be displayed. To create custom controls, just edit the corresponding CSS styles. To use a native browser player, check the property "Use browser controls".
Use browser controls If this and the "Default controls" properties are checked, the native browser audio player will be shown.
Display time If this property is checked and the "Default controls" are unchecked, then the Timer will be shown.
Enable loop If this property is checked, the audio will be played repeatedly.
Narration Narration for the recorded audio
On end Event to be executed when (and only then) the audio ends and the "Enable loop" property is not marked.
Force load audio Try to load the audio while loading the page. The audio can't be played until it is loaded.
Enable playback speed controls If checked, the Audio module will display a dropdown menu allowing the user to control the audio speed by changing the selected option. The dropdown menu will appear only if the "Default controls" property has been checked. If you would like to hide some options, you can do that using the CSS style, e.g., this code: .audio-playback-rate [value="0.25"], .audio-playback-rate [value="0.5"] { display: none; }
will hide options 0.25 and 0.5 from the dropdown.
Note: If you also want to use a file in the ogg format, you can use this mp3 to ogg converter. In the Safari browser the file size is limited ( ~4mb ).
Note: Due to the policy of Android and iOS systems, using the "On end" property to play another media element will not work on mobile devices as it requires user interaction.

Supported commands

Command name Params Description
play --- Plays the sound if not playing already
stop --- Stops the sound
pause --- Pauses the sound
show --- Shows the module
hide --- Hides the module and stops the sound
getNarration --- Gets the narration property
setPlaybackRate playbackRate Sets the audio speed to the playbackRate value as per the playbackRate property of the HTML Audio element, with 1.0 by default. You may use this command even when the "Enable playback speed controls" property has not been checked. The playbackRate does *not* have to be equal to one of the values displayed in the dropdown menu.

Advanced Connector integration

Each command supported by the Audio module can be used in the Advanced Connector module scripts. The below examples show how to play sound when the True/False module sends an event about the correct answer and how to stop it when the event indicates the incorrect answer.

    EVENTSTART
    Source:TrueFalse1
    Score:1
    SCRIPTSTART
        var audio = presenter.playerController.getModule('Audio1');
        audio.play();
    SCRIPTEND
    EVENTEND

    EVENTSTART
    Source:TrueFalse1
    Score:0
    SCRIPTSTART
        var audio = presenter.playerController.getModule('Audio1');
        audio.stop();
    SCRIPTEND
    EVENTEND

Events

The Audio module sends ValueChanged type events to Event Bus when playback time changes.

Field name Description
Item N/A
Value Current time (in MM.SS format)
Score N/A

When the audio playback is finished, the Audio module sends the OnEnd event to the Event Bus.

Field name Description
Item end
Value N/A
Score N/A

The playing event occurs when the audio is playing.

Field name Description
Item N/A
Value playing
Score N/A

The pause event occurs when the audio is paused.

Field name Description
Item N/A
Value pause
Score N/A

CSS Classes

Class name Description
.wrapper-addon-audio A simple wrapper.
Default HTML player
.audioplayer Default HTML player controller.
.play-pause-btn Switchable button for the Play / Pause commands.
.audio-play-btn A style for the play-pause-btn when the audio is not playing.
.audio-pause-btn A style for the play-pause-btn when audio is playing.
.audio-stop-btn A button to execute the Stop command.
.audio-volume-btn A button that allows volume control.
.audio-volume0 Style for the audio-volume-btn which is active when the audio volume is zero.
.audio-volume1 Style for audio-volume-btn which is active when the audio volume is less than 40%.
.audio-volume2 Style for audio-volume-btn which is active when the audio volume is between 40% and 70%.
.audio-volume3 Style for audio-volume-btn which is active when the audio volume is more than 70%.
.player-time A layer that includes information about the audio time.
.audio-progress-bar A layer that visualizes the progress of the playback.
.audio-bar An element of the audio-progress-bar that visualizes the real progress of the playback.
.audio-slider-btn An element of the audio-progress-bar that is on the end of the audio-bar and it can be used to go to another place in the audio file.
.audio-volume-layer A layer that allows volume control.
.volume-control-background An element of the audio-volume-layer that is used to visualize the volume controller.
.audio-volume-control An element of the audio-volume-layer that is used to visualize current audio volume.

Demo presentation

Demo presentation contains examples of how to use the Audio module.