jQuery 中的音频故障答案

【问题标题】：Audio Glitch in jQueryjQuery 中的音频故障
【发布时间】：2013-09-03 14:45:49
【问题描述】：

我已经完全开发了一个播放广播电台流的音频播放器。他们目前在 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>

【问题讨论】：

标签： javascript jquery audio

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

【讨论】：