AudioPlayer
The AudioPlayer widget plays audio from uploaded assets or the URL link.
AudioPlayer
Here's how you can add the AudioPlayer widget to your project:
- Drag the AudioPlayer widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Move to the properties panel (on the right side of your screen) and scroll down to the Audio Options section.
- Find the Title property and enter the value to display the audio title. You can also set this from the variable such as the local state variable, API response variable, Firestore document, and more. To do so, click on the Set from Variable.
- Find the Path property and enter the URL for the new audio file.
By default, every AudioPlayer widget added to the project will show sample audio from the internet.
Adding AudioPlayer
By default, the widget is set to play audio from the internet. However, you can change this to use the audio uploaded directly to your app.
Here's how you can change the audio type:
- Select the AudioPlayer widget from the widget tree or the canvas area.
- Move to the properties panel (on the right side of your screen) and scroll down to the Audio Options section.
- Find the Audio Type dropdown and select Asset.
- Now, find the Asset Audio property, click the Upload Audio button, select the audio and upload it.
Changing audio type
Once you upload the audio, you can use it throughout your app. You can manage your uploaded audios with the Project Media Asset Manager.
To use the uploaded audio:
- Select the AudioPlayer widget from the widget tree or the canvas area.
- Move to the properties panel (on the right side of your screen) and scroll down to the Audio Options section.
- Find the Audio Type dropdown and select Asset.
- Click on No asset select (inside the dropdown) and choose the audio.
Using uploaded audio
To play an audio file from the Firestore data, ensure you:
You can customize the appearance of this widget using the various properties available under the properties panel.
To change the audio tile colors:
- Select the AudioPlayer widget from the widget tree or the canvas area.
- Move to the properties panel (on the right side of your screen) and scroll down to the Audio Player Properties section.
- To change the background color of the tile, Find the Fill Color property click on the box next to the already selected color, select the color, and then click Use Color or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
- Similarly, you can change the Playback Button Color (play and pause button) and Active Track Color (the bar color that shows the progress of the currently playing audio).
Changing colors
To change the elevation (depth or Z-axis) of the audio tile:
- Select the AudioPlayer widget from the widget tree or the canvas area.
- Move to the properties panel (on the right side of your screen) and scroll down to the Audio Player Properties section.
- Find the Elevation input box and enter the value to see the drop shadow effect below the badge. The Higher value sets the bigger size of the shadow, whereas the 0 value removes the shadow.
Changing elevation
To change the title text style:
- Select the AudioPlayer widget from the widget tree or the canvas area.
- Move to the properties panel (on the right side of your screen) and scroll down to the Title Text Style section.
Styling title text
To change the playback duration text style:
- Select the AudioPlayer widget from the widget tree or the canvas area.
- Move to the properties panel (on the right side of your screen) and scroll down to the Playback Duration Text Style section.
Styling playback duration text
Last modified 7mo ago