[{"data":1,"prerenderedAt":331},["ShallowReactive",2],{"post-elearning-and-ai-live-audio-generation-demo":3},{"id":4,"title":5,"author":6,"slug":7,"thumbnail":8,"tabTitle":9,"postDescription":10,"previewText":11,"postType":12,"isLive":13,"hidden":14,"content":15,"updatedDate":329,"createdDate":330},"HhDZNnXPHalkwbPCBscu","eLearning and AI live audio generation demo","Steve Harrington","elearning-and-ai-live-audio-generation-demo","/elearningTitleScreen.png","AI eLearning","AI eLearning is all about content creation and workflows at blazing speeds. This CFU is one step in that direction. I apologize for what I'm about to show you; many of you will not be ready handle what you see and hear. ","","post",true,false,{"type":16,"content":17},"doc",[18,25,40,46,48,58,63,65,70,72,80,85,93,104,106,111,113,116,118,126,131,134,136,141,149,154,162,233,241,246,248,271,279,284,286,291,299,312,314,319],{"type":19,"attrs":20},"image",{"alt":21,"title":21,"width":21,"height":21,"src":8,"float":22,"scale":23,"align":24},null,"none","100","center",{"content":26,"type":37,"attrs":38},[27],{"text":28,"type":29,"marks":30},"You Don't Know Jack About eLearning","text",[31,35],{"type":32,"attrs":33},"textStyle",{"color":34},"#F59E0B",{"type":36},"italic","heading",{"textAlign":21,"level":39},2,{"attrs":41,"type":42,"content":43},{"textAlign":21,"style":21},"paragraph",[44],{"type":29,"text":45},"Way back in the day, there was a game titled \"U Don't Know Jack\". It was hugely popular. It was popular with me and my fellow students at Sheridan College. One thing I always remembered was that it had an excellent matching exercise. The mainstay of eLearning matching exercises is the drag and drop. I've created countless eLearning drag and drop exercises during my eLearning career - and I hate them; most developers do. I've been waiting a long time to create a \"U Don't Know Jack\" matching exercise and now that I've created it, I want you to experience it too.",{"type":42,"attrs":47},{"textAlign":21,"style":21},{"attrs":49,"content":51,"type":37},{"textAlign":21,"level":50},4,[52],{"marks":53,"type":29,"text":57},[54],{"type":32,"attrs":55},{"color":56},"rgb(245, 158, 11)","AI eLearning is here",{"attrs":59,"type":42,"content":60},{"textAlign":21,"style":21},[61],{"type":29,"text":62},"The reason I created it was because I've come to believe that AI has fundamentally changed eLearning production. I'm not implying that day IS coming. I'm telling you that day is TODAY! You can witness it in action NOW - I know because I've built it.",{"type":42,"attrs":64},{"textAlign":21,"style":21},{"type":42,"content":66,"attrs":69},[67],{"type":29,"text":68},"I firmly believe that courses that once took weeks, months - years in some cases - to develop, could be made in days or hours. I took my belief and made it a reality, because that is what I'm good at: creating more with less; making the seemingly impossible, possible. I've built something here that will make you instantly understand the eLearning development game as you might have known it, has EVOLVED and is evolving!",{"textAlign":21,"style":21},{"attrs":71,"type":42},{"textAlign":21,"style":21},{"type":37,"content":73,"attrs":79},[74],{"marks":75,"type":29,"text":78},[76],{"type":32,"attrs":77},{"color":56},"AI produces eLearning better than anything else",{"textAlign":21,"level":50},{"attrs":81,"type":42,"content":82},{"textAlign":21,"style":21},[83],{"type":29,"text":84},"Before you see this for yourself, I need to educate you on what you are about to witness. Every modern eLearning \"page\" is an HTML page, and AI can build that HTML page better and faster than any of the current eLearning authoring tools. \"But,\" you will say, \"allow me to retort! eLearning isn't about a single HTML page! It's about chaining many of those pages together. It's storing a learner's data in an LMS.\" Yada, yada, yada. Well, AI doesn't just simply build HTML pages better and faster, it can chain those pages together; it can chain workflows together; it can create entire courses in the blink of an eye. It just needs some creativity and some understanding to harness the power of AI to do all this heavy lifting.Build the chain once. Every future project and every future edit gets faster.",{"content":86,"type":37,"attrs":92},[87],{"text":88,"type":29,"marks":89},"I warned you that you wouldn't believe it",[90],{"attrs":91,"type":32},{"color":56},{"level":50,"textAlign":21},{"attrs":94,"content":95,"type":42},{"textAlign":21,"style":21},[96,98,102],{"type":29,"text":97},"What you're about to see, ",{"marks":99,"type":29,"text":101},[100],{"type":36},"You Don't Know Jack About eLearning,",{"type":29,"text":103}," is an AI-eLearning proof of concept.",{"type":42,"attrs":105},{"textAlign":21,"style":21},{"content":107,"type":42,"attrs":110},[108],{"type":29,"text":109},"It's a reusable check-for-understanding component — a fast-paced word-association game that forces active recall under time pressure — built using a modern web framework, Firebase, and a live AI audio session. Each group of clues (a round) lives in a Firestore database and is fully configurable through a producer dashboard. This is an interactive matching exercise that employs solid instructional design concepts: it reinforces learning even if the answer is incorrect or times out without interaction by the learner. The clue steadily grows in size and the audio increases in pace to exert pressure on the learner.  By showing time progressing through movement and accelerated audio the learner is pressured to select the correct response . Everyone knows that time is pressure in the world and this exercise tries to emulate that pressure.",{"textAlign":21,"style":21},{"type":42,"attrs":112},{"textAlign":21,"style":21},{"type":19,"attrs":114},{"height":21,"title":21,"width":21,"alt":21,"src":115,"float":22,"align":24,"scale":23},"/attack-dashboard.png",{"attrs":117,"type":42},{"textAlign":21,"style":21},{"type":37,"content":119,"attrs":125},[120],{"type":29,"marks":121,"text":124},[122],{"type":32,"attrs":123},{"color":56},"The round and the clues",{"level":50,"textAlign":21},{"attrs":127,"content":128,"type":42},{"textAlign":21,"style":21},[129],{"type":29,"text":130},"The developer creates a round and subsequent clues through the interface that saves the data in a Firestore database. Anyone can build a complete round in minutes: add clues, flag the correct match, write the intent prompts that guide the AI host's tone and key information at each moment. New topic, new cohort, new course — swap the Firestore document. No code. No rebuild. No redeployment. I want to be clear about what is happening here: those prompts that you see listed as Intro, Correct, Expiry, and Summary are all instructions for AI real-time text to speech voice generation that will be produced on-the-fly and you will swear that it's a real person speaking to you during the game. Not only that but I've directed AI to scour the internet for trending news items and weave that into this quiz. - I know...it's wild.",{"attrs":132,"type":19},{"src":133,"height":21,"alt":21,"title":21,"width":21,"align":24,"scale":23,"float":22},"/example-db-clue.png",{"type":42,"attrs":135},{"textAlign":21,"style":21},{"attrs":137,"content":138,"type":37},{"level":39,"textAlign":21},[139],{"type":29,"text":140},"For you technical eLearning developers",{"type":37,"content":142,"attrs":148},[143],{"marks":144,"type":29,"text":147},[145],{"type":32,"attrs":146},{"color":34},"Jack the voice",{"level":50,"textAlign":21},{"content":150,"type":42,"attrs":153},[151],{"type":29,"text":152},"What you think is recorded audio of a live person is actually narration generated in real time over a persistent WebSocket connection to a live AI audio endpoint. The server authenticates each player's Firebase ID token, enforces a daily session limit per player in Firestore, caps concurrent live sessions, and only then streams raw PCM audio directly to the browser — decoded and scheduled via the Web Audio API for gapless playback. No voice actor. No studio. No re-records when content changes. The feedback prompts in the admin tool are instructions to the AI, not scripts — they define what information to convey and what emotional register to hit. The AI handles expression. Every session sounds different because it is different.",{"textAlign":21,"style":21},{"content":155,"type":37,"attrs":161},[156],{"marks":157,"type":29,"text":160},[158],{"type":32,"attrs":159},{"color":34},"What the AI Replaces, Specifically",{"level":50,"textAlign":21},{"type":163,"content":164},"bulletList",[165,178,189,200,211,222],{"type":166,"content":167},"listItem",[168],{"content":169,"type":42,"attrs":177},[170,175],{"marks":171,"type":29,"text":174},[172],{"type":173},"bold","No narrator fees.",{"type":29,"text":176}," The voice is generated, not hired.",{"textAlign":21,"style":21},{"type":166,"content":179},[180],{"type":42,"content":181,"attrs":188},[182,186],{"text":183,"type":29,"marks":184},"No studio time.",[185],{"type":173},{"type":29,"text":187}," There is no recording session.",{"textAlign":21,"style":21},{"type":166,"content":190},[191],{"attrs":192,"type":42,"content":193},{"textAlign":21,"style":21},[194,198],{"marks":195,"type":29,"text":197},[196],{"type":173},"No sync work.",{"type":29,"text":199}," Audio streams live; it doesn't need to be timed to a timeline because the timeline doesn't exist until the player creates it.",{"type":166,"content":201},[202],{"type":42,"content":203,"attrs":210},[204,208],{"text":205,"type":29,"marks":206},"No re-records.",[207],{"type":173},{"type":29,"text":209}," When content changes, update the Firestore prompt. Nothing was recorded, so nothing needs to be re-recorded.",{"textAlign":21,"style":21},{"type":166,"content":212},[213],{"type":42,"content":214,"attrs":221},[215,219],{"text":216,"marks":217,"type":29},"No script rigidity.",[218],{"type":173},{"type":29,"text":220}," The AI can reference current events mid-game — it has live search access — so a host that was mocking a learner in January sounds different mocking a different learner in September. The context is always now.",{"textAlign":21,"style":21},{"type":166,"content":223},[224],{"attrs":225,"content":226,"type":42},{"textAlign":21,"style":21},[227,231],{"text":228,"type":29,"marks":229},"No production bottleneck.",[230],{"type":173},{"type":29,"text":232}," The instructional designer writes intent. The AI delivers performance.",{"attrs":234,"type":37,"content":235},{"level":50,"textAlign":21},[236],{"text":237,"type":29,"marks":238},"Mixing Jack the voice with pre-recorded MP3s",[239],{"type":32,"attrs":240},{"color":56},{"attrs":242,"type":42,"content":243},{"textAlign":21,"style":21},[244],{"type":29,"text":245},"The intro sequence demonstrates something equally significant: synchronized animation without a timeline editor, without After Effects, without a single frame of pre-rendered video. A WebVTT file — the same plain text format used for video subtitles — is repurposed as a precision cue point system. The app parses it at runtime, and as the audio playhead crosses each timestamp, named events fire into the component tree triggering GSAP animation sequences: Physics2D character explosions with gravity and velocity, SplitText blasts, SVG morphing between shapes, torn-paper reveals splitting in opposite directions. All frame-accurate. All driven by a text file any designer can open and edit. Change a timestamp, the animation shifts to match.",{"attrs":247,"type":42},{"textAlign":21,"style":21},{"content":249,"type":42,"attrs":270},[250,252,262,264,268],{"type":29,"text":251},"On a side note, you can use ",{"marks":253,"type":29,"text":261},[254],{"type":255,"attrs":256},"link",{"target":257,"title":21,"class":258,"rel":259,"href":260},"_blank","text-blue-600 underline cursor-pointer","noopener noreferrer nofollow","http://Whisper.AI","Whisper.AI",{"type":29,"text":263}," to automate the generation of WebVTT files so that it's no longer a manual process. I didn't use it in this case but I would definitely use ",{"type":29,"marks":265,"text":261},[266],{"type":255,"attrs":267},{"href":260,"title":21,"target":257,"rel":259,"class":258},{"type":29,"text":269}," if I were creating subtitling for audio or video used within a course. Once you start harnessing all these workflows into an AI directed chain you begin to see how the old way of developing a course becomes obsolete.",{"textAlign":21,"style":21},{"type":37,"content":272,"attrs":278},[273],{"text":274,"type":29,"marks":275},"AI Bantering in real time",[276],{"type":32,"attrs":277},{"color":56},{"level":50,"textAlign":21},{"attrs":280,"content":281,"type":42},{"textAlign":21,"style":21},[282],{"type":29,"text":283},"Remember all this as you step through this AI-CFU. There's a constant back and forth between the audio elements, the technical build of the component, and the AI. And it's all reusable and will change on demand. I want you to pay attention to just how smart it is: it speaks your name (and gives you nicknames as well); it reacts to your choices, it speaks your score, all in real time - it even interjects with trending news. BTW the AI has been instructed to be pretty sarcastic, so it can speak some controversial things - please don't blame me, it's part of the U Don't Know Jack feel.",{"attrs":285,"type":42},{"textAlign":21,"style":21},{"content":287,"type":42,"attrs":290},[288],{"type":29,"text":289},"I built this and even I'm shocked by it! I thought AI was coming but I've already begun to build it - it's here!",{"textAlign":21,"style":21},{"attrs":292,"content":293,"type":37},{"textAlign":21,"level":50},[294],{"type":29,"marks":295,"text":298},[296],{"type":32,"attrs":297},{"color":56},"Go time...",{"type":42,"content":300,"attrs":311},[301,303,309],{"type":29,"text":302},"One last point before you test it yourself, ",{"text":304,"type":29,"marks":305},"LIVE",[306,308],{"attrs":307,"type":32},{"color":34},{"type":173},{"type":29,"text":310},": I've limited you to a single session to keep AI costs down; so once you've been through it once, you're done. You can reach out to me for a reset if you'd like: steve.harrington@igeddit.ca. As you go through this demo, ask yourself this question, \"How difficult would this be to achieve using Captivate, Lectora, or Storyline?\" and \"How much time would this take using 'normal' eLearning development workflows?\"",{"textAlign":21,"style":21},{"attrs":313,"type":42},{"textAlign":21,"style":21},{"attrs":315,"type":42,"content":316},{"textAlign":21,"style":21},[317],{"type":29,"text":318},"I've already apologized in advance, haven't I. Anyway, here you go, you're about to realize that when it comes to eLearning...You Don't Know Jack:",{"attrs":320,"type":42,"content":321},{"textAlign":21,"style":21},[322],{"text":323,"type":29,"marks":324},"https://elearningplayground.com/",[325,327],{"type":255,"attrs":326},{"class":258,"rel":259,"target":257,"title":21,"href":323},{"type":32,"attrs":328},{"color":34},"2026-04-25","2026-04-20",1777138259504]