3

オーディオ ファイルを src 属性として html5 ソース コードに直接追加すると再生できるという問題がありますが、実行時に src を設定しようとすると再生されません。

もともと、いくつかのオーディオ タグを含む次の HTML がありました。

<audio id="audio1" controls preload="none" src="http:/theurl/clip1.mp3"></audio>
<audio id="audio2" controls preload="none" src="http:/theurl/clip2.mp3"></audio>

id とクリップの URL で呼び出される次の関数でクリップが再生されます。

function audioClick(id, clip) {
    var audio = document.getElementById(id);
    if (audio.paused) {
        audio.play();
    }
    else {
        audio.pause();
        audio.currentTime = 0;
    }
}

これは機能し、ユーザーがページの関連部分をクリックすると、適切な音声ファイルが再生されますが、問題はブラウザがページをロードするのに 3 ～ 4 秒かかり、長すぎることです。src 属性がリモート ファイルであることが原因であるという遅延の理由を突き止めました。また、プリロードを「なし」または「メタデータ」に設定しても、速度は向上しません。

これを回避するために、実行時に src を設定したかったので、関数を次のように変更しました。

function audioClick(id, clip) {
    var audio = document.getElementById(id);
    if (audio.paused) {
        audio.setSrc(clip);
        audio.load();
        audio.play();
    }
    else {
        audio.pause();
        audio.currentTime = 0;
    }
}

htmlをこれに設定してみました

<audio id="audio1" controls></audio>
<audio id="audio2" controls></audio>

しかし、2 つの問題がありました。1) オーディオが再生されない 2) ファイルを再生できないという最初のメッセージがコントロールに表示される

コントロールにファイルを再生できないというメッセージが表示されないので、html を次のように変更しました。

<audio id="audio1"></audio>
<audio id="audio2"></audio>

ただし、ファイルが再生されないという問題は残ります。

この方法でオーディオ ファイルが再生されないのはなぜですか?

4

2 に答える 2

2

ターゲットが iOS の場合、いくつかの落とし穴があります。1 つ目は、audio タグの属性 preload を設定しても何も起こらないことです。iOS は自分のやりたいことをするだけで、私たちにできることはあまりありません。

Yoshi のコードが Chrome ではうまく機能するのに iOS では機能しない理由は、iOS では audio.play() へのすべての呼び出しがクリック イベントと同じ呼び出しスタックにある必要があるためだと思います。play の呼び出しは canplay イベントの結果であるため、iOS によって無視されていると思います。また、src を設定すると、iOS はオーディオをプリロードしません。そのためには audio.load() を呼び出す必要がありますが、以前と同じように、iOS に実際にその関数を実行させるには、ユーザーが何かをクリックする必要があります。

iOS で動作させるには、canplay コールバックを回避し、次を使用する必要があります。

audio.src = src;
audio.play();

それは理想的ではありません。Safari がファイルをロードする間、1 ～ 2 秒かかる場合がありますが、動作するはずです。iOS での HTML5 オーディオの処理は、Android ブラウザや新しいモバイル クロームに比べてかなり制限されています。Mobile Safari は、仕様を窓の外に放り出し、必要なことだけを行います。

于 2012-08-30T15:57:56.523 に答える
0

次のようなものを試してください：

function audioClick(id, src) {
  var audio = document.getElementById(id);
  if (audio.paused) {
    audio.addEventListener('canplay', function canplay() {
      this.removeEventListener('canplay', canplay, false);
      this.play();
    }, false);

    audio.src = src;
  }
  else {
    audio.pause();
    audio.currentTime = 0;
  }
}

その他の利用可能なメディア イベントをご覧ください。

于 2012-08-29T15:08:38.790 に答える