Login Register

Documentation

Audio

Description

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 will hide options 0.25 and 0.5 from the dropdown:
.audio-playback-rate [value="0.25"],
.audio-playback-rate [value="0.5"] {
    display: none;
}
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 (~4 MB).
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 it is not playing already.
stop --- Stops the sound.
pause --- Pauses the sound.
hide --- Hides the module if it is visible and stops the sound.
show --- Shows the module if it is hidden.
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

presenter.playerController.getModule('Audio1').play();

SCRIPTEND
EVENTEND

EVENTSTART
Source:TrueFalse1
Score:0
SCRIPTSTART

presenter.playerController.getModule('Audio1').stop();

SCRIPTEND
EVENTEND

Events

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

Field name Description
Name ValueChanged
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
Name ValueChanged
Item end
Value N/A
Score N/A

The playing event occurs when the audio is playing.

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

The pause event occurs when the audio is paused.

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

The not-started event occurs just before page close (due to a switch to another lesson page) when the audio has never been started. Reset does not affect the sending of this event.

Field name Description
Name PreDestroyed
Item N/A
Value not-started

When the module is set to play in a loop then no OnEnd event is sent. Instead, the replayed-in-loop event is sent when the audio is replayed in a loop.

Field name Description
Name ValueChanged
Item N/A
Value replayed-in-loop
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 at 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 the current audio volume.

Demo presentation

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