En el siguiente ejemplo de stackblitz compartido, he vinculado el evento mousedown y click para el envoltorio del elemento de audio que no se activa. Necesito realizar mi propia acción, con el clic del elemento de audio que se está realizando.
No se pudo encontrar ninguna solución para este caso, se agradece cualquier comentario al respecto.
<span id="test"> <audio controls> <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> </audio> <br> </span> <script> document.querySelector('#test').addEventListener('click', function() { console.log ('click called')}); document.querySelector('#test').addEventListener('mousedown', function() { console.log ('mousedown called')});Muestra: https://stackblitz.com/edit/9gw8e5-qujbbj?file=index.html,index.js
Cualquier sugerencia sobre esto, para lograr este comportamiento. No pude encontrar ninguna sugerencia con respecto a esto en el MDN también (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio ).
De acuerdo con w3School , puede usar el atributo onplay para leer cada vez que el audio/video se haya iniciado o ya no esté en pausa.
<audio onplay="myFunction()">...</audio>En cambio, (no sugiero usar esta solución) si desea acceder a los eventos del mouse, puede colocar un div invisible sobre el elemento de audio:
<script> function catchClick(){ alert("hi"); } </script> <div onclick="catchClick()" style="position:absolute;z-index:1;width:300px;height:30px;"> </div> <audio controls> <source src="/url/track.mp3" type="audio/mpeg"> </audio>Intenté la siguiente forma de envolver dentro del elemento HTML de la figura , que es una solución alternativa en lugar de envolver un elemento separado sobre el elemento de audio . Aquellos que quieran envolver los elementos de audio dentro de nodos en línea/bloque.
```css figure { display: block; outline: none; position: relative; margin: 0; padding: 0; } figure:after { position: absolute; content: ""; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; cursor: default; display: block; background: transparent; } ```html <span id="test"> <audio controls> <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </span>Muestra: https://stackblitz.com/edit/9gw8e5-dswrh3?file=index.html,index.js
El ejemplo anterior hace que la acción de presionar el mouse y hacer clic funcione para el elemento de audio.
Espero que ayude a alguien ..!