4 ms·

Wow! Is there an easy way to combine these subtitles with the video in the browser?

by tuukkah 4y ago

usr1106 4y ago
Not a format I would recognize, but I am not an expert in the area. Two lines of awk would convert it to srt I guess.
- tuukkah 4y ago
  It's even closer to WebVTT, just had to add the line "WEBVTT" to the top and replace all square brackets with line breaks: curl https://jonatron.github.io/fosdem2023whisper/files/celebrating_25_years_of_open_source.webm.txt | ( echo "WEBVTT"; sed -e 's/^\[\|\] \?/\n/g' ) >celebrating_25_years_of_open_source.webm.vtt Plays in the browser with HTML like this: <video controls src="https://video.fosdem.org/2023/Janson/celebrating_25_years_of_open_source.webm" > <track default srclang="en" src="celebrating_25_years_of_open_source.webm.vtt" > </video>
  - karencarits 4y ago
    A sidenote, but adding subtitles to pure audio in HTML is surprisingly difficult!
    - tuukkah 4y ago
      Does it not work to put a track element inside an audio element?
      - karencarits 4y ago
        You can try to fake it as a video, but in my experience, it is difficult to properly format the element so that the subtitles or captions actually shows https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio https://developer.mozilla.org/en-US/docs/Web/HTML/Element/au... > The <audio> element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a <video> element, which does support WebVTT.
  - cratermoon 4y ago
    Is my version of sed dumb, or is 's/^\[\|\] \?/\n/g' effectively a no-op? Or did HN garble something?
    - tuukkah 4y ago
      I used GNU sed on Ubuntu. The only difference I notice is that you have one space where I had two, but that difference shouldn't matter actually. Perhaps your sed has a different opinion on which of the backslashes should be there. You can access the resulting WebVTT files here: https://github.com/tuukka/fosdem2023whisper/tree/feat/webvtt/files https://github.com/tuukka/fosdem2023whisper/tree/feat/webvtt...
      - cratermoon 4y ago
        Once again macOS non-standard utilities bite me. -E Interpret regular expressions as extended (modern) regular expressions rather than basic regular expressions (BRE's) -r Same as -E for compatibility with GNU sed. Thanks for providing the complete set of vtt files. I found some interesting transcription errors in the talk on Elliptic curves in FOSS. For example "jealous two curves" instead of "genus two curves" and "ethyl curbs" instead of "elliptical curves"
jonatron 4y ago
It looks pretty easy, but I'm not going to do it, if someone else wants to.

Wow! Is there an easy way to combine these subtitles with the video in the browser?

usr1106 4y ago

Not a format I would recognize, but I am not an expert in the area. Two lines of awk would convert it to srt I guess.

tuukkah 4y ago
It's even closer to WebVTT, just had to add the line "WEBVTT" to the top and replace all square brackets with line breaks: curl https://jonatron.github.io/fosdem2023whisper/files/celebrating_25_years_of_open_source.webm.txt | ( echo "WEBVTT"; sed -e 's/^\[\|\] \?/\n/g' ) >celebrating_25_years_of_open_source.webm.vtt Plays in the browser with HTML like this: <video controls src="https://video.fosdem.org/2023/Janson/celebrating_25_years_of_open_source.webm" > <track default srclang="en" src="celebrating_25_years_of_open_source.webm.vtt" > </video>
- karencarits 4y ago
  A sidenote, but adding subtitles to pure audio in HTML is surprisingly difficult!
  - tuukkah 4y ago
    Does it not work to put a track element inside an audio element?
    - karencarits 4y ago
      You can try to fake it as a video, but in my experience, it is difficult to properly format the element so that the subtitles or captions actually shows https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio https://developer.mozilla.org/en-US/docs/Web/HTML/Element/au... > The <audio> element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a <video> element, which does support WebVTT.
- cratermoon 4y ago
  Is my version of sed dumb, or is 's/^\[\|\] \?/\n/g' effectively a no-op? Or did HN garble something?
  - tuukkah 4y ago
    I used GNU sed on Ubuntu. The only difference I notice is that you have one space where I had two, but that difference shouldn't matter actually. Perhaps your sed has a different opinion on which of the backslashes should be there. You can access the resulting WebVTT files here: https://github.com/tuukka/fosdem2023whisper/tree/feat/webvtt/files https://github.com/tuukka/fosdem2023whisper/tree/feat/webvtt...
    - cratermoon 4y ago
      Once again macOS non-standard utilities bite me. -E Interpret regular expressions as extended (modern) regular expressions rather than basic regular expressions (BRE's) -r Same as -E for compatibility with GNU sed. Thanks for providing the complete set of vtt files. I found some interesting transcription errors in the talk on Elliptic curves in FOSS. For example "jealous two curves" instead of "genus two curves" and "ethyl curbs" instead of "elliptical curves"

jonatron 4y ago

It looks pretty easy, but I'm not going to do it, if someone else wants to.