Sound Widget

The Sound widget plays an audio file on a page. Use it for podcasts, instructional audio, voice messages, or music that goes with the content on the page.

When to use this

• You want an audio file playable directly in the app
• The file is either in the file archive or at an external URL
• You want autoplay on page load — or let the user start playback themselves
• You want to show the file's thumbnail as a visual cue for the audio

How it works

The widget shows an audio player with play/pause and a progress bar. You can pick an audio file from the Files plugin archive or point to an external URL. Size and horizontal placement on the page are adjusted with sliders and segment controls.

Add a sound

1. Enable the Files plugin in the applet's Plugin Settings.
2. Open the Design editor for your applet.
3. Add the Sound widget to the page.
4. Open the widget settings.
5. Pick an audio file from the file archive or turn on Select By Url and enter a URL.
6. Adjust Size, Position, and Other as needed.
7. Save your changes.

Widget settings

Source

Setting	Description
Select sound	Opens the file picker against the file archive. Shows the filename when a file is selected.
Select By Url	Turn on to use an external URL instead of a file from the file archive.
URL	The direct URL to the audio file. Shown when Select By Url is on. Invalid formats are flagged with a warning.

Size

Setting	Description
Size	Percentage 10–100 in steps of 5. The player's width scales relative to the page width.

Position

Adjust the player's horizontal placement on the page with the segment control — Left, Center, or Right.

Other

Setting	Description
Autoplay	When on, playback starts automatically when the page loads.
Show Thumbnail	Shows the file's thumbnail next to the player. Only available for files from the file archive.

TIP

Many mobile browsers block Autoplay for audio — in those cases the user still needs to tap play. Don't rely on autoplay as the only way to start playback.

Example

Scenario: You want to embed a welcome message as an audio file at the top of an onboarding page, half-width and centered.

1. Add a Sound widget at the top of the Welcome page.
2. Pick the file welcome-message.mp3 from the file archive.
3. Set Size to 50% and Position to Center.
4. Leave Autoplay off — let the user start it themselves.
5. Turn on Show Thumbnail if the file has a thumbnail in the file archive.

Tips

TIP

Add a Text widget above the sound widget with a short description of what the user will hear. It's extra important because audio files don't have a visible title — only a thumbnail.

TIP

Use files from the file archive rather than external URLs whenever possible. Caching and access control are handled by AppStudio.

Common mistakes

WARNING

Show Thumbnail is disabled when Select By Url is on — external URLs don't carry a thumbnail.

WARNING

If the URL points at an audio format that isn't supported (some proprietary formats), a warning is shown. Use MP3, WAV, OGG, or AAC for best cross-device compatibility.