Skip to content

Add auto-generated caption support for accessibility. #6

Description

@varphi-online

Youtube automatically generates a coarse timestamped transcript accessible to users, and using:

Array.from(document.querySelectorAll('ytd-transcript-segment-renderer')).map($el => (`${($el.querySelectorAll(".segment-timestamp")[0].textContent.trim()).split(":").reduce((acc, val) => acc * 60 + Number(val), 0) * 1000}, "${$el.querySelector('yt-formatted-string').textContent.trim().replaceAll("\n","")}"`)).join("\n")

In the developer console while the transcript box is open outputs a CSV string formatted as such:

0, "so look at this beautiful freaking"
3000, "Diagnostics look at this I really like"
5000, "them somebody asked in the chat can you"
7000, "explain how this entire thing work to"
10000, "explain how it works I think we need to"
11000, "create a separate file it's an"
13000, "interesting question right so not"
14000, "everybody knows that and finally enough"
16000, "as far as I know the format system of I"
19000, "think rust kind of inherited similar"
...

I would love to see this somehow added as an optional file passed in / config options to display both the chat as well AND the CC for accessibility sake, possibly as a small box below or above the chat itself with an optional prefix like so:

Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions