Audio - Basic Component
This component provides audio player support to your web app. You can upload custom audios in formats like mp3 and wav and then display data dynamically using CMS components.
Adding the Audio Player
To add an audio player, go to the “Basic” category under the Components panel and drag and drop the "Audio" component in the canvas.
Now open the page in preview or publish mode and play the audio.
How to Bring Audio Data Dynamically?
1. Create a Collection
Go to the collections panel and click the Add Collection button to create a new collection that will contain data related to audios.
2. Add a File/Image Field
After creating a collection, add required fields in it. In the example below, a name field, a duration field and a genre field. Then most importantly add a file/image field to add different audios in it.
3. Add Data to the Collection
After adding different fields in the collection, add data to it. You can also bring data dynamically to the collection using data sources.
In the example below, data is added manually.
4. Create an Audio Page
After creating a database, it's time to design pages. Start by creating a page to display all the audios. So, go to the pages panel and click the Add Page button.
5. Create an Audio Details Page
once you have added an audio page, create an audio details page as well.
Remember, creating a details page is essential to display data dynamically using the audio component.
6. Design the Audio Page
You can design the page as you want by dropping different components. But you must add a CMS Component, i.e. Data Table, Data List and Data Group.
In the example below, we have added a data group component.
7. Bind the Collection to the CMS Component
After dropping a CMS component, bind the Audio collection you had created previously. So, open the settings of the component, select Get Data from a Collection option and choose the collection you want to bind to the component as shown below.
8. Map the Fields
If you are using the data group as the CMS component then after binding the audio collection, map the collection fields one by one to the components inside the data group. The example below shows the Name field in the audio collection getting mapped to the data group.
Once you have mapped all the fields, your data group component will look like this. In the example below, search form and card links are removed from the data group.
9. Drop a Link Component
Go to the components panel and drag-and-drop a link component in the data group. As you drop the component, its settings will open automatically.
10. Link the Audio Details Page
The purpose of adding a link component is to link the audio details page to it. So after dropping the link component, select the Audio Details page from the dropdown option. It will redirect the users to the details page of that particular audio whose link they click.
11. Get Path Link ID
After linking the audio details page, go to the next option i.e, Get Path Link ID and select the option Parent Component Collection.
12. Open the Page in New Tab
This step is optional. If you want the details page to get open in a new tab, then tick the checkbox or else leave it as it is and move on to the next step.
13. Bind the Collection to the Audio Details Page
Open the settings of the Audio Details page and go to the Advanced Tab. The first option would be of binding a collection. So, select the audio collection and click the Update button.
14.Design the Audio Details Page
Go to Basic category in the components panel and drag-and-drop the Audio Component in the Audio Details page. As you drop the audio component, its settings will open automatically.
15. Get Audio from the Collection
In the audio component settings, you will find a checkbox to bind the audio field of the audio collection to the audio component. You just have to tick it.
In the example below, the checkbox is titled according to the collection name used, i.e., Get Audio From Audios.
16. Select the Audio Field
As you tick the checkbox, a dropdown field will open. It will only show the fields whose field type is File/Image. So, select the audio field and proceed further.
17. Preview or Publish
Now either open the Audios page in the preview or publish mode. It will show all the audios data you have added in the collection. If you click on any link button, you will be redirected to the audio details page that contains the actual audio.