みなさんこんにちは！ Ryoです！
普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。
今回は以下のように、プラグインを用いて音楽ファイルを再生させる方法を解説していきます。
よくアプリでは動画や画像ファイルなどは応用することはできますが、音楽ファイルは見落としがちだと思うので、ぜひ今回の記事で覚えていただければと思います。
この記事を読むだけで作れるアプリの幅が広がります。
では、いきましょう。
プラグインをインストール
まずPluginsタブのところから、[Howler.js music / audio player]と検索します。
すると以下の画像のようなプラグインが出てくるので、それをインストールします。
このプラグインは、以下の5つのアクションを生成することができます。
- Play→スタート
- Pause→一旦停止
- Stop→停止(音楽も最初からになる)
- Mute→ミュート
- Unmute→ミュート解除
イベントでは、音楽が終了した時に次の動作を加えるためのトリガーとして使うこともできます。
エレメントの設定
次にエレメントを設定していきます。
初めに、以下の画像のようにボタンを5つ設置していきます。
そして、Visual Elementsから[Howler]を選択して、ページのどこかに貼ります。
これはページ内であればどこでも大丈夫です。
そしてHowlerのDynamic linkのところに音楽ファイルのURLを貼ります。
自分が所持している音楽ファイルを貼る場合は、Static fileの部分にファイルを貼れば大丈夫です。
ここでは、以下のURLの音楽ファイルのURLをコピペして貼りましょう。
https://s3.amazonaws.com/appforest_uf/f1515652251449x314972199266776450/a2002011001-e02-128k.mp3
これで設定は完了です。
また、エディターの各設定項目については以下のようになっています。
- Preload→ファイルを事前に読み込むかどうか(ロードの時間短縮になるためチェック推奨)
- Loop→終了時に繰り返すかどうか(繰り返す場合はチェックを入れる)
- Force HTML5 to Audio→HTML5 Audioを使うかどうか(チェック推奨)
- Playback rate→再生速度(0.5倍から4.0倍まで調整可能)
- Volume→音量(0から1まで調整可能)
- Only play 1 sound at a time→バグによりチェックしても変わらない
ワークフローの設定
次にワークフローの設定をしていきます。
まずスタートと書かれたボタンのエディターから[Start/Edit workflow]を選び、ワークフローに移動します。
そこで、
[Click here to add an action…]→[Element Actions]→[Play a Howler]
と選択します。
同様に他の4つのボタンでも操作を行い、Actionだけ以下のように変更していきます。
- 一旦停止ボタン→Pause a Howler
- 停止ボタン→Stop a Howler
- ミュートボタン→Mute a Howler
- ミュート解除ボタン→Unmute a Howler
これで完成です。
では、プレビューで確認してみましょう。
上手くいっていれば、以下のように操作することができます。
あとがき
いかがだったでしょうか？
割と簡単だったのではないかと思います。
音楽ファイルを扱えれば、iTunesのようなアプリも実装可能になるのでぜひ応用して使ってみてほしいと思います。
今後もこんなプラグインの使い方や応用方法、Bubbleの知っておくと便利な豆知識などを発信していますのでぜひ他の記事も読んでみてください。
ためになった方はTwitterやFacebookなどで拡散お願いいたします。
それではまた次回の記事でお会いしましょう！！
