Documentation
TextAudio
Description
The TextAudio module allows users to play sounds with subtitles in their content. This module works on all common browsers.
Note: It's recommended to use files with 64 kb/s bitrate or higher. The files with lower quality could experience some difficulties in 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 |
|---|---|
| Controls | In this property, you can choose one of the three options. The "None" option does not display any controls. The "Browser" option displays the default controls for the currently used web browser. The "Custom" option displays the controls defined by the user in the CSS styles. This option displays the controls independently of the web browser. |
| Display time | If this property is checked, the time will be shown (in the preview) independent of the chosen 'Controls'. |
| Enable loop | If this property is checked, the audio will be played repeatedly. |
| Slides | In this property, you define slides with the audio narration. Text and times can be provided from the SRT file. If the file is provided, text and times fields are ignored. The SRT file allows for the utilization of the "Crop time" field to crop the times within this file. Important: crop times work only for the SRT file! Ignoring the SRT file property, the user can always provide narration by hand, which is prepared as described below. Each slide has the "Text" property, which is the content of the slide, and the "Times" property, in which you define durations of each slide. The content of the slide can be divided into fragments that will be highlighted at different periods of time. The separator is a double pipe "||". The number of pieces of text should be the same as the number of time periods in the "Times" property. In the "Times" property, you define time ranges for each piece of text. The time should be in the following format: mm:ss.d, where mm is the minute, ss is the second, and d is the tenth of a second. The time range for each text should be in a separate line. The tenth of a second parameter is not obligatory. In the "Position and dimensions" property, you define the position of the slide. It should be in the following format: X;Y;W;H, where X is the position from the left, Y is the position from the top, W is the width, and H is the height. For example:
|
| mp3 |
This property is used 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 » |
| On Text Click Behavior |
Defines the action that is expected to happen when a word is clicked by the user. This property replaces the following old properties: 'Individual fragment playback' and 'Vocabulary audio files playback'. Note: This property is not taken into account when the module has old properties: 'Individual fragment playback' or 'Vocabulary audio files playback'. To use this property, you should remove the old module from the page and add a new one. |
| Vocabulary mp3 |
This property serves for uploading an audio file in MP3 format into the module. Setting up this property is only needed when the 'On Text Click Behavior' is set to "Play the interval from vocabulary file".
This property allows online resources. Find out more » |
| Vocabulary ogg |
This property serves for uploading a vocabulary audio file in OGG format into the module. Setting up this property is only needed when the 'On Text Click Behavior' is set to "Play the interval from vocabulary file".
This property allows online resources. Find out more » |
| Vocabulary intervals | In this property, you define time intervals for vocabulary audio files. The time periods should be in the same format as the "Times" in the 'Slides' property. The number of parts in the 'Vocabulary intervals' has to be equal to the sum of the "Times" periods defined in the 'Slides' property. Setting up this property is only needed when the 'On Text Click Behavior' is set to "Play the interval from vocabulary file". |
| On end | The event to be executed when (and only then) the audio ends and the loop is not enabled. |
| Is Click Disabled | With this option selected, the user can interact with the module only via commands (mouse actions are disabled). |
| Show slides | In this property, you can choose one of the two options. The "Show current slide" option displays the currently playing slide, and the "Show all slides" option displays all added slides. |
| 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. |
| Enable playback speed controls | This property activates the option to change the speed of playing audio. |
| 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. |
| Individual fragment playback deprecated |
If this property is checked, only the selected fragment will be played. |
| Vocabulary audio files playback deprecated |
Defines whether the module is allowed to use files defined in the 'Vocabulary audio files' property. |
| Vocabulary audio files deprecated |
List of files for individual playback. |
| defaultControls deprecated |
If this property is checked, the default browser controls will be displayed. In order to use the custom controls, just add the event button and call the play() or pause() function available for the module. |
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 "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 it is not playing already. |
| pause | --- | Pauses the sound. |
| stop | --- | Stops the sound. |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| enable | --- | Enables the module and removes from it the .disabled style class. |
| disable | --- | Disables the module, interrupts the playback, and adds to it the .disabled style class. |
Advanced Connector integration
Each command supported by the TextAudio module can be used in the Advanced Connector module's scripts. The examples below show how to play a sound when the True False module sends an event for 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('TextAudio1');
audio.play();
SCRIPTEND
EVENTEND
EVENTSTART
Source:TrueFalse1
Score:0
SCRIPTSTART
var audio = presenter.playerController.getModule('TextAudio1');
audio.stop();
SCRIPTEND
EVENTEND
Events
The TextAudio module sends the ValueChanged type of events to the Event Bus when the 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 TextAudio module sends the OnEnd event to the Event Bus.
| Field name | Description |
|---|---|
| Item | end |
| Value | N/A |
| Score | N/A |
CSS Classes
| Class name | Description |
|---|---|
| .wrapper-addon-textaudio | The module's wrapper. |
| .textaudio-text | The wrapper of the slide text. |
| .wrapper-addon-textaudio span | Each text fragment is in the <span> element. |
| .wrapper-addon-textaudio span.active | The currently highligted <span> element has the .active class. |
| .wrapper-addon-textaudio span.textelement[num] | Where [num] is the element number counted from 0 on every slide. There may be more than one element with the same class number, but they are always responsible for the same audio part. |
| .textaudio-play-pause-btn | Shared styles used for the play button and pause button. |
| .textaudio-play-btn | Styles for the play button. |
| .textaudio-pause-btn | Styles for the pause button. |
| .textaudio-stop-btn | Styles for the stop button. |
| .textaudio-playback-rate | Styles for the audio speed controller. |
Demo presentation
Demo presentation contains examples of how to use the TextAudio module.