Win a copy of Rust Web Development this week in the Other Languages forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

What IS this magic (and how do you do it)?

 
Sheriff
Posts: 16767
281
Mac Android IntelliJ IDE Eclipse IDE Spring Debian Java Ubuntu Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I found this recently and I can't wrap my head around how it can be done: https://www.cs124.org/lessons/Fall2021/kotlin/134_streams/#map-reduce-filter

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.
 
Saloon Keeper
Posts: 13481
304
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Junilu Lacar
Sheriff
Posts: 16767
281
Mac Android IntelliJ IDE Eclipse IDE Spring Debian Java Ubuntu Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Searching javascript sync audio with typing text in input field and finding some possible clues to solving this puzzle. If y'all have any tips for me on learning how to do this, I would very much appreciate them.

Thank you in advance.
 
reply
    Bookmark Topic Watch Topic
  • New Topic