1

我已经完全开发了一个播放广播电台流的音频播放器。他们目前在 StreamOn 上托管他们的音频，当您单击流小部件右下角播放器中的播放按钮时，音频在缓冲后通过插入样式为不可见的 iframe 播放。但是，工作人员抱怨说，如果您在加载时多次单击播放按钮，它将播放多个流（可以在此处看到：Glitched 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>
4

1 回答 1

2

我认为您应该稍微更改一下代码。在您的故障页面上，您有以下内容：

$(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 中是没有变量的好习惯，这里它甚至被 jQuery 使用。
  • 我改变了你的点击事件监听器来包装你的if陈述。你有相反的方式。像这样，当点击播放按钮时，它会检查if语句。您的if声明只是在页面加载时被检查，并且没有函数再次调用它。
  • 在你的elseI just have return false;now 中，这意味着如果playing == 1，不做任何事情（忽略点击）。
于 2013-09-03T15:18:34.497 回答