Play() 播放声音时导致 distortion/echo

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 文件来播放声音（我必须这样做，因为你不能运行 JS HTML 的 chrome 分机。）该按钮的 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 歌曲。当他们在 chrome 扩展中播放时，他们听起来很回音。当单独的音频文件播放时，它们听起来不错。我怀疑它正在多次调用导致回显的函数。我想弄清楚如何解决它。（感谢 Makyen 帮助澄清）我已经再次测试，它仍然成功。

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

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

Answer 1

您需要应用debounce/throttle概念。它旨在在函数需要执行之间的延迟时使用（即 ajax 在 typeahead 插件中调用）。

您可以使用简单的 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 2

好的，做一件事；（我正在展示使用 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)
})

Answer 3

您可以在点击事件中禁用按钮，并创建一个setTimeout()函数在一定时间后再次启用按钮。

例如：

var mybooBtn = document.getElementById('myboobutton');

mybooBtn.addEventListener('click', function() {      
  mybooBtn.disabled = true;
  setTimeout(function() { 
    mybooBtn.disabled = false;
  }, 1000);

  // code to play sound goes here
});

这里是 fiddle：https://jsfiddle.net/g9wx30qj/

Play() 播放声音时导致 distortion/echo

Play() Causes distortion/echo when playing sound

html

javascript

google-chrome

google-chrome-extension

google-chrome-app