Audio Player
Install an Audio Player to your Adalo apps to play any audio file stored in Adalo or via an external URL. Great for music, podcasts, and audio books!
Skill Level: Intermediate
- You do not need a paid Adalo plan to use this feature
Simple
Video
The Audio Player Component works on web, iOS, and Android, and supports background play. This makes it great for podcasts, music, audio books, and any other type of audio file that has its own URL. Setting it up is super easy!
1.) While in your Adalo app, click the big plus sign in the top left corner
2.) Enter "Marketplace" in the search bar, then click Explore Marketplace
3.) Find Audio Player in the list and click Install, then click Done
4.) Back in the components list, enter Audio Player in the search bar, then click and drag the component onto the desired screen
5.) There's really only 1 thing necessary for the audio player to work. In the Audio Player dropdown section, paste a link or use Magic Text to fill in the URL of Song field with a song URL from your database.
6.) All the other options are totally optional but definitely help to improve the experience for your users! Here's a rundown of the different sections:
- Audio Player - Here you can change the song URL, artist and album name, enable autoplay, enable playing on other screens, or even add actions once the track ends.
- Artwork - In this section you can add a URL for the album artwork, control artwork size and rounding , or disable the artwork completely. It's best to always have an artwork URL because the artwork is always displayed in the phones native player (if the phone is locked for instance)
- Progress Bar - You can customize everything about the progress bar such as colors, thickness, shadow, rounding, border, and even how the audio time remaining is displayed.
- Play and Pause Buttons - Here you can customize the symbols used for play and pause by changing the colors, the size, and any additional actions on each button. Note that these buttons have the play and pause actions built in.
- Forward and Back Buttons - This section lets you customize the forward and back button icons, their size, the additional actions they have, their colors, how much time they skip, or you can disable them altogether.
- Left and Right Buttons - Although this section is disabled by default, you can enable it to add extra buttons to the player so users can vote on tracks, add them to their favorites, or even make purchases. These buttons also have controls for colors, icon, size, and additional actions. Note that these buttons do not have built-in actions like the Play, Pause, Forward, and Back buttons do.
We've made a cloneable app for you that pulls in podcasts using an external collection and also lets users upload their own audio files. If you don't know how to clone apps, you can learn to do that here. Below is an example of what the Audio Player looks like with its default settings and the greatest soundtrack of all time playing.
- Best practice is to only use one audio player component on each screen. Putting multiple on the same screen can lead to weird behaviors such as all of them playing at the same time. It's usually best to create a "track list" first then link each item in the list to a new screen with a single audio player on it.
- Audio Player will not work in a List.
- Currently you can not "scrub" the track playhead (drag the audio timeline dot around) on the native phone player (for instance, when the phone is locked).
- Even if you choose not to display the artwork in the audio player, you might want to specify a URL, because the artwork would also be displayed in the notifications shade / lock screen of a phone when the audio is playing.
- You can also track the number of listens by adding a collection called "Plays" and adding a Create action to the Additional Actions portion of the audio player buttons. This will create a record in this collection anytime the user presses one of the buttons, then you can count the number of Plays.
- The best way to use the Audio Player is by using External Collections or Custom Actions to connect with an outside service API like Spotify, Soundcloud, Audius, Listen Notes, or using RSS feeds.
- You can also let your users upload their own tracks to a File property and then reference the file's URL as the Song URL in the audio player component. The supported file type is currently only .mp3
If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!
Last modified 2mo ago