Tengo una función ejecutándose cada segundo ( para el reloj ).
Quería agregar sonido a cada tic tic... (segundo) pero como la función se ejecuta automáticamente (significa que no se está activando) y cuando se agrega sonido se produce un error
El error que muestra es:
DOMException no detectada: play() falló porque el usuario no interactuó primero con el documento.
Sepa que no es posible reproducir audio automáticamente.
Así que traté de crear un btn de sonido de start que reproduzca el audio pero como segunda vez (del reloj) y no coincida con el audio. Entonces hay un desajuste
Estoy tratando de agregar esa función (reproducción de audio) dentro de la calculadora de segundos (hora del reloj).
Es esto posible o no
Enlace a una pregunta similar pero no puede encontrar la solución
El código es el siguiente
setInterval(clockRunner, 1000); function clockRunner() { //Clock code goes here function trigger() { var audioElement = document.getElementById('audiotag1'); audioElement.play(); } } <audio id="audiotag1" src="https://soundbible.com/mp3/Tick-DeepFrozenApps-397275646.mp3" preload="metadata" controls></audio> <button onclick="trigger()">Start</button> Se agregó un detector de eventos dentro de la function externa, pero de esta manera el sonido se reproduce una vez, no cada segundo.
Una solución aquí puede ser agregar otro setInterval pero esto nuevamente creará el problema de reproducir el sonido en diferentes tiempos del segundo del reloj.
También muestra el mismo error en la consola (mencionado anteriormente) hasta que el usuario hace clic en el btn
setInterval(clockRunner, 1000); function clockRunner() { //Clock code goes here document.getElementById('demo').innerHTML = new Date(); setInterval(trigger, 1000); document.getElementById("triggerSnd").addEventListener('click', trigger) function trigger() { var audioElement = document.getElementById('audiotag1'); audioElement.play(); } } <audio id="audiotag1" src="https://soundbible.com/mp3/Tick-DeepFrozenApps-397275646.mp3" preload="metadata" controls></audio> <button id="triggerSnd">Start</button> <div id="demo"></div>Gracias por la ayuda de antemano
Si utiliza algunas variables, puede controlar su código para que funcione como un reloj. Vale la pena señalar que hay dos posibilidades, o el reloj se ha puesto en marcha o se ha detenido.
El intervalo se ejecutará cuando haga clic para iniciar y se borrará al detenerlo. Aquí no puedo notar ningún desajuste entre el sonido y el temporizador.
var start = document.getElementById("triggerSnd") var audioElement = document.getElementById('audiotag1') var demo = document.getElementById('demo') var interval, isMuted = true // The second argument of addEventListener should be a function // that receives an argument 'event' clockRunner(); clock(); // call firstly setInterval(() => clock(), 1000) start.addEventListener('click', clockRunner) function clock(isMuted){ //Clock code goes here demo.innerText = new Date(); audioElement.play(); } function clockRunner() { audioElement.muted = isMuted start.innerText = isMuted ? "Start" : "Stop" isMuted = !isMuted } <audio id="audiotag1" src="https://soundbible.com/mp3/Tick-DeepFrozenApps-397275646.mp3" preload="metadata"></audio> <button id="triggerSnd">Start</button> <div id="demo"></div>He cambiado mi respuesta por completo. Ahora no necesitaba usar un detector de eventos, solo la API adecuada de HTMLMediaElement que usa el audio. Tenga en cuenta que he agregado un atributo de loop al audio de tick.
var blast = document.getElementById("blast"); var tick = document.getElementById("tick"); var tickDuration, timeDiff, lastTime tick.onloadedmetadata = () => tickDuration = tick.duration timeDiff = 0.3 // max difference between sync, dont lower it or it will bug (can explain if u want) lastTime = 0 blast.addEventListener("timeupdate", () => { let bct = blast.currentTime let tct = tick.currentTime let syncBlastTime = tickDuration - (tickDuration - bct%tickDuration) let diff = Math.abs(syncBlastTime - tct) lastTime = bct console.log(`Blast: ${bct} Tick: ${tct}\nSynced time difference (seconds): ${diff.toFixed(6)}`) if(diff > timeDiff) { // add this or it will bug the tick audio tick.currentTime = syncBlastTime } }) blast.addEventListener("pause", () => { tick.pause() }) blast.addEventListener("playing", () => { tick.play() }) <audio id="blast" src="http://stream.arrowcaz.nl/caz64kmp3" controls="loop"></audio> <audio id="tick" src="https://soundbible.com/mp3/A-Z_Vocalized-Mike_Koenig-197996831.mp3" loop controls='loop'></audio> <br />