In the below shared stackblitz example, i have bound mousedown and click event for the audio element wrapper which is not triggered. I need to perform my own action, with audio element click being performed.
Couldn't find any solutions for this case, any thoughts over this is appreciated.
<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')});
Sample: https://stackblitz.com/edit/9gw8e5-qujbbj?file=index.html,index.js
Any suggestions on this, to achieve this behavior. Couldn't find any suggestions regarding this in the MDN too (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio).
According to w3School, you can use the onplay attribute to read whenever the audio/video has been started or is no longer paused
<audio onplay="myFunction()">...</audio>
Instead, (I do not suggest to use this solution) if you would like to acces the mouse events, you can place an invisible div over the audio element:
<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>Tried the below way of wrapping inside the figure HTML element, which is an alternate solution instead of wrapping a separate element above the audio element. Those who want to wrap the audio elements within a inline/block nodes.
```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>
Sample: https://stackblitz.com/edit/9gw8e5-dswrh3?file=index.html,index.js
Above sample makes the mousedown and click action work for the audio element.
Hope it helps someone..!