How to bing click/mousedown events for HTML Audio element

user_19195047 0
Viewed 56

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).

typescript html5-audio html5-video html javascript
2 Answers

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>

user_138655580

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..!

user_83198360
Related