Skip to main content

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.

DrapCode Builder Audio

Now open the page in preview or publish mode and play the audio.

DrapCode Builder 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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

After linking the audio details page, go to the next option i.e, Get Path Link ID and select the option Parent Component Collection.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio

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.

DrapCode Builder Audio