May 2023 Hackathon Project

Re-create the PBS KIDS Podcast Player in React and add Live Captions.

Goals

With the PBS KIDS Redesign project underway, our podcast player will likely be moved to React at some point. I wanted to do a dry run of this while also adding some accessibility improvements to the player. In particular I wanted to play with live captions, which could be generated from the VTT files that are created when a podcast episode is added to Media Manager as video content (example).

This project was inspired by a conversation between Abby Jenkins and Veronica Dunbar, and by the resources shared in this ticket.

What Was Done

• Re-built the player as React components, within an existing React/Next.js prototype
• Added a theme switcher to quickly display different player themes. (This is currently done in the CMS but I wanted to see how that could work alongside the player component.)
• Accessibility features, including:
  • Text/HTML transcripts: Currently transcripts are uploaded as a PDF. They are rarely available, and require a user to download a file. In this prototype they are auto-generated from the VTT file and given their own URL. (See “Additional Wins” below.)
  • Live captions: As an episode plays, text in the captions box is updated and highlighted to show the current position in the episode. A user can read along with the episode as it plays, without switching back and forth between the player and the transcript.
  • Skip back/ahead buttons: Added two additional buttons for skipping back or forward within an episode.
  • Increased text sizes where possible. I also swapped out the headline font in the playlist episode titles for the PBS Sans font.
  • Color contrast: Added two themes that use the new PBS KIDS color palette and text contrast guidelines. (Not sure I implemented the guidelines 100% correctly, but, just showing for example purposes).
  • Added button titles on hover for additional context.
  • Improved keyboard navigation and focus states for keyboard users.
  • Improved the screen reader experience with some markup edits and screen reader text. (More can be done here, such as announcing a new episode when it starts playing, and announcing the results of some interactions.)

Additional Wins

• Deep linking episodes: Each podcast episode can have a unique URL that can be shared (example).
• Linkable transcripts: Each episode transcript has its own URL that can be shared (example). (This can be useful for site SEO and for scenarios where a podcast episode might be streamed from platforms outside of our player.)
• Reduced image sizes: We are currently unable to serve compressed images since they are provided from a PRX feed that we have no control over. But, we can use Next.js image utilities to serve compressed images for improved page performance.

What Is Left To Do

• “More Info” popup: Didn’t have time to impement this.
• Fix scrubber: I tried to be slick and re-create this with CSS transforms but it’s not as responsive to user interaction (and sometimes doesn’t work at all). Needs to be re-done.
• Browser/device/user testing: All the stuff no one cares about during hackathons.
• Might be useful to add a download episode button, which was mentioned in a meeting as something Parents have expressed interest in.

Considerations

• Other tools exist for live captions. Including a built-in tool in Chrome. Would users prefer their own tools and device workflows over a player-specific solution?
• Podcasts already have captions when played in our video player - is it redundant to add them to the podcast player?
• Most of our audience is not old enough to read! My feeling is that this would still be useful for Caregivers, older kids and those who are learning to read. But, those are assumptions.
• Episode slugs don’t match between Media Manager and our CMS. I had to manually map them in some cases. They would need to be standardized.
• Episode durations and timestamps do not account for ads. I added a 25 second buffer to match our sample Arthur podcast, but we would have to figure this out in a real-world scenario.
• The captions field is deprecated in Media Manager as videos are now using HLS captions. Will this affect whether VTT files will exist for podcast episodes in the future?
• ML/AI Solutions might provide a different way to tackle this, by auto-generating captions rather than us loading them in via VTT files. AWS Transcribe, for example, can generate live captions.
  One advantage to how our VTT files are setup is that they include character names, in caps, before the character’s speech, as well as other sound cues (like music notes when music is playing). This provides valuable context for readers. But, maybe an AI solution could identify characters and add those details to the captions.