Power Apps Microphone Control – How to use

In this PowerApps Tutorial, we will discuss what is PowerApps Microphone Control, Some details about the Microphone control that how a user can use it in Power apps.

Also, By taking some simple scenarios, We will cover these below topics that are related to PowerApps Microphone Control as:

• What is Microphone Control in PowerApps
• What PowerApps Microphone Control Supports
• PowerApps Microphone Control Properties
• How to add the Microphone control in Powerapps Screen
• Microphone control in Powerapps gallery
• Powerapps Delete Microphone Record from Gallery
• How to Save PowerApps microphone audio record to SharePoint
• How to convert PowerApps speech to text

Microphone Control in PowerApps

Powerapps Microphone control is a type of control that allows users to record any sounds or audio clips from their devices.

Before using this Microphone control, a user must authorize the app to use the microphone, and also the device should have a microphone that the user is going to use.

Suppose, you want to save the important recorded audio in any data sources like either in SharePoint Online or Powerapps Collection, then you can easily store it.

Introduction to PowerApps Microphone Control

In this, the recorded audio clip is available through the Audio property where the audio can be:

• Stored in a database: If you want to store the recorded audio clips or sound in a database, then you can use the PowerApps Patch function.
• Transmitted as a base64 encoded text string: To convert the recorded audio clips to base64 encode, use the JSON function.
• Played back with the Audio control: To listen to the recent recording, you can use the Audio control.
• Temporarily put in a collection or a variable: You can use the PowerApps Collect function to store the recorded audio clips. Similarly, you can use the Set function to store the record in a Variable. The SaveData and LoadData function helps to move the audio clips to the local storage on the device.

Power Apps Microphone Control Supports

There is an important thing in all controls that everyone should get to know about it. Here, the thing is what supports and what does not supports while working with the Powerapps Microphone Control.

1. At first, you need to remember the Recorded audio format that a user can use it as:

• 3gp format for Android
• AAC format for iOS
• OGG format for web browsers

2. PowerApps Microphone Control has only supported Browsers like Chrome, Firefox, Microsoft Edge based on Chromium. Without all these browsers, if you are using any other browser and platform, then maybe it will show a warning that some features of the app will not work.

3. Also, this Powerapps control supports only with the Android and iOS Devices.

Read Power Apps PDF Viewer

Power Apps Microphone Control Properties

Below represents some important properties of Power Apps Microphone control as:

• Mic: It specifies the numeric ID of the microphone on a device that has more than one microphone.
• OnStop: When a user stops the recording with a Microphone control, it specifies how the app responds.
• Audio: When the user records with the microphone, this audio clip helps to capture it.
• Color: It specifies the color of the text in the Microphone control.
• PressedColor: It specifies the color of text when the user selects the Microphone control.
• DisplayMode: It specifies whether this control allows user input (Edit), only displays data (View), or is disabled (Disabled).
• Fill: It provides the background color of a Microphone control.
• Height: This is the property that specifies the distance between a control’s top and bottom edges.
• Image: This property specifies the image name that displays in an image, audio, or Microphone control.
• ImagePosition: The position (Fill, Fit, Stretch, Tile, or Center) of an image in a screen or control.
• OnSelect: When the user selects the control, it specifies how the app responds.
• OnStart: When the user starts to record with a microphone control, it specifies how the app responds.
• Reset: This property helps to whether a control reverts to its default value.
• Visible: It specifies whether the Microphone control displays or is hidden.
• Width: It specifies the distance between a control’s left and right edges.

Add Microphone Control in Powerapps

To insert the Microphone Control in Powerapps, follow these below steps as:

• Sign in the PowerApps app with your credentials.
• Create a blank new Canvas app and choose any one Layout either Tablet or Phone.
• On the Powerapps Blank screen, Add a Microphone control (Insert -> Media -> Microphone). Then, you can see a Microphone control has been added to the Powerapps screen as shown below:

• Now to listen to your recently recorded audio clips, you need to insert an Audio control to your app. Below the Powerapps Microphone control, add an Audio control (Insert -> Media -> Audio).
• Select the Audio control and set its Media property as:

Media = Microphone1.Audio

Where,

Microphone1 = Microphone control name

• Next, Preview (F5) the app. Tap the Microphone control to start the recording -> then, speak something to record your voice -> Again tap the Microphone control to stop the recording -> Now, Tap the start button of Audio control to listen to the recorded audio clip.

Add PowerApps Microphone audio record to a Gallery control

Suppose there are some important Audio clips and you want to collect all the Microphone audio clips that you have recently recorded. In that case, you can use the Powerapps Collect function and store it in a Gallery control.

Follow these below processes to do so:

• On the Powerapps screen, Add a Microphone control and rename it (optional).
• Select the Microphone control and set its OnStop property as:

OnStop = Collect(SoundCollection, Microphone1.Audio )

Where,

• Collect = This Powerapps function helps to create Powerapps Collection
• SoundCollection = Collection name
• Microphone1 = Microphone control name

• Next, Insert a Gallery control (Insert -> Gallery -> Vertical) and Change the Layout to Title.
• Select the Gallery control and set its Items property to SoundCollection (Collection name that you created in the Microphone control’s OnStop property).

• Next, add an Audio control inside the Gallery control and set its Media property as:

Media = ThisItem.Url

Now, Preview (F5) the app. Start and stop the recording by using the Microphone control. You can see all the recorded audio clips have been stored in the gallery control. Just click on any Play button of audio control that you want to listen to.

This is how to add PowerApps Microphone audio record to a Gallery control.

Power Apps Delete Record from Gallery

Suppose, in case, you want to delete or remove the unnecessary recorded audio clips from the Powerapps gallery control, then you can do this below thing as:

• Add a Trash icon (Insert -> Icons -> Trash) inside the Gallery control and set its OnSelect property as:

OnSelect = Remove( SoundCollection, ThisItem )

Where,

• Remove = This Powerapps function helps to delete or remove the item.
• SoundCollection = Collection name

NOTE:

To remove the audio clips, Not only you can add the Powerapps Trash icon, But also, you can add a Powerapps Button and set its OnSelect property to this above formula.

When you will click on the Trash icon of a specific audio clip, then it will remove from the gallery.

This is how to delete a record from Power Apps gallery.

Save PowerApps Microphone audio record to SharePoint

Here, We will see how we can save our audio clips in SharePoint Online Document Library. For this, we will use Power Automate or Powerapps flow.

Follow these below steps that we needs to do:

Step-1:

In your SharePoint Online Site, Create one SharePoint Document Library (Where all the Powerapps microphone audio records will save) named as PowerApps Audio Clips.

Step-2:

Go to the Powerapps Blank screen, add these below Powerapps input controls as:

• Insert one Microphone control that will help you to record the voice. If you want to provide an Image to this control, then use its Image property.
• Add one Audio control to listen to your recorded voice. Here also, you can provide an image to this control.
• Insert one Label control and set its Text property to “Audio Clip Name: “.
• Insert one Text input control to provide the Record file name and make its Default property to Blank.
• Add one Button to save the audio clip in the SharePoint Document Library and set its Text property to “Save Audio to SharePoint“.

After adding all the input controls, the Powerapps screen will look like as below screenshot.

Step-3:

• Connect the SharePoint Data source to the Powerapps screen. Go to View tab -> Data sources -> Search SharePoint -> Add a new or existing connection -> Select your SharePoint Site -> Choose the specific list or library (PowerApps Audio Clips) -> Hit on Connect button.
• Then your SharePoint list or library will be added as like the below screenshot.

Step-4:

• Select the Audio control and set its Media property as:

Media = Microphone.Audio

Where,

Microphone = Microphone control name

Step-5:

• Select the Microphone control and apply this below formula on its OnStop property as:

OnStop = Set(varJson,JSON(Microphone.Audio,IncludeBinaryData));
Set(strB64Audio, Mid(varJson,25,Len(varJson)-25));

Where,

• varJson = Variable Name
• Microphone = Microphone control Name

Refer the below screenshot.

As we can not save the audio clip directly in the SharePoint through Powerapps, So we need to convert the voice to a binary format and set it in a Variable. This above code helps to convert the microphone audio clips to binary format.

Step-6:

• Now its time to create a Flow or Power automate in Powerapps.
• To create a New flow, Go to Action tab -> Power Automate -> + Create a new flow -> Click on My flows (from left navigation) -> + New -> + Instant-from Blank -> Provide the Flow name -> Choose PowerApps to trigger the flow -> Hit on Create button.

Step-7:

First of all, below the PowerApps action, Add a + New step and insert the Initialize variable action as shown below. Enter these below fields as:

• Name: Enter a name for the Initialize variable.
• Type: Select the Variable type as String.
• Value: Select the Value field and add Ask in PowerApps from the Dynamic content as shown below.

Step-8:

Next below the Initialize Variable action, Add a Create file action (in SharePoint) and enter these below fields as:

• Site Address: Provide the SharePoint Site address.
• Folder Path: Specify the Folder path or Library name (PowerApps Audio Clips) where you want to save the Powerapps recorded audio clips.
• File Name: Select the field -> Go to Dynamic content tab -> Ask in PowerApps -> Set the property Createfile-FileName with an extension of “.webm“.
• File Content: Select the field -> Go to Expression tab -> add base64ToBinary(variables(‘base64Audio’)) -> Click on OK.

The below screenshot represents the whole Power Automate structure that I have created as:

That’s it for the Powerapps Flow. Just save the flow and then go back to the Powerapps screen.

Step-9:

• On the Powerapps screen, Select the Button (Save Audio to SharePoint) -> Go to Action tab -> Power Automate -> Add the flow that you have recently created (Save Audio Clips to SharePoint Online) as shown below.

• Select the Button (Save Audio to SharePoint) and apply this formula on its OnSelect property as:

OnSelect = SaveAudioClipstoSharePointOnline.Run(strB64Audio,txtInput.Text)

Where,

• SaveAudioClipstoSharePointOnline = Powerapps Flow name
• strB64Audio = Initialize Variable value that you have created in Microphone’s OnStop property
• txtInput = Text input control name

Step-10:

• Save and Preview (F5) the app. Start and stop the recording by tapping on the Powerapps Microphone control. Click on the play button from the Audio control, you can listen to the voice recorder that you have recently recorded.
• Enter the Audio Clip Name in the text box and hit on the Button (Save Audio to SharePoint).

• Now, go to your specific SharePoint Document Library (PowerApps Audio Clips). There, you can see your Powerapps recorded audio clip with the given name as like below screenshot.

When you will click on the Audio Clip name link, then the Powerapps recorded voice will play automatically.

This is how to Save PowerApps Microphone audio record to SharePoint.

PowerApps speech to text

Here we will see how we can convert a Speech to text in Powerapps. For this thing also, we will use Power Automate.

Follow these below steps that we needs to do:

• Add one Microphone control and rename it to Recorder.
• Insert one Button, Rename it to btnSubmit, and set its Text property to Submit.
• Add two Labels that will use to hold the values. Rename One Label to RecordJSON and other Label to OutputResult.
• Make both of the Label Text property to blank. Refer the below screenshot.

• Select the Microphone control and set below formula on its OnStop property as:

OnStop = ClearCollect(RecordCollection,Recorder.Audio);Set(JSONValue,JSON(RecordCollection,JSONFormat.IncludeBinaryData));

Where,

1. ClearCollect = This is the Powerapps function that helps to create the Powerapps collection.
2. RecordCollection = Collection name
3. Recorder = Microphone controller name
4. JSONValue = Variable name

• Next, Select RecordJSON Label and set its Text property as:

Text = Text(JSONValue)

• Now we will add the Power Automate or Flow to Powerapps app.
• In the same way, as the previous example, Create the flow by using the Action tab and Power Automate option.
• Create a new flow and enter a name for the flow as PowerApps Speech to Text. Select PowerApps to trigger the flow.
• Below the PowerApps action, Insert a new step and add a Compose action. Fill this below field as:

1. Inputs: Click on the field -> Go to Dynamic content -> Ask in PowerApps as shown below.

Thats it for the Powerapps flow. Now, just Save the flow.

• Next, go back to the Powerapps app. Select the Submit button and add the Power automate that you have recently created as like below:

• Select the Submit button and apply this below formula on its OnSelect property as:

OnSelect = PowerAppsSpeechtoText.Run(JSON(First(RecordCollection),JSONFormat.IncludeBinaryData));

Where,

• PowerAppsSpeechtoText = Power Automate name
• RecordCollection = Collection name

Now we need to create an Azure function to convert Audio captured in PowerApps from Webm to Wav format. For all these things, you can follow these below articles as:

• How to convert Audio from Microphone Control of Power Apps to Text
• Azure function to convert Audio captured in Power Apps from Webm to Wav format

Also, you may like these below PowerApps Tutorials as:

• PowerApps Popup message Box with Examples
• Get users from SharePoint Group in PowerApps
• PowerApps camera control + Save captured image in SharePoint
• PowerApps role based security SharePoint example (SharePoint Groups)
• PowerApps: Submit data to two SharePoint Lists
• PowerApps Patch Function with examples
• PowerApps set field value based on another field
• Embed PowerApps in SharePoint modern page
• How to use date time picker in PowerApps
• PowerApps Search Function + How to use with example

In this PowerApps Tutorial, We discussed what is PowerApps Microphone Control, Introduction to the Microphone control in Powerapps.

Also, By taking some simple scenarios, We covered these below topics as:

• Power Apps Microphone Control Supports
• What are the PowerApps Microphone Control Properties
• Add the Microphone control in Power apps Screen
• Microphone control in Powerapps gallery control
• Powerapps Delete Microphone Record from Gallery
• How to Save PowerApps microphone audio record to SharePoint
• Convert PowerApps speech to text