Hello, Adalo Community!
I have been a member of this forum for quite a long time, and today I would like to introduce a custom component that emerged while I was developing one of my own Adalo projects:
It is a customizable audio player designed primarily for Web and PWA applications built with Adalo.
Why I created this component
The original idea came from a real practical need, but also from the intention to create a component for the Adalo Marketplace—which would be very interesting as well.
I am developing an application for learning foreign languages. I needed a way to play words and phrases from an Adalo collection, repeat them automatically, add a pause between records, and move to the next item either sequentially or randomly.
Later, I wanted to use the same logic for a conventional music playlist.
Adalo provided the database, screens, standard lists, actions, and convenient no-code workflow that I wanted to keep. However, the standard components were not enough to create the audio playback system I had in mind.
The turning point was realizing that a custom component did not have to replace Adalo’s existing capabilities. It could provide its own playback engine while continuing to work with standard Adalo collections, lists, sections, actions, and Magic Text.
This is how Adalo PlayList WEB-Player gradually came to life.
It has been a long and very interesting project: six months of development and more than 700 iterations…
Today is therefore a very important day for me. I would like to tell you about this project and perhaps motivate other users to develop their own applications and components for the Adalo platform.
Component capabilities
The component currently supports:
- audio playback directly from an Adalo collection;
- field connections through Magic Text, without relying on hard-coded internal Adalo field IDs;
- sequential and randomized playback;
- automatic transition to the next record;
- Play/Pause synchronization with the current playback position and the automatic-transition timer;
- a compact Small Player mode and an expanded Big Player mode;
- seeking and playback progress;
- starting playback from a record selected in a standard Adalo list;
- Magic Text outputs for the active track ID, current playback position, Play/Pause state, and player mode;
- continuous playback when navigating between screens in a Web/PWA application;
- cover artwork and multiple customizable text fields;
- switching between image and text presentation;
- automatic detection of audio duration, with the option to save it to the current Adalo collection record;
- extraction of a color palette from the cover image to create dynamic backgrounds and color accents;
- responsive layouts for mobile devices, tablets, and desktop computers;
- 109 properties and settings for adapting the player’s functionality, appearance, and behavior to a particular application.
Special attention was given to the user experience during development. The component includes numerous settings that make it possible to change its appearance, create custom player styles, and adapt the way users interact with it for different scenarios.
It is possible to customize not only the visual design, but also the behavior of the controls, the way content is displayed, and the playback logic. The current component manifest contains 109 properties and settings, organized into 9 thematic sections.
As a result, the same component can look and behave completely differently in a music, educational, or other type of application.
One important architectural decision was that the playlist did not have to be built inside the component itself. I can continue using a regular Adalo Custom List and synchronize its active row with the track that is actually playing.
This allows the application developer to retain control over the list structure, filtering, actions, and appearance using familiar Adalo tools.
Development stack
The component is written in JavaScript. The current implementation uses:
- React 18;
- React Native;
- React Native Web;
- React DOM Portals for certain Web layout scenarios;
- the Adalo Custom Component CLI and component manifest;
- the browser’s HTML Audio Element as the Web/PWA playback engine;
- Magic Text inputs and outputs, actions, and autosave properties for exchanging data with Adalo.
For continuous playback between screens, the Web version uses a single shared audio-player instance.
Another important aspect is that switching from playlist playback to the playback of an individual collection item takes place on the same application screen. This approach helped eliminate inconsistencies between playback modes and reduce problems caused by an unstable internet connection when changing screens.
The most challenging parts of development
The audio controls themselves were not the most difficult part of the project.
The main challenge was making the component behave like a natural part of an Adalo application.
Some of the most challenging tasks included:
- maintaining continuous audio playback while navigating between Adalo screens;
- synchronizing the player with a standard Adalo list;
- distinguishing between the incoming “play this track” command and the ID of the track that is actually playing;
- processing the different data structures that Adalo can pass through Magic Text;
- supporting Adalo audio files, Base64 audio, and source audio-file URLs hosted online;
- keeping the timer, progress bar, Play/Pause state, and automatic track transitions synchronized;
- preventing old component instances from pausing or changing the state of the shared Web player after navigation;
- creating consistent layouts in the Adalo Editor, Previewer, published PWA, and on physical devices;
- accounting for differences between mobile and tablet viewports, including device-level display scaling;
- processing colors extracted from artwork while ensuring that the background does not become too dark, bright, or saturated and that the text remains readable.
A feature that looks quite simple from the outside—such as continuing to play the same track on another screen—required careful state management, restoration, and protection against multiple component instances competing for control of the same audio player.
The component was therefore developed iteratively inside real Adalo applications. It was tested not only in the Editor, but also in published Web/PWA builds and on physical mobile devices and tablets.
Two current use cases
I currently use the component in two main scenarios:
-
Music playlists — a standard Adalo track list combined with a compact or expanded player.
-
Foreign-language learning — automatic playback and repetition of words and phrases, including a configurable pause before moving to the next learning card.
I believe this approach could also be useful for:
- audiobooks;
- podcasts;
- pronunciation trainers;
- meditation applications;
- guided courses with audio content;
- quizzes with audio;
- museum and travel guides;
- any application that needs to play audio and/or display text from Adalo collection records.
Demo
You can see the current version of the component here:
Open the Adalo PlayList WEB-Player demo
I would really appreciate your feedback
The component is still evolving, and feedback from experienced Adalo developers is the main reason I decided to introduce it to the community.
I would especially like to know:
- Would a component like this be useful in one of your Adalo projects?
- What type of application would you use it for?
- Is the combination of a standard Adalo list and a separate synchronized player convenient?
- Which features or settings seem unnecessary or too complicated?
- What feature would you add first?
- What should be improved before a wider release?
If you would like to see a particular scenario, please describe it in the comments. I will try to implement the most interesting suggestions in the demo application.
Thank you for reading. I will be happy to answer technical questions and hear your honest feedback and criticism.
Iurii Portugalov