Collin Willson Collin Willson - 1 month ago 5
HTML Question

Play() Causes distortion/echo when playing sound

I am trying to make a chrome extension. Right now I have these codes:

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

The html that will be the button that plays a sound

I am making a button and giving it an id so it can call a Javascript file to play a sound (I have to do this because you can't run JS on the HTML of a chrome extension.)
The button has an ID of 'myboobutton'

function myboo() {
var heyboosong = new Audio();
heyboosong.src = "myboo.mp3";

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

The button calls this popup.js so it can play the audio file.

I have a soundboard extension that plays various songs that are mp3s. When they play in the chrome extension they sound echoey. When the individual audio files play they sound fine. I suspect that it is making multiple calls to the function resulting in the echo. I am trying to figure out how to fix it. (thanks Makyen for helping to clarify) I've tested again and it still makes it.

It seems like all mp3 sounds seem to do this. Not sure if it is specific to chrome extensions or not. But it doesn't seem to happen on faster PCs as much. I am new to coding, I have just learned all of this in the past week. Thanks a bunch!

Here is the unpacked extension


You can disable the button in the click event and create a setTimeout() function to enable the button again after a certain period of time.

For example:

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

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

  // code to play sound goes here

Here's a fiddle: