Skip to content
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

#2355 Handle multiple audio tracks on a single audio element #1071

Merged
merged 3 commits into from
Feb 20, 2025
Merged

#2355 Handle multiple audio tracks on a single audio element #1071

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
206ca7d
#2355 Handle multiple audio tracks on a single audio element
Feb 19, 2025
aa050a9
#2025 Add attribute to gate showing captions or not
Feb 20, 2025
126cc6c
#2035 Suppress console warning when cue is null
Feb 20, 2025
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
88 changes: 57 additions & 31 deletions modules/islandora_audio/js/audio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,43 +50,69 @@
return cues;
}

const vtt_source = element.querySelector("track[kind='captions'], track[kind='subtitles']")?.getAttribute('src');
if (!vtt_source) { return; }
fetch(vtt_source).then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
element.textTracks.addEventListener('change', function(e) {
// Which track is showing?
element.setAttribute('data-showing', false);
for (let i = 0; i < this.length; i++) {
if (this[i].mode === 'showing') {
// Build cues for this track, now we know the index.
// @todo: Make this work with multiple audio elements.
var src = document.querySelectorAll("track[kind='captions'], track[kind='subtitles']")[i].getAttribute('src');
bindVttSource(src);
element.setAttribute('data-showing', true);
}
}
return response.text();
}).then(text => {
const cues = parseWebVTT(text);
});

// Create a Custom Event attached to the timeupdate event to pass cues along.
element.addEventListener('timeupdate', (e) => {
const captionEvent = new CustomEvent('updateCaptions', { detail: cues })
e.target.dispatchEvent(captionEvent);
});
element.addEventListener('updateCaptions', (e) => {
if (!e.detail) {
return;
}
// Invoke change event to get started.
const changeEvent = new Event('change');
element.textTracks.dispatchEvent(changeEvent);

// Grab the caption for the current time.
const currentTime = e.target.currentTime;
let cue = e.detail.find(
(cue) =>
currentTime >= cue.start &&
currentTime <= cue.end
);
function bindVttSource(vtt_source) {

// Update the caption box.
let captionsBox = e.target.parentElement.querySelector('div.audioTrack')
if (cue?.text) {
captionsBox.innerHTML = cue.text.replace(/\n/g, "<br>");
} else {
captionsBox.innerHTML = '';
fetch(vtt_source).then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.text();
}).then(text => {
const cues = parseWebVTT(text);

// Create a Custom Event attached to the timeupdate event to pass cues along.
element.addEventListener('timeupdate', (e) => {
const captionEvent = new CustomEvent('updateCaptions', { detail: cues })
e.target.dispatchEvent(captionEvent);
});
element.addEventListener('updateCaptions', (e) => {
if (!e.detail) {
return;
}
// Check if a track is showing.
var showing = e.target.getAttribute('data-showing');
// Update the caption box.
let captionsBox = e.target.parentElement.querySelector('div.audioTrack');
if (showing === 'true') {
// Grab the caption for the current time.
const currentTime = e.target.currentTime;
let cue = e.detail.find(
(cue) =>
cue !== null &&
currentTime >= cue.start &&
currentTime <= cue.end
);
if (cue?.text) {
captionsBox.innerHTML = cue.text.replace(/\n/g, "<br>");
}
else {
captionsBox.innerHTML = '';
}
}
else {
captionsBox.innerHTML = '';
}
});
});
});
}
})
}
}
Expand Down
Loading