Question

我正在尝试制作Chrome扩展程序。现在我有这些代码：

 <button style="text-align:center; margin-bottom: 5px;" id="myboobutton">DogMeme.avi</button>
<script type="text/javascript" src="popup.js"></script>

html将是播放声音的按钮

我正在创建一个按钮并给它一个id，这样它就可以调用Javascript文件来播放声音（我必须这样做，因为你不能在chrome扩展的HTML上运行JS。）该按钮的ID为“myboobutton”

function myboo() {
var heyboosong = new Audio();
heyboosong.src = "myboo.mp3";
heyboosong.volume=0.5
heyboosong.play();
}

document.getElementById('myboobutton').addEventListener('click', myboo);

该按钮调用此popup.js，以便它可以播放音频文件。

我有一个音板扩展，播放各种mp3歌曲。当他们玩镀铬扩展时，他们发出响亮的声音。当各个音频文件播放时，它们听起来很好。我怀疑它正在对函数进行多次调用，从而产生回声。我想弄清楚如何解决它。（感谢Makyen帮助澄清）我再次测试了它仍然成功。

似乎所有mp3声音似乎都是这样做的。不确定它是否特定于chrome扩展。但它似乎并没有在更快的PC上发生。我是编码的新手，我刚刚在过去的一周里学到了所有这些。非常感谢！

这是解压缩的扩展程序 https://drive.google.com/drive/folders/0B3AU3p8wyWK3YXo1YUlGWGg5RGs?usp=sharing

Answer 1

您可以在click事件中禁用该按钮并创建一个setTimeout（）函数，以便在一段时间后再次启用该按钮。

例如：

@EntityGraph("FmReportGraph")

这是一个小提琴：https://jsfiddle.net/g9wx30qj/

Answer 2

您需要应用去抖/油门概念。当函数需要执行之间的延迟时（即在typeahead插件中调用ajax），它可以使用。

您可以使用简单的Throttle实现：

var Throttle = function(fn, time) {
    var flag = true, toId;
    return function() { 
        if (flag) {
            var args = arguments;
            fn.apply(this, args);
            flag = false;
            clearTimeout(toId);
            toId = setTimeout(function() {
                flag = true;
            }, time);
        }        
    }  
};

然后，在你的代码中：

document.getElementById('myboobutton').addEventListener('click', Throttle(myboo,1000)); //1000ms is 1second

Answer 3

好的，做一件事;（我正在使用jQuery展示解决方案）

$("#myboobutton").click(function(){

     $("#myboobutton").css("pointer-events","none");    //click 'll be disabled by this

    //write code for playing sound;

    setTimeout(function(){

        $("#myboobutton").css("pointer-events","");     //button 'll be clickable again after 1 sec
     },1000)
})

播放（）播放声音时会导致失真/回声

3 个答案: