# bubble：一定の時間経過で音声が鳴る機能について

**URL:** <https://www.nocode-faq.com/t/topic/3106>\
**Category:** bubble\
**Created:** [2022 年 8 月 24 日午前 6:11 UTC](https://www.nocode-faq.com/t/topic/3106 "2022-08-24T06:11:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wataru](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/wataru/32/2147_2.png) [@Wataru](https://www.nocode-faq.com/u/Wataru)\
**Post date:** [2022 年 8 月 24 日午前 6:11 UTC](https://www.nocode-faq.com/t/topic/3106/1 "2022-08-24T06:11:09Z")

</div>

以下のような仕組みを作りたいと思っています。

1. 開始ボタンを押す。
2. 残り時間が表示され、カウントダウンされる（例えば20分00秒から始まり00分00秒までカウントダウン）。
3. 残り5分になった瞬間に「残り5分です」の音声ファイルが再生される。

これはbubbleで実現可能でしょうか…？  
宜しくお願い致します 🙇‍♂️

---

<div class="post-metadata">

**Author:** ![koshi](https://avatars.discourse-cdn.com/v4/letter/k/ce7236/32.png) [@koshi](https://www.nocode-faq.com/u/koshi)\
**Post date:** [2022 年 8 月 25 日午後 12:34 UTC](https://www.nocode-faq.com/t/topic/3106/2 "2022-08-25T12:34:12Z")

</div>

"Custom States"を使えば可能ですね。

以下の4つを作成。  
① ボタンを押したときにタイマーを起動させるTriger（yes/no）  
② タイマーの残り時間（number）←Default：1200  
③ 60の倍数を感知するTriger（number） ←Default：20  
④ タイマーカウント（number）

Workflowの手順  
１ ボタンを押したとき、Workflowで①を”yes”に変更する。  
２ ①がyesのとき、"Do every 1 seconds"のWorkflowで以下の4つを行う。  
⑴ ④のカウントを+1する。  
⑵ (②-④)/60の余り（"modulo"演算を使用）が0のとき、③のカウントを-1する。  
⑶ ④のカウントが900のとき、音楽を再生する。（プラグイン"Howler"を使用）  
⑷ ④のカウントが1200のとき、①を”no”に変更する。

フロント部分については、  
１ ～分のところは、(②-④)/60の、整数部分を抽出する。  
見えないInputに”(②-④)/60”の値を入れ、"extract with Regex"を使用し、整数部分のみ抽出する。  
２ ～秒のところは、(②-④)/60の余り。（"modulo"演算を使用）

といった感じで、実装出来ます。  
今回は、制限時間を20分と想定して構築してあります。  
音声は適当なフリー素材を使っています。

> **[Bubble Editor - Countdown-site](https://bubble.io/page?name=index&id=countdown-site&tab=tabs-1)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

---

<div class="post-metadata">

**Author:** ![K.nakata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/k.nakata/32/1810_2.png) [@K.nakata](https://www.nocode-faq.com/u/K.nakata)\
**Post date:** [2022 年 8 月 25 日午後 2:51 UTC](https://www.nocode-faq.com/t/topic/3106/3 "2022-08-25T14:51:36Z")

</div>

Do every secondの場合、別タブを開くと厳密に計測してくれないんですよね…(笑)  
試しに、上の作っていただいたサンプルでstartして別のブラウザのタブを開いて1分後(スマホとかのタイマー使って正確に)にタブを戻って見てみてください。40秒くらいしか経ってないと思います。

なので、custom event内に音声を鳴らすアクションを作り、あとは、schedule custom eventアクションで60秒後にcustom eventが呼び出されるようにします。  
正確なカウントダウンの数字も表示したいのであれば、タイマー系のプラグイン使った方がいいと思いますね。

 ![スクリーンショット 2022-08-25 23.49.08](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6a38a7ff09a9af7919586babc71341866b39ef1a.png)

 ![スクリーンショット 2022-08-25 23.49.33](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/e514a802637c7ab06d5260c5abbb02f76080f364.png)

---

<div class="post-metadata">

**Author:** ![K.nakata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/k.nakata/32/1810_2.png) [@K.nakata](https://www.nocode-faq.com/u/K.nakata)\
**Post date:** [2022 年 8 月 25 日午後 3:15 UTC](https://www.nocode-faq.com/t/topic/3106/4 "2022-08-25T15:15:58Z")

</div>

というか、多分ですタブを開いてる/開いてないは関係なく、every N secondはその中のアクションが完結しないと次のアクションが実行されてない気がします。  
正確な1分と全然ずれますね。

---

<div class="post-metadata">

**Author:** ![Wataru](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/wataru/32/2147_2.png) [@Wataru](https://www.nocode-faq.com/u/Wataru)\
**Post date:** [2022 年 8 月 25 日午後 11:39 UTC](https://www.nocode-faq.com/t/topic/3106/5 "2022-08-25T23:39:15Z")

</div>

@koshi さん

> "Custom States"を使えば可能ですね。

丁寧にご説明ありがとうございます！嬉しいです！  
試してみたいと思います！

@K.nakata さん

> というか、多分ですタブを開いてる/開いてないは関係なく、every N secondはその中のアクションが完結しないと次のアクションが実行されてない気がします。  
> 正確な1分と全然ずれますね。

なるほどですね！この情報ありがたいです。  
うーん、正確性の担保は難しそうですね。。  
ありがとうございます！参考にして試してみたいと思います 🙇‍♂️
