JavaScript库范围混乱

Question

我有一个带有几个js库的应用程序。 在其中之一中，我在顶部为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不在通话范围内。 这是正确的假设吗？ 我怎样才能解决这个问题？

我尝试将click jquery放到函数外部，并使用jquery .on指令，但得到相同的结果。

谢谢。

Answer 1

我不太确定，但也许您可以尝试以下方法：

myaudio = new Audio(soundfile)
myaudio.addEventListener('canplaythrough', function () {
            $('#audioButton').css('display','block');
            $('#audioButton').click(function() { myaudio.play(); });
},false)