web-dev-qa-db-ja.com

js / html5オーディオ：iOSサファリでcanplaythroughが起動されないのはなぜですか？

以下のコードを使用して、オーディオファイルの配列をプリロードします（ユーザーがプロセスを開始するボタンを操作した後）。すべてのオーディオファイルが「canplaythrough」で起動された後、コードは次のように進行します。

var loaded = 0;
function loadedAudio() {
    // this will be called every time an audio file is loaded
    // we keep track of the loaded files vs the requested files
    loaded++;
    console.log(loaded + " audio files loaded!");
    if (loaded == audioFiles.length){
      // all have loaded
      main();
    }
}

function preloadsounds()
{
  $("#loader").show();
  console.log(level.config);
  audioFiles = level.config.soundfiles;

  // we start preloading all the audio files with html audio
  for (var i in audioFiles) {
      preloadAudio(audioFiles[i]);
  }

}

function preloadAudio(url)
{
  console.log("trying to preload "+ url);
  var audio = new Audio();
  // once this file loads, it will call loadedAudio()
  // the file will be kept by the browser as cache
  audio.addEventListener('canplaythrough', loadedAudio, false);

  audio.addEventListener('error', function failed(e)
  {
    console.log("COULD NOT LOAD AUDIO");
    $("#NETWORKERROR").show();
  });
  audio.src = url;
}

Android（ChromeおよびFirefox）でうまく機能しますが、iOs Safariで単一のcanplaythroughイベントが発生することはありません（5sでライブテストされ、Xは両方とも11.xでエミュレートされています）。すべてのファイルは同じものから提供されます。 Origin。ログにエラーメッセージも表示されません。

何が足りないのですか？

（上記のコードの基礎は次のとおりです： https://stackoverflow.com/a/31351186/2602592 ）

javascripthtmlhtml5-audio
7
gauguerilla

srcを設定した後、 load() メソッドを呼び出してみてください。

function preloadAudio(url)
{
  console.log("trying to preload "+ url);
  var audio = new Audio();
  // once this file loads, it will call loadedAudio()
  // the file will be kept by the browser as cache
  audio.addEventListener('canplaythrough', loadedAudio, false);

  audio.addEventListener('error', function failed(e)
  {
    console.log("COULD NOT LOAD AUDIO");
    $("#NETWORKERROR").show();
  });
  audio.src = url;

  audio.load();  // add this line
}
13
Gabriele Petrioli

ネットワーク/サーバーをチェックし、Safariがオーディオファイルをダウンロードしていることを確認しましたか？

Safariがオーディオをダウンロードしない（またはファイル全体ではなくメタデータのみをロードする）場合は、audio.preload = 'auto'を設定する前にaudio.srcを設定してみてください。

2
searlea

特にSafariで、オーディオオブジェクトを機能させるという主張がたくさんあります。

すぐに行くために、私はあなたが多くを必要としないとあなたに言うことができます、ただSafari5以上とすべてのブラウザですべてを実行することを知っています。

  1. リストの最初のファイルをリロードするか、ファイルを1つだけ使用する場合はファイルをリロードして、強制的にトラフを呼び出します。 Troughイベントは、ファイルがロードされて読み取る準備ができているかどうかを知ることができるため、ユーザーがファイルを読み取ることができるイベントです。プレーヤーを作成する場合は、スルーが発生した場合にのみ、ユーザーが[再生]をクリックできるように計画しておく必要があります。

    _ObjectAudio.src = file;_

  2. トラフを使用してプレーヤーを更新します

    ObjectAudio.addEventListener ('canplaythrough', Function, false);

  3. Progressを使用して、パーセンテージバッファリングバーを更新します。

    ObjectAudio.addEventListener ('progress', Function, false);

  4. Timeupdateイベントを使用して、読み取りバーを更新します。

    ObjectAudio.addEventListener ('timeupdate', Function, false);

私があなたがしていることを見るので、あなたは複雑なことを必要としません。

** Safari 5Widowsについて心配するのは1つだけです。オブジェクトを機能させるには、QuickTimeをユーザーにインストールする必要があります。インストールしないと、Safari5はHTML5オーディオオブジェクトを認識しません。

0
Cherif