複数のaudioCtxaddModule()呼び出しは、インスペクターを開いた状態で読み込まれるとChromeをフリーズします

ウィテカー

私はOfflineAudioContextオブジェクトからAudioWorkletプロセッサをロードする作業をしています。私の使用例は、ユーザーのために再生するサウンドに関するビジュアルデータを事前に生成して表示しようとしていることです。

processor.js生成されたオーディオをキャッシュするために書き込むという考えで、OfflineAudioContextを使用しようとしていますが、それを回避する方法があります。

Chromeを使用していますが、FFまたはSafariでAudioContextを使用する方法をまだ見つけていません。

// in Sound object #1
const offlineCtx1 = new OfflineAudioContext(2, 44100, 44100);
offlineCtx1.audioWorklet.addModule("processor.js")
     .then(() => log("first context loaded the processor"));

// ...
// in Sound object #2
const offlineCtx2 = new OfflineAudioContext(2, 44100, 44100);
offlineCtx2.audioWorklet.addModule("processor.js")
    .then(() => log("second context loaded the processor"));

モジュールを2つの異なるコンテキストに追加しようとすると、何かおかしなことが起こります。インスペクターを閉じると、ページは正常に読み込まれるようです。ただし、インスペクターが開いている場合は、ブラウザーのタブがある程度フリーズします。ページを操作したり、タブを閉じたりすることはできませんが、インスペクター内でいくつかの制限された操作を実行できます。

これは、ある種のタイミングの問題のようです。1000ミリ秒待つか、ユーザーの操作によって2番目のaddModule()呼び出しが開始されるのを待つと、正常に機能します。

実際、私が見つけた最善の方法は、それを回避する方法です。呼び出しからプロミスチェーンを構築.addModule()し、最初のチェーンが戻るのを待ってから次のチェーンを起動します。

ただし、実際には、個別のオーディオコンテキストオブジェクトが同時にモジュールを追加するように要求されないようにするために、オブジェクトを介してPromiseを非常にばかげた方法で織り込む必要がありますつまり、このコードインザスモールは問題ないように見えますが、1つのオーディオコンテキストのみがアプリケーションにモジュールを追加していることを確認するのははるかに複雑です。

const offlineCtx1 = new OfflineAudioContext(2, 44100, 44100);
offlineCtx1.audioWorklet.addModule("processor.js")
    .then(() => log("first context loaded the processor") )
    .then(() => {
        const offlineCtx2 = new OfflineAudioContext(2, 44100, 44100);
        return offlineCtx2.audioWorklet.addModule("processor.js")
    })
    .then(() => log("second context loaded the processor") );

明らかに、それが連続して発生することを保証することによって解決されるある種のタイミングの問題。Chrome v 69.0.3497.100(公式ビルド)(64ビット)を使用しています

なぜこれが起こっているのか誰かが知っていますか?または、さらにデバッグするための提案はありますか?Chromeインスペクターは、ホークされた後、役立つ情報をどこにも表示しません。

例:

高い

アップデート(2018年10月18日):この問題は、最新バージョンでは再現できません。(72.0.3584.0)問題エントリの詳細を参照してください

明らかにバグのように見えます。私は、提出されたものを、それはトリアージできるようにcrbug.com経由。この問題はWebAudio、Worker、およびDevToolsに関連しているため、原因の追跡には時間がかかる場合があります。

それまでの間、promiseチェーンをasync / awaitに置き換えることができます。少なくとも、この場合は読みやすさが向上します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ