Multimedia Comments in LiaScript - This Changes Everything

Multimedia Comments in LiaScript - This Changes Everything

How can you add your voice or short video sequences to your LiaScript courses? With the new multimedia comments feature, it’s now possible. This feature allows you to replay your voice or video directly in the browser as part of a LiaScript course. It’s a game changer for educators looking to create interactive and engaging courses.

How Does It Look?

It’s quite straightforward. Simply add a multimedia link using LiaScript syntax to the beginning or end of your comment. That’s all it takes!

    --{{0}}--
This is an original comment, which will use browser-based text-to-speech
output in the predefined language and voice.

    --{{1}}--
This is a similar comment, but it will use a predefined audio file, which
is attached to the end or beginning of the comment.
?[audio](link_to_your_audio_file.mp3)

    --{{2}}--
!?[video](link_to_your_video_file.mp4)
And this will start a video, which will be displayed in an overlay above
the course content. You can move it around and resize it as you like.

A Brief History

At the eLearning Africa 2024 conference, it became evident that relying solely on browser-based text-to-speech output was insufficient for many underrepresented languages and dialects. This long-requested feature needed to be addressed. We aimed to solve this while maintaining the readability of the original Markdown file, ensuring compatibility with other Markdown interpreters to reference and point to the multimedia content.

For the audio component, the solution was straightforward. We linked to audio files, which are not visible in LiaScript, and controlled their playback. However, integrating video was more challenging. We needed to find a way to incorporate the video into the DOM without disrupting the original content. Inspired by a virtual presentation recorded with OBS Studio using a circle webcam filter that overlays the desktop, we recreated a similar effect in LiaScript.

Incorporating accessibility features and adding recording capabilities to the live editor was tricky. However, with a bit of AI assistance, it became much more manageable.

Demo Material

To try out this new feature in the Live-Editor, follow the link below. Be sure to click on “Fork” if you want to add or record your own multimedia content. This way, a new instance of the course will be stored in your browser.

Goto LiveEditor

Explore the possibilities and transform your educational content with multimedia comments in LiaScript.

Here is an embed only demo:

Related Posts

C-Programmierung (German)

Dies ist eine interaktive Portierung des freien Wikibuches C-Programmierung nach LiaScript. Um die Beispielprogramme in diesem Buch ausführbar zu gestalten, wird auf die kostenlose und nicht kommerzielle API von CodeRunner zurückgegriffen. Dieser wird unter einer kostenlosen Heroku-Instanz gehostet, sodass das aufwecken des Servers manchmal bis zu 30 Sekunden in Anspruch nehmen kann. Dann sollte es flüssig laufen ;-) Kurs Starten Das GitHub-Repositorium für dieses Projekt befindet sich hier: https://github.com/LiaBooks/C-Programmierung … oder schauen sie sich das Beispiel im LiveEditor an:

Read More

Promoting your Content

If you want to “promote” the LiaScript content you have created, or share it with a wider audience, then you can use the following methods. 0. Add LiaScript meta-information Add a first HTML-comment to your Markdown document, as depicted below. This HTML-comment should provide at least the information about the author, an email address for contacting, a comment that summarizes your course in a few sentences, a logo, and an optional repository, which points to your GitHub, GitLab repository, if the course will be served from somewhere else.

Read More

Teach Your AI to Generate LiaScript Previews

Claude.ai offers a powerful feature in its paid version that allows you to preview generated code directly. However, with a simple prompt, you can teach any AI to create LiaScript previews on demand—even if you’re using a free version. What Are Data-URIs? In a previous post, we briefly covered how you can use data-URIs to encode LiaScript content. Where is Content Stored? Did you know that LiaScript tries to be agnostic as possible, when it comes to hosting?

Read More