2

次の HTML と JS があります。 

<script>
  function onEnded(ev) {
    window.location.reload();
  }
</script>

<audio id="audio-element" controls autoplay onended="onEnded();">
  <source src="/stream/3" type="audio/mp3" />
</audio>

一部の MP3 ストリームでは、これは完全に機能します。再生が開始され、オーディオ トラックが終了するonEndedと呼び出されます。他の場合は、再生が正常に開始され、オーディオ ファイルが再生されますが、最後に経過時間カウンターが極端にマイナスになり、endedイベントが発生せず、audio_element.endedが返されますfalse。スクリーンショットは次のとおりです。

Chrome オーディオ プレーヤー エラー

これは Chrome で発生しますが、期待どおりに動作する Safari や Firefox では発生しません。endedイベントを発生させるためにChromeで何ができるか考えていますか?

4

3 に答える 3

1

サーバーが範囲転送を受け入れることを確認する必要があります。そうしないと、chrome が時間を正しく評価できず、「終了」イベントが発生しません。

これを確認するには、次のようにします。

 curl --head -X GET http://yourmp3location

表示された場合:

 Accept-Ranges: bytes

それなら問題ありません。それ以外の場合はサーバーを修正してください

さらに、これを試しましたか？

<audio id="audio-element" controls autoplay onended="onEnded">

ページのレンダリング中にブラウザが onended 関数を評価しないように、onended 属性を変更しました。

タグ audio の onended 属性を削除して、これをページの下部に追加することもできます。

<script type="text/javascript">
   document.getElementById("audio-element").addEventListener('ended', function(ev) {
       window.location.reload();
   }, false);
</script>
于 2013-07-15T15:47:41.553 に答える
1

Chrome でも非常によく似た問題がありました。このブラウザは、新しい Chrome 64 (およびベータ 65、カナリア 66) では onended イベントを発行しませんが、ストリームを使用して MP3 を再構築すると、この問題はなくなりました。

于 2018-02-21T20:55:06.500 に答える
0

モバイル Chrome でオーディオ エンディングを処理しようとしたときに、同様の問題が発生しました。javascript を介して (GWT を介して) オーディオ要素を作成すると、onended イベントが発生しませんでした。しかし、私は仕事をすることができました: 私の問題は、それが DOM に接続されておらず (構造を正しく理解している場合)、javascript limbo に浮かんでいたことでした。要素を display: none に設定してページ要素に追加すると、onended ハンドラが正しく動作します。

tl;dr
要素がDOM要素に直接アタッチされていない場合は、それを非表示にしてアタッチしてみてください（実際にはどこでも）。

于 2014-05-08T18:18:27.947 に答える