Login Register

Documentation

Audio

The Audio addon allows users to play sounds in their presentations. This addon 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
ogg This property serves for uploading an audio file in ogg format into the module. It's needed for all common browsers (exclude Internet Explorer and Safari). *This property allows online resources. [Find out more »](/doc/page/Online-resources)*
mp3 This property serves for uploading an audio file in mp3 format into the module. It's needed for Internet Explorer. *This property allows online resources. [Find out more »](/doc/page/Online-resources)*
defaultControls If this property is checked, the default HTML player will be displayed. In order to make custom controls, just edit the corresponding CSS styles. To use native browser player, check the property "useBrowserControls".
useBrowserControls If this and "defaultControls" properties are checked, the native browser audio player will be shown.
displayTime If this property is checked and defaultControls are unchecked, then the Timer will be shown.
enableLoop If this property is checked, the audio will be played repeatedly.
Narration Narration for recorded audio
onEnd Event to be executed when (and only then) audio ends and looping sound is not enabled
Force Load Audio Try to load audio while loading a page. The audio can't be played until it is loaded.
Enable playback speed controls If checked, the Audio addon 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 defaultControls property has been checked. If you would like to hide some options, you can do that using 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: It's important to put 2 different format files if you want your audio to work on all common browsers. If you don't have a file in ogg format, you can use this mp3 to ogg converter. In Safari browser the file size is limited ( ~4mb ).
Note: Due to the policy of Android and iOS systems, using "onEnd" 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 deafult. 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 addon can be used in the Advanced Connector addon scripts. The below examples show how to play sound when the True/False addon 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 addon 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 audio playback is finished, Audio addon sends OnEnd event to 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 Play / Pause commands
.audio-play-btn A style for play-pause-btn when audio is not playing.
.audio-pause-btn A style for play-pause-btn when audio is playing.
.audio-stop-btn A button to execute Stop command.
.audio-volume-btn A button which allows volume control.
.audio-volume0 Style for audio-volume-btn which is active when audio volume is zero.
.audio-volume1 Style for audio-volume-btn which is active when audio volume is less than 40%.
.audio-volume2 Style for audio-volume-btn which is active when audio volume is between 40% and 70%.
.audio-volume3 Style for audio-volume-btn which is active when audio volume is more than 70%.
.player-time A layer which includes information about audio time.
.audio-progress-bar A layer which visualizes the progress of the playback.
.audio-bar An element of audio-progress-bar which visualizes real progress of the playback.
.audio-slider-btn An element of audio-progress-bar which is on the end of audio-bar and it can be used to go to another place in the audio file.
.audio-volume-layer A layer which allows volume control.
.volume-control-background An element of audio-volume-layer which is used to visualize volume controller.
.audio-volume-control An element of audio-volume-layer which is used to visualize current audio volume.

Demo presentation

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