PowerAppsでマイクの音声を録音・保存・再生する

PowerAppsでマイクの音声を録音・保存・再生する

Rev. 0, Y. Nishimura, 2021/6/11

PowerAppsでマイクの音声を録音し、SharePointにJSON形式で保存、それをPowerAppsで再生することができます。

ここではPower Automateを使わずに、PowerAppsのJSON関数を用いてこれらの機能を実現します。

SharePointのリストを作成する

ここではSharePointのリストを使って、音声データを保存します。

「ホーム」ー「+新規」ー「リスト」をクリックします。

「リストを作成」ー「空白のリスト」を選択します。

ここでは「名前」を「AudioJSON」として、「作成」をクリックします。

以下のように、リストに列を追加します。

種類

説明

Name

一行テキスト

音声ファイルの名前

JSON

複数行テキスト

音声データ(JSON形式)

「ID」列を表示します。

「タイトル」列を「必須でない」ようにして、非表示に設定します。

キャンバスアプリを立ち上げる

データを追加する

先ほど作成したSharePointのデータベース「AudioJSON」を接続します。

「データ」ー「データの追加」をクリックして、「SharePoint」の該当のサイトを選び、リスト「AudioJSON」を選択します。

アプリの画面を作成する

画面に「AudioScreen1」と名前をつけて、以下のように、コントロールを配置します。

以下のように、プロパティとその関数を設定します。

コントロール種別名前プロパティfx
ラベルLabel1Text“マイクから録音した音声をJSON形式で保存・再生”
マイクMicrophone1  
オーディオAudio1MediaMicrophone1.Audio
ボタンButton1OnSelect(詳細*)
ラベルLabel2Text“SharePointのリストから再生”
オーディオLabel2MediaSubstitute(Last(AudioJSON).JSON,””””,””)

(詳細*)
Button1.OnSelect =

Set(AudioJson1,JSON(Microphone1.Audio,JSONFormat.IncludeBinaryData));
Collect(
AudioJSON,
{
Name: “TestAudio” & Text(Now(),”yyyymmdd-hhmmss”),
JSON: AudioJson1
}
);

解説します。

  • マイク「Microphone1」をクリックして、音声の録音を開始します。もう一度クリックして、録音を停止します。
  • オーディオ「Audio1」で、録音した音声を再生することができます。
  • ボタン「Button1」をクリックすると、「Microphone1.Audio」を、Binaryデータを含んだJSONフォーマットに変換して、グローバル変数「AudioJson1」に格納します。「Name」列を「TestAudio{yyyymmdd-hhmmss}」、「JSON」列を「AudioJson1」と設定し、SharePointのリスト「AudioJSON」にこのアイテムを追加します。
  • オーディオ「Audio2」で、SharePointに最後に保存した音声を再生することができます。「JSON」列は、複数行テキストですから、ダブルコーテーションがついています。Substitute関数を用いて、それを取り除きます。

アプリの動作を確認する

ブラウザで動作を確認してみましょう。

  • 録音・再生が可能なことを確認します。
  • 保存ボタンを押すと、SharePointにJSON形式で保存されていることが確認できます。
  • 保存された音声が再生できることも確認できます。

また、スマホでも動作を確認してみましょう。

SharePointのデータの例です。

参考文献

以上


コメントを残す