When playing above speech🗣️ 💬recording🎙️
Please try clicking🖱️👆 on text 📜 below!
Also try seeking to different parts of recording🎤.

Hopefully it will work like in screencast below, illustrating results of clicking around:

Here is how (using Linux): audio was recorded, done speech-to-text locally (produced .vtt file), so later produced audio and vtt can be easily integrated into code of this site.

STT used was Whisper.cpp by Ggerganov (with model large AUR package and installed with whisper-git AUR pakcage ).

# Step 1: Recoding.
# recording audio in 16kHz for whisper.cpp
#
# # If you want to specify used hardware:
# arecord -D hw:X,Y -f S16_LE -c1 -r16000 -t wav "$1"
# # Use to get list of devices for `hw:X,Y`
# arecord -l
#
# Let's skip `-D hw:X,Y` device parameter and go with defaults:

arecord -f S16_LE -c1 -r16000 -t wav "$1"

# Step 2: STT. 
# Run whisper with multiple output files (we care about VTT for this html+js page)
time whisper.cpp-large -otxt -ovtt -osrt -ocsv -ml 1 "testXX.wav"

# -otxt -ovtt -osrt -ocsv enable creation of output files
# -ml 1 restricts line to n characters. with such small limit
#       it basically splits timestamps word, by word.

# Step 3(optional): 
# To make audio smaller, you may like to convert o `.ogg`:
oggenc -q 3 testXX.wav -o testXX.ogg

# Step 4: Update html file!
# Now you copy copy .vtt into code of this page
# (it is self contained html+js+css in one file!)
# and change audio tag to point
# to your new wav file and you are good!

And screencast was made with vokoscreenNG (there is vokoscreen Arch community package )