Play()在播放声音时引起失真/回声

Play() Causes distortion/echo when playing sound

本文关键字：失真 回声 播放声音 Play      更新时间：2023-09-26

我想做一个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);

按钮调用这个弹出。js，所以它可以播放音频文件。

我有一个音板扩展，播放各种歌曲的mp3。当他们在chrome扩展中播放时，他们会发出回声。当单个音频文件播放时，它们听起来很好。我怀疑它正在多次调用导致回显的函数。我正在想办法解决这个问题。(感谢Makyen帮助澄清)我又测试了一次，它仍然可以。

似乎所有的mp3声音似乎都这样做。不确定它是否特定于chrome扩展或不。但在速度更快的个人电脑上，这种情况似乎并不多见。我是一个编程新手，我在过去的一周里刚刚学会了所有这些。非常感谢!

这是未打包的扩展https://drive.google.com/drive/folders/0B3AU3p8wyWK3YXo1YUlGWGg5RGs?usp=sharing

您可以在单击事件中禁用按钮，并创建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
});

这里有一个小提琴:https://jsfiddle.net/g9wx30qj/

您需要应用debounce/throttle的概念。这意味着当一个函数在执行之间需要延迟时使用(例如，在typeahead插件中的ajax调用)。

你可以使用一个简单的节流实现:

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

好，做一件事;(我正在展示使用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)
})
相关文章：