A partir de esta respuesta , para comenzar a reproducir un audio en un momento determinado, podemos usar #t=begintime,endtime después del enlace.
Esto funciona para mí, pero solo la primera vez. La segunda vez, el audio se reproduce pero no en el tiempo especificado.
Como esto:
function drainwater(){ document.getElementById("drain").play(); } <audio src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Kitchen_sink_draining_water.ogg#t=5,6" id="drain"></audio> <button onclick='drainwater()'> Drain </button>La segunda vez, el audio se reproduce más de lo que esperaba. ¿Cuál es el problema? ¿Cómo puedo superar esto?
Como esto:
function drainwater(){ document.getElementById("drain").play(); } function pause(){ document.getElementById("drain").pause(); } <audio src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Kitchen_sink_draining_water.ogg" id="drain"></audio> <button onclick='drainwater();setTimeout(pause, 2000)'> Drain </button>(Un consejo para aquellos que puedan estar usando esta solución: no olviden quitar el #t=5,6 del enlace o esto no funcionará).
Esto puede ser suficiente para audios homogéneos como el de 2 minutos de audio de lluvia, no hay diferencia entre los primeros 10 segundos y los segundos 10, por lo que podemos usar este método para reproducirlo durante un período de tiempo específico.
Pero para audios generales, esto no funciona. La segunda vez que se hace clic en el botón, el audio no comienza desde la posición especificada.
Entonces, ¿por qué sucede esto? ¿Qué podemos hacer para reproducir el audio en el momento específico una y otra vez al hacer clic en el botón?
Parece que al menos Chrome y Firefox necesitan que la URL se configure nuevamente para hacer lo que deseas. Si cambia su función drainwater() de esta manera, debería funcionar.
function drainwater(){ const $drain = document.getElementById("drain"); $drain.onpause = () => $drain.src = $drain.src; $drain.play(); }Sin embargo, no estoy seguro de si esto es un error o el comportamiento previsto.