No, not map-reduce-filter, I know how all that works. I'm talking about the embedded code playground and the ability to play an audio clip and have the code in the editable text area get updated as though it was happening in real time, in lock step with what the audio was describing. There is even highlighting and deleting of the text. (To get it to start playing the interactive script, you have to click on the person's avatar under the code playground area)
Then, once the audio is over, you can enter some code yourself and the run it. The code will then run and the console output is shown in a small "terminal window" below the text area.
This is pretty amazing to me. I've seen the little code playground thingies before on sites like Kotlin's and Groovy's documentation but. I have never seen the interactive audio part. What is this magic and how do you do it?
P.S. Looking at the page source, I believe React Typography (MUI) is involved somehow because there are many references to "Muitypography" and such.
I was just thinking how great it would be to have such a feature somewhere here on CodeRanch.
I think the Typography API is only used to generate the code.
I don't know what specific library is being used to react to the audio cues, but it doesn't appear to be too hard to recreate. The <audio> element has a timeupdate event which you can respond to, and all that's left is to match the current playback time to a list of audio cues and then trigger the cued code update.