plyr icon indicating copy to clipboard operation
plyr copied to clipboard

Interactive audio transcript

Open thibaultmol opened this issue 4 years ago • 2 comments

Hi,

A neat feature would be the ability to have show the transcript of an audio file on the player as well (and have the ability to click on a line and then jump to that part of the audio). This would be very useful for recordings of lectures and other talks.

(I've had the idea for a while, but when Google released it's Recorder app that does this I figured I needed to find a javascript player that could do that as well but with the text I'd provide myself)

thibaultmol avatar Nov 18 '19 17:11 thibaultmol

any suggestions on how to do it?

HadiZareZadeh avatar Jun 17 '22 09:06 HadiZareZadeh

I think AblePlayer does this if you'd like to see running code.

It basically requires a video closed captioning file instead of a transcript, injecting the text of the file into a div with data attributes for the timestamps, scrolling to each timestamp as the player reaches that time, and adding onClick events for each sentence to jump to that time.

Easypeasy, lol. Naw seriously; it's a bunch of work, though the task is straightforward. It's been long enough that I've been involved in one of these that I don't have any of my code samples handy, but other code samples are out there (can't vouch for the accessibility or functionality of that one, but the theory and basic JS seem sound).

itmaybejj avatar Jun 21 '22 13:06 itmaybejj