1

ユーザーが画像をクリックしたときにサウンドを再生したい。私は SoudManager プラグインを使用しています。

ここで私がやっていることを確認できます：

soundManager.setup({
        url: 'swf',
        onready: function() {
            soundCarro = soundManager.createSound({
                id: 'soundCarro',
                url: 'sound/carro_camona.mp3'
            });
            soundMoto = soundManager.createSound({
                id: 'soundMoto',
                url: 'sound/moto_camona.mp3'
            });
            soundNautico = soundManager.createSound({
                id: 'soundNautico',
                url: 'sound/nautico_camona.mp3'
            });
        }
    });

ご覧のとおり、3 つのサウンド オブジェクト (soundCarro、soundMoto、soundNautico) を作成します。

ここでは、ユーザーがクリックすると scrollTo 関数が呼び出されるアクションを示します。

<img id="ca" class="ca logo" onclick="scrollTo('secao-carros',true);" src="images/svg/CAhome.svg">

ここでは、scrollTo 関数を確認できます。

function scrollTo(target,sound){
    if(sound){

        var delay = 0;

        if(target == 'secao-carros'){
            soundCarro.play();
            delay = 700;
            duration = 750;
        }

        if(target == 'secao-motos'){
            soundMoto.play();
            delay = 900;
            duration = 750;
        }

        if(target == 'secao-nauticos'){
            soundNautico.play();
            delay = 850;
            duration = 2000;
        }

        $('html, body').delay(delay).animate({ scrollTop: $('#'+target).offset().top }, {duration: duration});
    }else{
        $('html, body').animate({ scrollTop: $('#'+target).offset().top }, {duration: 750});
    }
}

ご覧のとおり、この関数では、作成したサウンド オブジェクトを実行します (例: soundNautico.play();)。

問題は、iPad や Android デバイスではこのサウンドの実行に大きな遅延が発生することですが、デスクトップ ブラウザでは問題なく動作します。

この遅延を防ぐにはどうすればよいですか?

4

1 に答える 1

1

これは、デスクトップ ブラウザがオーディオをプリロードするため.play()、ブラウザを呼び出すと、オーディオの一部 (全部ではないにしても) が既にバッファリングされているため、ブラウザはすぐに再生を開始するためです。

iOS および他のほとんどのモバイル ブラウザーでは、A) 一度に 1 つのオーディオ ファイルしか再生できない、B) オーディオをまったくキャッシュできない、C) オーディオ オブジェクトを初期化/再生できるのは、ユーザーが同じ呼び出しスタックでアクションを物理的に開始しました。したがって、遅延を望まない場合は、基本的に不運です。

編集:イベントリスナーをオーディオに追加し、オーディオがバッファリングされた後にのみスクロールをトリガーできます。ただし、一度に複数のサウンドをロードすることはできません。

audio.addEventListener("canplay", function(e) {
  doScroll();
  audio.play();
}, false);

```

于 2013-05-03T18:34:42.507 に答える