0
121
VistasReproducción de un sonido cada pocos clics
Ahora tengo un div con un círculo que, al hacer clic, se animará y activará el sonido.
La pregunta es, ¿puedo hacer que el sonido no se reproduzca cada clic, pero digamos cada 10 clics, o aleatoriamente de 1 a 10 clics?
¿Debo hacer esta condición en la función de clic en sí?
var clickEl = document.getElementById("clicks"); let clicks = 0; let listDiv = document.querySelectorAll("div"); A = document.createElement('audio'); A.src = 'http://www.freesound.org/data/previews/265/265296_5003039-lq.mp3'; A.volume=0.3; for (let div of listDiv) { div.addEventListener('click', () => { div.style.animation = 'Animation 200ms linear forwards'; setTimeout(() => { div.style.animation = ''; }, 220); clickEl.innerText = ++clicks; A.currentTime=0.09; A.play(); }); } .circle { width: 80px; height: 80px; border-radius: 80px; border: 3px solid red; margin: 20px; } @keyframes Animation { 0% { transform: scale(1); } 50% { transform: scale(.8); } 100% { transform: scale(1); } } <div class="circle animation"></div> <span>Clicks: <a id="clicks">0</a></span>Ahora estoy agregando un elemento de audio, que luego se reproducirá. Quiero agregar otro y tener uno de ellos seleccionado y reproducido al azar.
Intento hacerlo, pero no funciona nada.
A = document.createElement('audio'); B = document.createElement('audio'); A.src = 'qwe.mp3'; A.volume=0.5; B.src = 'zxc.mp3'; B.volume=0.5; let audi = ["A", "B"]; randomAudi = audi[Math.floor(Math.random() * audi.length)]; randomAudi.play();1 Respuestas
Responde la pregunta0
Implementé esa lógica en este sandbox .
Puedes darle una oportunidad
Aquí está la implementación completa con alguna explicación.
var clickEl = document.getElementById("clicks"); let clicks = 0; let previousPlayClickCount = 0; //keep the previous click count for finding the next play let nextPlay = Math.floor(Math.random() * 10); //set next play from 0 to 9 let listDiv = document.querySelectorAll("div"); A = document.createElement('audio'); A.src = 'http://www.freesound.org/data/previews/265/265296_5003039-lq.mp3'; A.volume = 0.3; for (let div of listDiv) { div.addEventListener('click', () => { clickEl.innerText = ++clicks; //don't trigger sound after certain clicks (with random count `nextPlay`) if (previousPlayClickCount + nextPlay !== clicks - 1) { return } //need to track previous click count and randomize next play again previousPlayClickCount = clicks; nextPlay = Math.floor(Math.random() * 10); div.style.animation = 'Animation 200ms linear forwards'; setTimeout(() => { div.style.animation = ''; }, 220); A.currentTime = 0.09; A.play(); }); } .circle { width: 80px; height: 80px; border-radius: 80px; border: 3px solid red; margin: 20px; } @keyframes Animation { 0% { transform: scale(1); } 50% { transform: scale(.8); } 100% { transform: scale(1); } } <div class="circle animation"></div> <span>Clicks: <a id="clicks">0</a></span>Los valores depurados en esta captura de pantalla
si clicks = nextPlay + previousPlayClickCount , se activará el sonido. Después de eso, nextPlay y previousPlayClickCount se restablecerán