アクティブでないタブの新しく作成されたオーディオ要素は動作しません

Question

私はウェブベースのオーディオプレーヤーを持っており、現在再生中に次のトラックをプリロードしたいと考えています。 私は新しいオーディオオブジェクトprefetch = new Audio(url)を作成します。スイッチするときは、現在のオーディオをプリロードされたオーディオと交換して、.play()をトリガーするだけです。

しかし、タブがアクティブでない場合は、必ずしも機能しません。ときどきスワップする時に、networkState == 3 (NETWORK_NO_SOURCE)とreadyState = 0 (HAVE_NOTHING)のプリフェッチされたオブジェクトが見つかりました。

タブに戻ると、すぐに再生が開始されます。

私はそれを非同期リソース選択アルゴリズムとブラウザのオプティマイズによって引き起こしましたが、動作させる方法は不明です。

（主にSafariで再現可能）

Answer 1

ブラウザの最適化が原因です。ブラウザは、非アクティブなタブに割り当てられたリソースを減らすため、JSが低速で動作しているか、まったく動作しない可能性があります。タブが非アクティブになったときには制限がありません

あなたはWebWorker（docs）を使用して試すことができます。

Check this answer too