Audio Widget

Use the audio widget for listening tasks, spoken directions, pronunciation support, and short sound-based prompts.

Where the settings live

Select the audio widget on the canvas and click the floating ⚙ Configure button to open its setup dialog — the clip, playback options, and a live preview all live there. The right sidebar keeps only Style & Layout (colors, button shape and pictures, progress bar, border radius, size and position).

Shortcut: double-click the audio widget on the canvas to jump straight to the media picker, the same way you would to swap out an image. Use it when all you want is a different clip.

Settings to know

In the ⚙ Configure dialog:

• Audio Source opens the media picker so you can choose owned audio, upload a file, record your voice, or generate a sound effect.
• Auto Play starts playback when the scene loads.
• Loop repeats the audio after it ends.

In the sidebar under Style & Layout → Show more options:

• Player Layout controls how visible the audio controls are.

Every clip comes from your media library: a file you upload, a recording you make on the picker's Record tab, or a generated sound effect. On Record, press Start recording, speak, press Stop, and listen back before you save — see Recorded media. Step-by-step: Record your own voice for a question. There is no field for pasting a web link — upload the file instead, so it keeps working even if the original link goes away.

Make the player match your lesson

Under Style & Layout you can restyle the player so it fits the look of your lesson. The settings are grouped by what they change:

• Button: Button Color, Button Shape (circle, rounded square, or square) and Icon Color style the play button. Play picture and Pause picture replace it with your own artwork, for example a speaker character that opens its mouth while it talks. Pick any image from your media library.
• Progress bar (Button + progress layout only): Progress Color, Track Color and Bar Thickness. However thin you make the bar, students can still tap anywhere along its row to skip around.
• Timer (Button + countdown layout only): Timer Color.

A picture is shown whole, on its own, without the colored button behind it or the button shape cut around it, so a transparent PNG looks best. If you set only a play picture, the built-in pause icon appears while the clip plays. If a picture can't load for a student (for example, it was deleted from your library), they see the built-in button instead. Remove a picture to go back to the built-in button. Step-by-step: Turn a picture into a play button for listening.

The picture is drawn inside the button, which is as tall as the widget, so a square image works best. Give the widget alt text that describes what it does, such as _"the directions"_, because a screen reader announces the button by that text, not by the picture.

If a color you pick would be hard for students to see, for example a white icon on a pale yellow button, a warning appears under the settings. Pick a darker or lighter color until it goes away.

Berdee's AI helpers can change a player's colors, shape and bar thickness, but adding button pictures is something you do yourself in the sidebar.

One voice at a time

Students hear one voice at a time. When a clip starts playing, whatever else was speaking stops: another audio or text to speech widget, a choice reading itself aloud, or the device voice counting in a counting collection. And when one of those starts, this clip pauses. So a child who taps a choice while your instruction is still playing hears the choice, not both at once. Press play to pick the instruction up where it stopped.

Loop is the exception: looping audio is background music, so it keeps playing under every voice and nothing stops it.

Reacting when the audio finishes

Each audio widget reports Has finished to visibility conditions. It turns on the first time the clip plays to the end and stays on, even if the student plays it again. Use it in a widget's visibility rule to reveal a follow-up question only after the student has listened all the way through.

The Invisible layout

With the Invisible layout nothing shows on the student's screen at all — no box, no button — and clicks pass straight through to whatever is underneath. Start it from another widget's behavior, or turn on Auto Play.

Grading setup

Audio widgets are not graded directly. They usually deliver the prompt that a learner responds to elsewhere.

How to set up the content

Choose the player layout based on how visible the control should be. If audio is essential but should not dominate the page, a compact button-only layout often works best.

Useful setting combinations

• Button-only layout + Auto Play off:

Best for a learner-controlled Listen Again button.

• Button with progress + Loop off:

Best for standard listening comprehension where learners need a clear play and progress view.

• Invisible layout + triggered by another widget:

Best when audio should be controlled by a button, timer, or scene logic instead of a visible player.

• generated sound effect + hidden player:

Best for a success sound, transition cue, or game feedback triggered by an interaction. Step-by-step: Play a sound for right and wrong answers.

• generated seamless loop + Auto Play + Loop + Button-only layout:

Best for background sound, like waves or rain, under a reading page. Tick Generate a seamless loop on the Sound effects tab so the clip repeats without a jump, and keep the small button visible so students can pause it. Browsers can refuse to start sound before the student has tapped something on the page, so put it on a scene they reach by pressing a button. Step-by-step: Play ocean sounds while students read.

Strong use cases

• Dictation and transcription.
• Listening comprehension.
• Pronunciation models or spoken directions.
• Sound effects that reinforce success, transitions, or game events.

Great pairings with other widgets

• Pair audio with text input for transcription.
• Pair it with multiple choice for listening checks.
• Pair it with image when learners match audio to a visual.
• Pair it with button if audio should begin only after a learner chooses to start.