Skip to content

Commit 12e26e8

Browse files
pinkeshmarspinkeshmars
committed
Added audio actions
1 parent a52a2fb commit 12e26e8

File tree

12 files changed

+452
-11
lines changed

12 files changed

+452
-11
lines changed

‎docs/ff-concepts/file-handling/audio/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Audio",
3+
"position": 0
4+
}

‎docs/ff-concepts/file-handling/audio/audio-player.md

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
title: AudioPlayer
3+
slug: /concepts/file-handling/audio-player
4+
sidebar_position: 0
5+
tags: [Media, Widget]
6+
keywords: [Media, AudioPlayer, Play Audio File]
7+
---
8+
9+
# AudioPlayer
10+
11+
The AudioPlayer widget plays audio from uploaded assets or the URL link.
12+
13+
## Adding AudioPlayer Widget
14+
15+
Here's how you can add the AudioPlayer widget to your project:
16+
17+
1. Drag the **AudioPlayer** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
18+
2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Options** section.
19+
3. Find the **Title** property and enter the value to display the audio title. You can also set this from the variable, such as the app state variable, API response variable, Firestore document, and more. To do so, click on the **Set from Variable**.
20+
4. Find the **Path** property and enter the **URL** for the new audio file.
21+
5. By default, the audio stops when you move to another page using the **Pause on Forward Navigation** property.
22+
6. When an app goes in the background while the audio player is running, you can control the audio player's behavior using the **Play in Background** property, which has following options:
23+
1. **Enabled**: This keeps the audio player running.
24+
2. **Disabled, restore on foreground**: This pauses the audio player and starts playing again as soon as the app is visible.
25+
3. **Disabled, pause**: This stops the audio player as soon as the app goes in the background.
26+
27+
:::info
28+
By default, every AudioPlayer widget added to the project will show sample audio from the internet.
29+
:::
30+
31+
<div style={{
32+
position: 'relative',
33+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
34+
height: 0,
35+
width: '100%'}}>
36+
<iframe
37+
src="https://www.loom.com/embed/38c64816aac64930ac4f06d3876a1670?sid=ea8345b2-7d01-4b80-b901-a2348d5d46ce"
38+
title=""
39+
style={{
40+
position: 'absolute',
41+
top: 0,
42+
left: 0,
43+
width: '100%',
44+
height: '100%',
45+
colorScheme: 'light'
46+
}}
47+
frameborder="0"
48+
loading="lazy"
49+
webkitAllowFullScreen
50+
mozAllowFullScreen
51+
allowFullScreen
52+
allow="clipboard-write">
53+
</iframe>
54+
</div>
55+
<p></p>
56+
57+
## Use Audio from assets
58+
59+
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.
60+
61+
Here's how you can change the audio type:
62+
63+
1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
64+
2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Options** section.
65+
3. Find the **Audio Type** dropdown and select **Asset**.
66+
4. Now, find the **Asset Audio** property, click the **Upload Audio** button, select the audio and upload it.
67+
68+
<div style={{
69+
position: 'relative',
70+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
71+
height: 0,
72+
width: '100%'}}>
73+
<iframe
74+
src="https://demo.arcade.software/X5tUcGCnQC7xA8jTQlGJ?embed&show_copy_link=true"
75+
title=""
76+
style={{
77+
position: 'absolute',
78+
top: 0,
79+
left: 0,
80+
width: '100%',
81+
height: '100%',
82+
colorScheme: 'light'
83+
}}
84+
frameborder="0"
85+
loading="lazy"
86+
webkitAllowFullScreen
87+
mozAllowFullScreen
88+
allowFullScreen
89+
allow="clipboard-write">
90+
</iframe>
91+
</div>
92+
<p></p>
93+
94+
:::info
95+
Once you upload the audio, you can use it throughout your app. You can manage your uploaded audio files with the Project Media Asset Manager.
96+
:::
97+
98+
To use the uploaded audio:
99+
100+
1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
101+
2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Options** section.
102+
3. Find the **Audio Type** dropdown and select **Asset**.
103+
4. Click on **No asset select** (inside the dropdown) and choose the audio.
104+
105+
<div style={{
106+
position: 'relative',
107+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
108+
height: 0,
109+
width: '100%'}}>
110+
<iframe
111+
src="https://demo.arcade.software/Tq8hYJxP6ZH2HAMzbeMA?embed&show_copy_link=true"
112+
title=""
113+
style={{
114+
position: 'absolute',
115+
top: 0,
116+
left: 0,
117+
width: '100%',
118+
height: '100%',
119+
colorScheme: 'light'
120+
}}
121+
frameborder="0"
122+
loading="lazy"
123+
webkitAllowFullScreen
124+
mozAllowFullScreen
125+
allowFullScreen
126+
allow="clipboard-write">
127+
</iframe>
128+
</div>
129+
<p></p>
130+
131+
132+
## Customization
133+
134+
You can customize the appearance of this widget using the various properties available under the properties panel.
135+
136+
### Changing colors
137+
138+
To change the audio tile colors:
139+
140+
1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
141+
2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Player Properties** section.
142+
3. 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.
143+
4. 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).
144+
145+
### Changing elevation
146+
147+
To change the elevation (depth or Z-axis) of the audio tile:
148+
149+
1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
150+
2. Move to the properties panel (on the right side of your screen) and scroll down to the **Audio Player Properties** section.
151+
3. 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.
152+
153+
<div style={{
154+
position: 'relative',
155+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
156+
height: 0,
157+
width: '100%'}}>
158+
<iframe
159+
src="https://demo.arcade.software/fL5C3loHQhty5O1STFIo?embed&show_copy_link=true"
160+
title=""
161+
style={{
162+
position: 'absolute',
163+
top: 0,
164+
left: 0,
165+
width: '100%',
166+
height: '100%',
167+
colorScheme: 'light'
168+
}}
169+
frameborder="0"
170+
loading="lazy"
171+
webkitAllowFullScreen
172+
mozAllowFullScreen
173+
allowFullScreen
174+
allow="clipboard-write">
175+
</iframe>
176+
</div>
177+
<p></p>
178+
179+
### Styling title text
180+
181+
To change the title text style:
182+
183+
1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
184+
2. Move to the properties panel (on the right side of your screen) and scroll down to the **Title Text Style** section.
185+
3. Find the **Theme Text Style** property and change the style as per instructions [here](../../../resources/ui/widgets/built-in-widgets/text.md#common-text-styling-properties).
186+
187+
188+
### Styling playback duration text
189+
190+
To change the playback duration text style:
191+
192+
1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
193+
2. Move to the properties panel (on the right side of your screen) and scroll down to the **Playback Duration Text Style** section.
194+
3. Find the **Theme Text Style** property and change the style as per instructions [here](../../../resources/ui/widgets/built-in-widgets/text.md#common-text-styling-properties).

‎docs/ff-concepts/file-handling/audio/audio-recroding.md

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
title: Audio Recording
3+
slug: /concepts/file-handling/audio-recording
4+
sidebar_position: 1
5+
tags: [Media, Action]
6+
keywords: [Media, Audio Recording, Action, File Handling]
7+
---
8+
9+
# Audio Recording
10+
11+
This action allows users to record audio. Using this action, you can add functionalities like recording voice notes in a note-taking app or practicing pronunciation in a language app.
12+
13+
<div style={{
14+
position: 'relative',
15+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
16+
height: 0,
17+
width: '100%'}}>
18+
<iframe
19+
src="https://www.loom.com/embed/3ad46b01d88b449b95f5745e3c935af2?sid=ace5029b-dd94-40c5-b3b2-f8bb74d13bbe"
20+
title=""
21+
style={{
22+
position: 'absolute',
23+
top: 0,
24+
left: 0,
25+
width: '100%',
26+
height: '100%',
27+
colorScheme: 'light'
28+
}}
29+
frameborder="0"
30+
loading="lazy"
31+
webkitAllowFullScreen
32+
mozAllowFullScreen
33+
allowFullScreen
34+
allow="clipboard-write">
35+
</iframe>
36+
</div>
37+
<p></p>
38+
39+
## Types of audio recording action
40+
41+
Following are the types of audio recording actions you can trigger:
42+
43+
1. [**Start Audio Recording**](#start-audio-recording-action): This starts the recording. It also provides a name to the recording, which you can use later to stop the recording using the "Stop Audio Recording" **action*.*
44+
2. [**Stop Audio Recording**](#stop-audio-recording-action): This halts the ongoing recording using the name from the "Start Audio Recording" action. To capture and play the recorded audio, make sure to specify the *Action Output Variable Name*, which can be used with the audio player.
45+
46+
## Start Audio Recording [Action]
47+
48+
Follow the steps below to start the recording:
49+
50+
1. Select the widget (e.g., Button, Page, etc.) on which you want to add the action.
51+
2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
52+
3. Click on the **+ Add Action**.
53+
4. First, [request permission](../../../resources/projects/settings/project-setup.md#request-permission-action) for the microphone.
54+
5. Inside the **TRUE** section, add the **Start Audio Recording** (under *Utilities*) action.
55+
6. By default, the **Name** is set to any random string. However, you can change it to any friendly name.
56+
7. Optional: After starting recording, you might want to update the state variables to reflect changes on UI. For instance, you can enable/disable buttons or start recording animations to provide a visual cue of the ongoing process. This step allows you to enhance the user experience and provide real-time feedback during the recording.
57+
58+
<div style={{
59+
position: 'relative',
60+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
61+
height: 0,
62+
width: '100%'}}>
63+
<iframe
64+
src="https://www.loom.com/embed/8eccd1d1c01d43f6b5cb5f0cc844a26b?sid=3d53e332-77bc-47f8-84d5-c7b67265ee19"
65+
title=""
66+
style={{
67+
position: 'absolute',
68+
top: 0,
69+
left: 0,
70+
width: '100%',
71+
height: '100%',
72+
colorScheme: 'light'
73+
}}
74+
frameborder="0"
75+
loading="lazy"
76+
webkitAllowFullScreen
77+
mozAllowFullScreen
78+
allowFullScreen
79+
allow="clipboard-write">
80+
</iframe>
81+
</div>
82+
<p></p>
83+
84+
## Stop Audio Recording [Action]
85+
86+
Follow the steps below to stop the recording:
87+
88+
1. Select the widget (e.g., Button, Page, etc.) on which you want to add the action.
89+
2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
90+
3. Click on the **+ Add Action**.
91+
4. Search and select the **Stop Audio Recording** (under *Utilities*) action.
92+
5. Choose the **Recorder Name** from the dropdown. This will be the name you provided in the "Start Audio Recording" action.
93+
6. Specify the **Action Output Variable Name**. This will store the actual audio recording, which you can use with any audio player. It stores recording in an **Audio Path** data type.
94+
7. To upload the audio recording to Firebase or Supabase, you can use the [Upload file](../upload-save-file.md) action. When you add this action:
95+
1. Set the **Upload Type** to the preferred one.
96+
2. Set **File Type** to **Uploaded File** because the *Stop Audio Recording* action internally stores recorded audio bytes (inside widget state).
97+
3. Set the **File to Upload** to **Widget State > [action_output_variable_name]Bytes**.
98+
8. For uploading via API, *you don't need to add the Upload file action*. Just directly add the [**API call**](../../../resources/control-flow/backend-logic/api/rest-api.md) and select the API that will upload the file to your server. **Note** that the request body for this API must be in *Multipart* format. You can pass the audio recording via **Widget State > [action_output_variable_name]Bytes** in the API variable. See how to [configure an API for the multipart request body](../../../resources/control-flow/backend-logic/api/rest-api.md#multipart-format).
99+
9. Optional: After stopping the recording, you might want to update the state variables to reflect changes on the UI. For instance, you can enable/disable buttons or stop recording animations.
100+
101+
:::tip
102+
It's always a good idea to have a fail-safe mechanism to ensure recordings are properly stopped, even if the user forgets to do so manually. For instance, you can trigger this action when the user closes the app without explicitly stopping it.
103+
:::
104+
105+
<div style={{
106+
position: 'relative',
107+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
108+
height: 0,
109+
width: '100%'}}>
110+
<iframe
111+
src="https://www.loom.com/embed/8a3608a0c70545ac92e820cdaf863b96?sid=fc38aaeb-03b8-462e-9a38-c0e6ef591c82"
112+
title=""
113+
style={{
114+
position: 'absolute',
115+
top: 0,
116+
left: 0,
117+
width: '100%',
118+
height: '100%',
119+
colorScheme: 'light'
120+
}}
121+
frameborder="0"
122+
loading="lazy"
123+
webkitAllowFullScreen
124+
mozAllowFullScreen
125+
allowFullScreen
126+
allow="clipboard-write">
127+
</iframe>
128+
</div>
129+
<p></p>
130+
131+
## Playing audio recording
132+
133+
After you have stopped the recording, you can simply provide the *Action Output Variable Name* to the [Audio Player](audio-player.md) widget to start playing the recorded audio.
134+
135+
:::warning
136+
Currently, recording audio isn't supported in Run or Test modes due to certain limitations. However, for Android and iOS platforms, you can test by downloading the code and following the instructions provided [here](../../../testing-deployment-publishing/exporting-code/ff-cli.md).
137+
:::
138+
139+
Here's how you do it.
140+
141+
<div style={{
142+
position: 'relative',
143+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
144+
height: 0,
145+
width: '100%'}}>
146+
<iframe
147+
src="https://demo.arcade.software/jcxiXSOQYhN0S9WZAMKo?embed&show_copy_link=true"
148+
title=""
149+
style={{
150+
position: 'absolute',
151+
top: 0,
152+
left: 0,
153+
width: '100%',
154+
height: '100%',
155+
colorScheme: 'light'
156+
}}
157+
frameborder="0"
158+
loading="lazy"
159+
webkitAllowFullScreen
160+
mozAllowFullScreen
161+
allowFullScreen
162+
allow="clipboard-write">
163+
</iframe>
164+
</div>
165+
<p></p>

0 commit comments

Comments
 (0)