こんにちは、皆さん。今日は、ノーコードのFlutterFlow（フラッターフロー）を使って音声入力について書いていきたいと思います。具体的には、音声の再生機能と入力機能に焦点を当ててみたいと思います。
ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？Adaloとの違いも合わせて解説
音楽再生アプリや音声を登録してそれを再生するアプリは常に一定の需要がありますよね。しかし、プログラミングをしないでこれらのアプリをゼロからスクラッチで開発するのは非常に高額な費用がかかる場合があります。数千万円もの規模の費用がかかる可能性もあるでしょう。
ここで、ノーコードの利用が登場します。ノーコードを使えば、もっと簡単にアプリを開発することができ、コストも1/10以下に抑えることが可能です。さらに、開発期間も短縮できます。スタートアップとしては、ノーコード開発がおすすめの方法といえるでしょう。
それでは、今回はFlutterFlow（フラッターフロー）を使った音声の再生機能および録音機能について説明していきたいと思います。
FlutterFlowで音声ファイルの再生は簡単
FlutterFlowで音声ファイルを読み込む方法は簡単です。まずは以下のようにElementsからAudio Playerを選択肢貼り付けます。
あとは、AudioTypeをNetworkにし、音声ファイルのPathを設定してあげれば完了です。
音声ファイルはあらかじめfirebase側に置いておきましょう。
FlutterFlowで音声を録音し再生する方法
ではFlutterFlowでの音声の録音はどうでしょうか？これも簡単です。
まずはボタンとオーディオプレイヤーを設置
はじめに、録音のスタートボタンとストップボタンを配置します。普通のボタンでOKです。
次にさっきと同じようにオーディオプレイヤー（Audio Player）を配置します。
Microphoneのパーミッション設定
まずはスタートボタンのアクションです。以下のようにRequest PermissionsからMicrophoneを選びます。
録音（レコーディング）の開始
次に、以下オンようにConditionでMicrophoneのパーミッションがOKだった場合、Start Audio Recordingを選択します。これで録音が開始されます。
録音（レコーディング）の終了
今度はストップボタンのアクションです。
Stop Audio Recordingを選びます。ここでポイントは、Action Output Variable Nameをつけることです。ここでは”recording"という名前をつけました。この名前をあとで参照して録音したファイルを再生することができます。
音声プレイヤー側の設定
最後に、Audio PlayerのPathに先ほど設定したAction Outputsから"recording"を選びます。
これで再生ボタンを押せば録音時の値が再生されます。
FlutterFlowの音声録音・再生機能の解説をYoutube動画で見てみる
Youtube動画でも解説しているので、興味のある方はこちらもご覧ください。
この記事では詳細は少し端折りましたが、Youtube動画の方ではボタンの表示・非表示やレコーディング中のアニメーションなども含めて解説しております。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。