jQuery中的音频故障

Audio Glitch in jQuery

本文关键字：故障 音频 jQuery      更新时间：2023-09-26

我已经完全开发了一个播放电台流的音频播放器。他们目前在StreamOn上托管音频，当你点击流媒体小部件右下角播放器中的播放按钮时，音频在缓冲后，通过插入一个样式为不可见的iframe来播放。然而，工作人员抱怨说，如果你在加载时多次点击播放按钮，它将播放多个流（如图所示：Glitted 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>

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

$(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，什么都不要做（忽略点击）
相关文章：