javascript - アセットが読み込まれるまで待ちます

Question

ここにアプリケーションがありますhttps://maliyshock.github.io/simon-says/ このアプリでは、このライブラリを使用していますhttps://tonejs.github.io すべてのサウンドが正常にダウンロードされたことを確認する必要があります. アプリケーションを実行する前に。

私の考えでは、将来のアップデートでは、ギターのヒーローになりますが、ダブステップが含まれています. :DI は、さまざまな音、リズム、長さの音楽フレーズを作成します。これの主な特徴はリプレイ性です。各曲はフレーズのバンクから生成されるためです。

redux/react スタックでは、アクションをディスパッチしてアプリケーションの状態を更新し、リデューサーに何をすべきかを伝える必要があります。

問題は、ゲームを開始する前にすべてのサウンドをダウンロードする必要があることです。そして、私が見る唯一の方法は、レデューサーの中に入れることです。しかし、それは私には間違っているようです。

const initialWordsState = {
    dictionary: [
        {
            ALFA: {
                color: {
                    name: 'blue',
                    value: BLUE
                },
                sound: new Tone.Player({ "url": alfa_sound, 'onload': ()=>{} }).toMaster(),
                active: false
            }
        },
        {
            OMEGA: {
                color: {
                    name: 'orange',
                    value: ORANGE
                },
                sound: new Tone.Player({ "url": omega_sound, 'onload': ()=>{} }).toMaster(),
                active: false
            },
        },
        {
            BETHA: {
                color: {
                    name: 'red',
                    value: RED
                },
                sound: new Tone.Player({ "url": betha_sound, 'onload': ()=>{} }).toMaster(),
                active: false
            },
        },
        {
            THETHA: {
                color: {
                    name: 'green',
                    value: GREEN
                },
                sound: new Tone.Player({ "url": thetha_sound, 'onload': ()=>{} }).toMaster(),
                active: false
            }
        }
    ]
};

ご覧のとおり、各ボタンには音があります。将来的には、各ボタンには、フレーズと音の長さに関する複数の音があります。

その方法がわかりません。私の頭に浮かぶ唯一のことは、onloadからのコールバックを使用Tone.playerしてストアを更新し、すべてのサウンドがダウンロードされている間にティックでチェックすることです。それらのすべてがダウンロードされている場合 - 適切な画面を表示します。しかし、そのようにするのは間違っているように私には思えます。