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

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

$(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使用。
我更改了您的click事件侦听器以包装您的if语句。你有另一种方式。像这样，当点击播放按钮时，它将检查if语句。您的if语句刚刚在页面加载时被检查，并且没有函数再次调用它。
在你的else我现在只有return false;，这意味着如果playing == 1，则不做任何事情（忽略点击）。

jQuery中的音频故障

1 个答案: