This article goes over some of the customizable features of 3Play Media's Audio Description plugin. For more information about how to set up a basic audio description plugin with video embed, please see the article Plugin SDK Overview.
The *Plugin SDK allows you to customize the audio description using HTML and CSS. JavaScript can be used for more advanced customizations.
The code for the audio description features below must be placed inside of the p3sdk-audio-description-component div.
Available Features
Loading Text
Autoplay with video
Allow plugin to control source volume
Allow user to toggle source volume control
Loading Text
You can display a loading text while the Audio Description plugin is being constructed. You'll need to include a div with the class mycroft-loading. This div must be included inside the p3sdk-audio-description div. Once the Audio Description data is loaded, the plugin will set hide this display.
<div class="p3sdk-audio-description">
<div class="mycroft-loading">
<!-- YOUR LOADING TEXT HERE -->
</div>
</div>
Autoplay with video
Audio Description has a separate audio file that is loaded when you load the plugin. A user toggle it play or not play when the video starts playing. The default behavior is not playing.
If you want to configure it to be playing by default when the video starts playing, you have to include attribute p3sdk-default-autoplay="true" to the p3sdk-audio-description div.
<div class="p3sdk-audio-description" p3sdk-default-autoplay="true">
<!-- PLUGIN CODE -->
</div>
Allow plugin to control source volume
This setting allows the Audio Description plugin to control the volume of the source video before and after playing the snippet audio.
There could be a case where the source video's volume could be set to be higher than the Audio Description audio volume. In such cases, for overlapping audio the description's audio would be masked by the source video's audio. If this setting is enable the plugin lowers the volume for the source video in steps(to a certain range) the current volume while the snippet is playing, and return to the source's original volume once it is done playing the snippet.
If you want to configure it to be playing by default, you have to include attribute p3sdk-equalize-on="true" to the p3sdk-audio-description div.
<div class="p3sdk-audio-description" p3sdk-equalize-on="true">
<!-- PLUGIN CODE -->
</div>
Note: If this setting is turned on, it will always control the source video's volume and will not let the user to toggle the functionality off. To give the user the ability to toggle the functionality, please use the "Allow user to toggle source volume control" feature.
Allow user to toggle source volume control
This settings allows the user to toggle the "Allow plugin to control source volume" feature.
There are 2 parts to use this feature:
Step 1 : Enable the "Allow plugin to control source volume"
Step 2 : Configure the button for the user to toggle the functionality. This code block needs to be within the p3sdk-audio-description-component div. You can use your icons by updating the classes in the i tag.
The mycroft-equalizer-display, and mycroft-primary classes are however required by the plugin.
<!-- Allow plugin to control source volume -->
<div class="p3sdk-audio-description" p3sdk-equalize-on="true">
<!-- PLUGIN CODE -->
</div>
<!-- Button to toggle control source volume feature -->
<button aria-label="Equalize" aria-pressed="true" class="mycroft-equalizer-toggle glowing-border">
<i alt="Equalize Audio Description" aria-hidden="false" class="mycroft-equalizer-display mycroft-primary"></i>
</button>
The mycroft-equalizer-toggle class is responsible for handling the actual toggling. Make sure to include it on the button tag.
*The Plugin SDK is sometimes referred to as "P3SDK".