javascript - jQuery 中的音频故障

Question

我已经完全开发了一个播放电台流的音频播放器。他们目前在 StreamOn 上托管他们的音频，当您单击流式小部件右下方播放器中的播放按钮时，音频在缓冲后通过插入样式为不可见的 iframe 来播放。但是，工作人员提示说，如果您在加载时多次单击播放按钮，它将播放多个流(如下所示:Glitched Page)。因此，在我的测试页面上，我尝试使用以下代码来防止此类情况的发生。但是，现在甚至没有按请求加载音频(如此处所示:Test Page)。将不胜感激。

<script>
                $playing = 0;

                $(document).on("click", "button#mute", function(){
                    $('iframe#audioStreamOn').remove();
                    $playing = 0;
                });

                if ($playing =0) {
                    $(document).on("click", "button#play", function(){
                        $(this).after('<iframe id="audioStreamOn" class="hidden" src="http://wpov.streamon.fm"></iframe>');
                        $playing = 1;
                    });
                }

                else {
                    $(document).on("click", "button#play", function(){
                    });
                }
        </script>

Answer 1

我认为您应该稍微更改一下代码。在你的故障页面上你有这个:

$(document).on("click", "button#mute", function () {
    $('iframe#audioStreamOn').remove();
});
$(document).on("click", "button#play", function () {
    $(this).after('<iframe id="audioStreamOn" class="hidden" src="http://wpov.streamon.fm"></iframe>');
});

改用这个:

var playing = 0;
$(document).on("click", "button#mute", function () {
    $('iframe#audioStreamOn').remove();
    playing = 0;
});
$(document).on("click", "button#play", function () {
    if (playing == 0) {
        $(this).after('<iframe id="audioStreamOn" class="hidden" src="http://wpov.streamon.fm"></iframe>');
        playing = 1;
    } else {
        return false;
    }
});

我改变了什么:

• 您有 if ($playing =0) { 这不会检查它将分配给它的值，您需要 == 来比较它们。我还删除了 $，javascript 中的 $ 是没有 in 变量的好习惯，这里它甚至被 jQuery 使用。
• 我更改了您的点击事件监听器以包装您的 if 语句。你有相反的方法。像这样，当点击播放按钮时，它会检查 if 语句。您的 if 语句只是在页面加载时被检查，没有函数再次调用它。
• 在你的else中，我现在只有return false;，这意味着如果playing == 1，什么都不做(忽略点击)。