Tengo el problema de que quiero tener un botón que reproduzca un sonido aleatorio después de presionarlo, pero lo otro es que quiero enviar spam al botón y también el sonido. Lo que quiero decir es que no quiero esperar a que termine el sonido para reproducirlo de nuevo y tener 5 sonidos o más, dependiendo de la velocidad de tu clic.
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>Eso suena divertido y hay muchas maneras de hacerlo. Creo que la forma más fácil sería precargar las canciones con anticipación y aleatorizarlas.
// 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>¡Algo como esto!
Están sucediendo algunas cosas extrañas con este código, así que reconsiderémoslo desde el principio. En primer lugar, desea crear un controlador onclick en su botón que reproduzca su archivo mp3. Hagamos eso primero:
let audio = new Audio("MyAudio.mp3"); document.querySelector("button").addEventListener("click", () => { audio.play() });Ahora, parece que desea que se reproduzca desde el principio cada vez que se hace clic, y no esperar hasta que se complete (que es el comportamiento predeterminado). Por lo tanto, debemos restablecer la reproducción cada vez que haga clic.
let audio = new Audio("MyAudio.mp3"); document.querySelector("button").addEventListener("click", () => { audio.currentTime = 0; audio.play(); });🎉 🎶
Y su HTML puede verse así:
<button>Play</button>