7

Web サイトに新しいメッセージが表示されたときにサウンドを再生する必要があります。Chrome と Safari では問題なく動作しますが、Safari モバイルでは動作しません。ユーザーアクションでサウンドを初期化する必要があることがわかったので、次のことを試しました。

var sound = new Audio('./path/to/my/sound.mp3');
var hasPlayed = false;

$('body').bind('click touchstart', function() {
  sound.load();
});    

sound.addEventListener('play', function() {
  hasPlayed = true;
});

var playSound = function() {
  if(hasPlayed) {
    sound.currentTime = 0;
  }
  sound.play();
}

残念ながら、音はまだ再生されません。Buzzライブラリでも試してみましたが、問題は同じです。

問題は、モバイル ブラウザでプログラムによってサウンドを再生するにはどうすればよいかということです。

4

2 に答える 2

7

まず第一に、iOS (5.01、5.1) の Mobile Safari での HTML5 オーディオのサポートはかなり制限されています。しかし、iPad 2 の Web アプリで小さな「イベント タイプ」のサウンドを動作させることができました。アプリのサウンド ファイルは 1 つだけなので、オーディオ スプライトのトリックに頼る必要はありません (つまり、複数の MP3 を 1 つの MP3 ファイルにマージし、マージしたファイル内の再生位置を目的のサウンドに応じて変更します)。再生されます)。

お気づきのように、Mobile Safari では音声を自動的に再生することはできません。つまり、ユーザーが何らかの要素をクリックしなければなりません。技術的に言えば、クリック イベントと同じコール スタックでオーディオを再生する (ロードしない) 必要があります。ただし、Mobile Safari がオーディオ オブジェクトを作成するときに、おそらく 0.5 秒の遅延が発生します。この「問題」の解決策は次のとおりです。

  • アプリの開始時 (読み込み中または初期化中) に、ユーザーがアプリ内の任意の場所をクリックまたはタップするとすぐにオーディオ ファイルの再生を開始するクリック ハンドラーを HTML ドキュメントに追加します。これにより、Safari が強制的にオーディオの読み込みを開始します。
  • オーディオの再生準備が整ったときにトリガーされる「再生」イベントをリッスンし、すぐに一時停止します。
  • 必要なときにオーディオの再生を (遅延なく) 再開します。

簡単な JavaScript コードを次に示します。

function initAudio() {
    var audio = new Audio('./path/to/my/sound.mp3');
    audio.addEventListener('play', function () {
        // When the audio is ready to play, immediately pause.
        audio.pause();
        audio.removeEventListener('play', arguments.callee, false);
    }, false);
    document.addEventListener('click', function () {
        // Start playing audio when the user clicks anywhere on the page,
        // to force Mobile Safari to load the audio.
        document.removeEventListener('click', arguments.callee, false);
        audio.play();
    }, false);
}
于 2012-07-06T09:30:30.717 に答える
2

この問題に遭遇し、Jeroen による解決策が機能しない場合は、ここで機能し、適切なスコープが正しく適用されることを保証する解決策があります。

ページの読み込み時に initAudio が呼び出されるようにします。つまり、Init 関数または document.ready ($(function(){});) 内の jquery の場合

function initAudio(){
    var audio = new Audio('./path/to/my/sound.mp3');
    var self = this;
    //not sure if you need this, but it's better to be safe
    self.audio = audio;
    var startAudio = function(){
                         self.audio.play();
                         document.removeEventListener("touchstart", self.startAudio, false);
                     }
    self.startAudio = startAudio;

    var pauseAudio = function(){
                         self.audio.pause();
                         self.audio.removeEventListener("play", self.pauseAudio, false);
                     }
    self.pauseAudio = pauseAudio;

    document.addEventListener("touchstart", self.startAudio, false);
    self.audio.addEventListener("play", self.pauseAudio, false);
}
于 2014-02-18T20:41:52.880 に答える