Skip to content

Initial draft of voiced captions support #727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joedolson wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

Initial draft of voiced captions support #727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8302453
Initial draft of voiced captions support
joedolson Mar 18, 2026
da1ac6e
Merge branch 'develop' into add-voiced-captions
joedolson Mar 24, 2026
575faf4
Add Voiced Captions string to translations
joedolson Mar 24, 2026
938f390
Eliminate some connecting words only used in translations
joedolson Mar 24, 2026
b402479
Get all track languages instead of limiting to descriptions
joedolson Mar 24, 2026
42344f9
Fix voiced caption preferences and layout
joedolson Mar 24, 2026
5151d5c
Remove duplicate string
joedolson Mar 24, 2026
e0d17a7
Rebuild both voice forms if needed
joedolson Mar 24, 2026
4538b98
Omit voice settings if no descvoices defined
joedolson Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion scripts/caption.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,13 @@ function addCaptionFunctions(AblePlayer) {
if (this.currentCaption !== thisCaption) {
// it's time to load the new caption into the container div
captionText = this.flattenCueForCaption(cues[thisCaption]).replace( /\n/g, "<br>" );

// If preference enabled to voice captions, send to synthesizer.
if ( this.speechEnabled && this.prefCaptionsSpeak ) {
let announceText = new DOMParser().parseFromString( captionText, 'text/html' );
let announcement = announceText.body.textContent || '';
// use browser's built-in speech synthesis
this.announceText( 'caption', announcement );
}
this.$captionsDiv.html(captionText);
this.currentCaption = thisCaption;
if (captionText.length === 0) {
Expand Down Expand Up @@ -306,7 +312,29 @@ function addCaptionFunctions(AblePlayer) {
options[0] = "overlay";
options[1] = "below";
break;

case "prefCaptionsSpeak":
options[0] = ["0", this.translate( 'off', 'Off' ) ];
options[1] = ["1", this.translate( 'on', 'On' ) ];
break;

case "prefCaptionsVoice":
options[0] = null; // set later.
break;

case "prefCaptionsPitch":
options[0] = null; // set later.
break;

case "prefCaptionsRate":
options[0] = null; // set later.
break;

case "prefCaptionsVolume":
options[0] = null; // set later.
break;
}

return options;
};

Expand Down
36 changes: 25 additions & 11 deletions scripts/description.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,20 +186,20 @@ function addDescriptionFunctions(AblePlayer) {
// define this.descVoices array
// includes only languages that match the language of the captions or player

var voices, descLangs, voiceLang, preferredLang;
var voices, trackLangs, voiceLang, preferredLang;

preferredLang = (this.captionLang) ? this.captionLang.substring(0,2).toLowerCase() : this.lang.substring(0,2).toLowerCase();

this.descVoices = [];
voices = this.synth.getVoices();
descLangs = this.getDescriptionLangs();
trackLangs = this.getTrackLangs();
if (voices.length > 0) {
this.descVoices = [];
// available languages are identified with local suffixes (e.g., en-US)
for (var i=0; i<voices.length; i++) {
// match only the first 2 characters of the lang code
voiceLang = voices[i].lang.substring(0,2).toLowerCase();
if (voiceLang === preferredLang && (descLangs.indexOf(voiceLang) !== -1)) {
if (voiceLang === preferredLang && (trackLangs.indexOf(voiceLang) !== -1)) {
// this voice matches preferredLang
// AND there's a matching description track in this language
// Add this voice to final array
Expand All @@ -215,15 +215,15 @@ function addDescriptionFunctions(AblePlayer) {
return false;
};

AblePlayer.prototype.getDescriptionLangs = function () {
AblePlayer.prototype.getTrackLangs = function () {

// returns an array of languages (from srclang atttributes)
// in which there are description tracks
// use only first two characters of the lang code
var descLangs = [];
if (this.tracks) {
for (var i=0; i < this.tracks.length; i++) {
if (this.tracks[i].kind === 'descriptions') {
if (this.tracks[i].kind === 'descriptions' || this.tracks[i].kind === 'captions' ) {
descLangs.push(this.tracks[i].language.substring(0,2).toLowerCase());
}
}
Expand All @@ -240,10 +240,11 @@ function addDescriptionFunctions(AblePlayer) {

var preferences, voices, prefDescVoice, descVoice, descLang, prefVoiceFound;
preferences = this.getPref();
prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefDescVoice() : null;
prefDescVoice = (typeof preferences.voices !== 'undefined') ? this.getPrefVoice() : null;

this.getBrowserVoices();
this.rebuildDescPrefsForm();
this.rebuildVoicePrefsForm( '_prefDescVoice' );
this.rebuildVoicePrefsForm( '_prefCaptionsVoice' );

if (this.selectedDescriptions) {
descLang = this.selectedDescriptions.language;
Expand Down Expand Up @@ -487,7 +488,7 @@ function addDescriptionFunctions(AblePlayer) {
} else if (this.speechEnabled) {
if ( 'video' !== this.descMethod ) {
// use browser's built-in speech synthesis
this.announceDescriptionText('description',descText);
this.announceText('description',descText);
}
if (this.prefDescVisible) {
// write description to the screen for sighted users
Expand Down Expand Up @@ -542,13 +543,14 @@ function addDescriptionFunctions(AblePlayer) {
this.prefDescRate = speechRate;
};

AblePlayer.prototype.announceDescriptionText = function(context, text) {
AblePlayer.prototype.announceText = function(context, text) {

// this function announces description text using speech synthesis
// this function announces text using speech synthesis
// it's only called if already determined that browser supports speech synthesis
// context is either:
// 'description' - actual description text extracted from WebVTT file
// 'sample' - called when user changes a setting in Description Prefs dialog
// 'caption' - called when announcing a caption.

var thisObj, voiceName, i, voice, pitch, rate, volume, utterance,
timeElapsed, secondsElapsed;
Expand Down Expand Up @@ -585,12 +587,24 @@ function addDescriptionFunctions(AblePlayer) {
pitch = $('#' + this.mediaId + '_prefDescPitch').val();
rate = $('#' + this.mediaId + '_prefDescRate').val();
volume = $('#' + this.mediaId + '_prefDescVolume').val();
} else {
} else if ( context === 'captionSample' ) {
// get settings from form
voiceName = $('#' + this.mediaId + '_prefCaptionsVoice').val();
pitch = $('#' + this.mediaId + '_prefCaptionsPitch').val();
rate = $('#' + this.mediaId + '_prefCaptionsRate').val();
volume = $('#' + this.mediaId + '_prefCaptionsVolume').val();
} else if ( context === 'description' ) {
// get settings from global prefs
voiceName = this.prefDescVoice;
pitch = this.prefDescPitch;
rate = this.prefDescRate;
volume = this.prefDescVolume;
} else {
// get settings from global prefs
voiceName = this.prefCaptionsVoice;
pitch = this.prefCaptionsPitch;
rate = this.prefCaptionsRate;
volume = this.prefCaptionsVolume;
}

// get the voice associated with the user's chosen voice name
Expand Down
Loading