javascript - Javascript ライブラリ スコープの混乱

Question

複数の js ライブラリを含むアプリケーションがあります。そのうちの 1 つで、上部に html5 オーディオの変数を定義します。次に、いくつかのhtmlをロードしてdivに配置する関数が呼び出されます。その HTML には、オーディオを再生するためにクリックしたいボタンが含まれています。次に、グローバルに定義された 'myaudio' 変数を使用してオーディオを読み込みます。構造は次のようになります。

var myaudio = null;

function loadPage() {

    $.ajax({url:'myurl',
       success: function(myhtml) {
           $('#mydiv').html(myhtml);

           ... and then later....


            if (!editor && audiofile.length) { 
                var soundfile = "/media/audio/"+thisuid+"/sceneaudio/"+audiofile;
                myaudio = new Audio(soundfile).load();
                $('#audioButton').css('display','block');
                $('#audioButton').click(function() { myaudio.play(); });
            }
       }
   });
}

ボタンをクリックしたとき以外はすべて機能し、「myaudio undefined」エラーが発生します。これはスコープの問題によるものだと思います。クリックして効果的にコールバックした時点で、myaudio はコールの範囲外です。これは正しい仮定ですか？どうすればこれを修正できますか?

クリック jquery を関数の外に置き、jquery .on ディレクティブを使用しようとしましたが、同じ結果が得られました。

ありがとう。