電話ロック中にオーディオが再生されるようにすることができます

Question

私はWebチャットアプリを作っています。新しいメッセージが到着したときに通知音を鳴らす必要があります。

まずはhowler.jsを使用してサウンドを再生しています。ハウラーでは、音を鳴らすことができます。その後、画面をロックしたり、ブラウザーのタブのフォーカスを変更したりすると、再生が続けられます。 しかし、タブが開いていてモバイル画面がロックされていてもサウンドの再生が開始されず、別のタブのアプリケーションを開いたまま他のタブに移動しても再生されません。

基本的に私の質問は、は、画面がロックされていてもサウンドを再生したり、別のタブにいるときにサウンドを再生したりすることができますか？

app.js

var notify_sound = new Howl({ 
    src: ['./assets/sounds/notify2.mp3'], 
    volume: 1.0 
}); 
. 
. 
. 
. 
. 
. 
. 
. 
if(type == "user"){ 
     if(userAddress == remoteAddress) { 
      typing.html('').fadeOut('fast'); 
      messages.append('<li class="self"><p class="message">'+ obj.message + '</p><p class="time">' + time +'</p></li><p class="username_self">' + userAddress + '</p>'); 
     } 
     else { 
      typing.html('').fadeOut('fast'); 
      messages.append('<li class="other"><p class="message">'+ obj.message + '</p><p class="time">' + time +'</p></li><p class="username_other">' + userAddress + '</p>'); 

      notify_sound.play(); 
     } 
    } 

Answer 1

HTML5オーディオと携帯は本当に仲良くしないでください。 Howler.js（2.0を使用している場合）は、再生をトリガーする最初のタッチイベントにイベントハンドラをアタッチすることで、オーディオを「自動再生」するための回避策を使用します。ビューがアクティブでない場合、再生をトリガーするタッチイベント（シミュレートされたイベントでさえ）はありません。ドキュメントから

：音が がユーザーの操作で再生されるまで

モバイル再生デフォルトで

、iOS版、Android上でオーディオ、などがロックされ、それが正常に果たしています残りはページセッションの （Appleのドキュメント）です。 のデフォルト動作howler.jsは、最初のtouchendイベントで空のバッファー を再生することで、音声再生を静かにロック解除しようとします。

Howler.mobileAutoEnable = false;

何の最初の相互作用はありません場合は、ずっとあなたが行うことができますがありません。この動作は、呼び出すことによって無効 することができます。