Podcast player

[vcarl]

It would be great if we could have a higher-quality experience for podcast episodes. I repurposed the existing transcripts page to host them, but it's pretty janky when it comes down to it.

This looks like a possibly neat set of primitives for a player https://www.media-chrome.org/

[vcarl]

I've learned some great things

1. Descript has live captions if you publish to their website, which is included in the paid plan I have https://share.descript.com/view/Xzp4pfEfXZ0
2. If you make it public, then the .json file with the complete transcript with start/end timestamps is also public https://d1d3n03t5zntha.cloudfront.net/106d7fc0-ae1b-4b25-90c6-490187bb4b2c/document-42b597473660461ab29e22ee964133e6.json

That data should be enough for me to quickly reimplement some kind of highlight function 👀 👀

I'm thinking of taking that JSON file, committing it to the repo, and using it to render static HTML of the entire transcript. For highlighting, I might do something super stupid like add a CSS variable with a simplification of the current time in the recording (0.25s increments for example) and then use a stylesheet to use that variable as an "active" classname. For example the data looks like this

[
  {
    "word": "Hello",
    "startTime": 0.256666666666667,
    "endTime": 0.616666666666667,
    "speaker": {
      "speakerId": "d2ba11d2-2ade-4a4e-b092-19b879e5b8ea"
    },
    "attrs": 0
  },
  {
    "word": "thanks",
    "startTime": 0.716666666666667,
    "endTime": 0.946666666666667,
    "speaker": {
      "speakerId": "d2ba11d2-2ade-4a4e-b092-19b879e5b8ea"
    },
    "attrs": 0
  },
  {
    "word": "for",
    "startTime": 0.956666666666667,
    "endTime": 1.00666666666667,
    "speaker": {
      "speakerId": "d2ba11d2-2ade-4a4e-b092-19b879e5b8ea"
    },
    "attrs": 0
  },
  {
    "word": "joining",
    "startTime": 1.00666666666667,
    "endTime": 1.28666666666667,
    "speaker": {
      "speakerId": "d2ba11d2-2ade-4a4e-b092-19b879e5b8ea"
    },
    "attrs": 0
  },

Which I could convert into something like:

<span class="00:00:00.5">Hello</span>
<span class="00:00:00.75">thanks</span>
<span class="00:00:01">for</span>
<span class="00:00:01.25">joining</span>

And then use a dynamic