【ノーコード（NoCode）】Bubbleで作ってみた！【ボイス再生アプリ】

お客さまよりスマホで録音した音をボタン一つで流せないかと相談があり、ボイス再生アプリを考えてみました。
今回はBubbleで目的にあったpluginがありましたので使用していきたいと思います。

必要なもの

• Bubbleで作る
• 使用plugin（Howler.js music / audio player）
• 音源（今回はフリー音源使用。）

管理画面より

My apps横のNew appより開始していきます。
今回Create a new app部分は飛ばしますが、ブラウザの翻訳機能を使って頂ければ勧められます！

プラグインをインストールします。

左メニューにある「plugins」を押します。
画面右上の「Add pluguns（青いボタン）」を押します。

左メニューに検索窓があるので、「Howler」と入れてください。
「Howler.js music / audio player」
似たようなものが何個か出てきますが、よく確認し左下の利用数の多いものとFreeを確認すれば大丈夫。
タイトルの右下「install」ボタンよりインストールします。
※既にinstallしている為、画像では「Uninstall」となっています。

デザインメニューにて、ボタンなどを配置します。

スマホでしか使用を考えていないので、横幅は適当に333としました。

最上部のピンク部分の「声援アプリ」は左メニューより「Text」にて作成。

緑の「ありがとうございます」は左メニューより「Button」にて作成。
緑の「停止」も左メニューより「Button」にて作成。

緑ボタンの後ろ側に見えている物は、「Howler」になります。
左メニューより「Howler」項目をズルズルと引っ張って画面上に表示してください。

以下３つを選んでグループ化（Group elements in a Group）します。
・緑の「ありがとうございます」ボタン
・緑の「停止」ボタン
・「Howler」

私の画面では緑ボタンの後ろに「Howler」を置いています。
「Howler」を選択していただくと黒いメニューが表示されます。

「Static file」部分にて、再生させたいmp3ファイルをupします。
自動的にDBに保存され、「Dynamic link」にもファイルURLが入ります。

メニュー内では、再生速度・音量なども設定可能なので必要であれば追加設定してください。

ワークフローでの再生・停止設定

緑の「ありがとうございます」をダブルクリック。
黒いメニューが表示されたら「Start/Edit workflow」をクリック。

workflowページに移動します。
「Clic here to add an action…」をクリック

「Element Actions」内の「Play a Howler」を選択。

緑の「停止」をダブルクリック。
黒いメニューが表示されたら「Start/Edit workflow」をクリック。

workflowページに移動します。
「Clic here to add an action…」をクリック

「Element Actions」内の「Stop a Howler」を選択。
黒いメニューが表示されたら「Element」にて作成したグループを選択。

設定が完了したら左メニュー「Design」へ戻りましょう。
画面右上の「Preview」を正式な画面へと遷移します。

こちらは、PCで見たプレビューになります。
実際に押して確認してみてください。

以上となります。
使い方次第で、何度も復唱するような街宣や注意呼びかけに活用することができます。
また、登録する音源次第でお遊びも可能です。

夏休みの宿題で、ノーコードを使った宿題発表も最先端かもしれません！
ぜひ、自作してみてください。

もう一つは個人的に作ってみました。

Youtuberが使うような音源を並べ、押すだけで再生されます。
こちらは一時的にURLを公開させていただきますので、触ってみてください。
https://padkontrolcopy.bubbleapps.io/version-test/padkontrol
※都合により、周知なくURL変更する可能性がございます。

その他人気記事はこちら

日本語対応のノーコードツール5選！！プロダクト開発から業務改善まで対応！！（Click、MagicInstructions、サスケWorks、Kintone、Platio）

ノーコードって実際使えるの？ノーコードで開発されたアプリの事例を紹介

【ノーコード（NoCode）】Bubbleで作ってみた！【ボイス再生アプリ】

プレスマンでは、ノーコード（NoCode）・ローコード思考によるDXを進めています。
ECサイト・POC・社内DX・リスキルに至るまで、お問い合わせください。
必ず良い答えをご用意できます！
ご相談は以下よりお願い致します。