sugulogの日記

JavaScript、visibilityChange!タブがバックグラウンドになったときに音声を止めよう!!

スポンサードリンク

f:id:sugulog:20210803214046p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとvisibilityChangeということで

  •  タブがバックグラウンドになったときに音声を止めよう

について簡単に解説します!!

その為このブログを読むことで、visibilityChangeイベントについて理解が深まるのはもちろん、タブがバックグラウンドになったときに処理をさせる実装力が身につきます。

是非最後までご愛読ください。

 

今回は、

・タブがバックグラウンドになったときに音声を止めよう

の順で解説していきます。

では早速、みていきましょう!!

・タブがバックグラウンドになったときに音声を止めよう

まずはHTMLに音声を埋め込みます。

f:id:sugulog:20210803222457p:plain

次にJavaScriptの記述です。

f:id:sugulog:20210803223900p:plain

まずはaudio要素を取得し、visibilitychangeでタブのコンテンツの表示・非表示を監視しています。

イベント内ではdocument.visibilityStateを使用し、visible(表示)とhidden(非表示) でコンテンツの状態を取得し場合分けしています。

後はplay()で音声再生、pause()で音声停止を行なっています。

では実際に動きを見てみましょう。

f:id:sugulog:20210803224820g:plain

再生状態からコンテンツを非表示状態にし、さらに表示状態にした時の再生時間に注目してください。

非表示状態の際、音声が停止され再生時間が進んでいないのが確認できますね!

実際に実装してみるとしっかり音声が止まっているのも確認できます!!

 

以上、今回のブログでした。

visibilityChangeイベントについて理解が深まり、タブがバックグラウンドになったときに処理をさせる実装力が身につきましたか??

場合分け内の処理を変えるだけで自由に実装できそうですね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!