スマホなどで非アクティブからアクティブになった時にアクション

Question

webページアプリを作成しています。

window.onloadで音が鳴るようにしておりますが、スマホで一度起動した後、アプリ一覧から選択した際にもアクションを起こすにはどのようにすればよいでしょうか。
今はこんな感じで書いております。

<script>
window.onload = function ring()
    {
        document.getElementById("play-sound").play();
    };
</script>

ご教示よろしくお願いします。

Answer 1

focus イベントハンドラ

window.onfocus はいかがでしょうか。
(addEventListenerを使うと上書きされる心配がなくなります。)
https://developer.mozilla.org/ja/docs/Web/Events/focus

※音を鳴らす動作は敬遠される場合があるのでユーザが音のOn/Offを設定出来ると良いと思います。

audio要素の API サポート状況

iPhone で動作しないとのことですが、onfocus を確認する前にaudio要素のAPIサポート状況を確認する必要があると思います。
HTMLMediaElement#play が存在するのか。

alert('play' in document.getElementById("play-sound"));

iOS Safari で再生可能な音楽フォーマットを使っているのか。

• HTMLMediaElement - Web APIs | MDN
• Media formats supported by the HTML audio and video elements - HTML | MDN

Page Visibility API

iOS Safari では window.onfocus が動作しないようなので Page Visibility API を併用します。

• Page Visibility - Can I use...

'use strict';
function handleVisibilitychange (event) {
  var doc = event.target;

  if (doc.visibilityState === 'visible') {
    alert(event.target.visibilityState);
    doc.getElementById('play-sound').play();
  }
}

function handleFocus (event) {
  alert(event.type);
  event.currentTarget.document.getElementById('play-sound').play();
}

if ('visibilityState' in document) {
  document.addEventListener('visibilitychange', handleVisibilitychange, false);
} else if ('onfocus' in this) {
  addEventListener('focus', handleFocus, false);
}

Re: kouji20 さん

Comments

[kouji20]

ありがとうございます。
ページも参考にしてやってみたのですが、PC上では動作するもののiphoneでは発動しませんでした。もう少し色々やってみます。

[think49]

> PC上では動作するもののiphoneでは発動しませんでした。
それは onfocus の問題ではない可能性はないでしょうか。
onfocus を使用せずに下記を試してみたらどうなるでしょうか(親記事を修正しました)。
- document.getElementById("play-sound").play()
- in 演算子で play プロパティが存在するか
- 音楽フォーマットは iOS Safari がサポートするものを使っているのか

[kouji20]

返信遅くなりすみません。

onloadやonclickではちゃんと音がなるのですが、他のアプリから切り替えた時はやはり音が鳴らない状況です。
あと”in 演算子で play プロパティが存在するかin 演算子で play プロパティが存在するか”はよくわからず試しておりません。
どういったやり方かご教示お願いできますでしょうか？何度もすみません。

[think49]

「'play' in document.getElementById('play-sound') === true ならば、playプロパティが存在するので play() を実行できる」の意です。
iOS Safari では window.onfocus が動作しないようなので Page Visibility API を併用してみて下さい(親記事を修正しました)。