Play random sound on button that is spammable-CodePudding

I have a problem that i want to have a button, that plays random sound after I press it, but the other thing is that i want to spam the button and so does the sound. What I mean is that i dont want to wait for the sound to finish to play it again and like have 5 sounds or more playing depending on your click speed.

for(var i=0;i<1;i  )
{
  document.getElementById("MyAudio.mp3")[i].addEventListener("click",function(){});
}

function playAudio()
{
    var audio = new Audio("MyAudio.mp3");
    audio.play();
}

<button onlick="playAudio()"></button>

CodePudding user response：

That sounds fun and there's many ways to do it. I think the easiest way would be to pre-load the songs ahead of time and randomize it.

// Your sounds
let sounds = [new Audio('https://download.samplelib.com/mp3/sample-3s.mp3'), new Audio('https://download.samplelib.com/mp3/sample-6s.mp3'), new Audio('https://www.soundjay.com/human/fart-01.mp3')];
let lastSound = 0; // Not necessary but we don't want overlapping tracks.
// Listen for click on button (ID soundmachine)
// pointerdown is more suitable so adjusted it.
document.querySelector("#soundmachine1").addEventListener("pointerdown", () => {
// This is a small fix to allow the sound to be spammable and clear last track.
  sounds[lastSound].pause();
  sounds[lastSound].currentTime = 0;
  let random = Math.floor(Math.random() * sounds.length);
  sounds[random].play();
  lastSound = random; // For the next click we want to cancel this sound if it's playing.
  console.log(lastSound); // Just so you can see it count/play
});
document.querySelector("#soundmachine2").addEventListener("pointerdown", () => {
  // Play till completed
  let random = Math.floor(Math.random() * sounds.length);
  sounds[random].play();
});

<button id="soundmachine1">click me ver1</div>
<button id="soundmachine2">click me ver2</div>

Something like this!

CodePudding user response：

There's some odd things going on with this code, so let's rethink it from the beginning. First of all, you want to create an onclick handler on your button that plays your mp3 file. Let's do that first:

let audio = new Audio("MyAudio.mp3");
document.querySelector("button").addEventListener("click", () => {
  audio.play()
});

Now, it sounds like you want it to play from the beginning every time when clicked, and not wait till it completes (which is the default behavior). So we need to reset the playback every time you click.

let audio = new Audio("MyAudio.mp3");
document.querySelector("button").addEventListener("click", () => {
  audio.currentTime = 0;
  audio.play();
});