如何为 HTML 音频元素 bing click/mousedown 事件

Question

在下面共享的 stackblitz 示例中，我为未触发的音频元素包装器绑定了 mousedown 和 click 事件。我需要执行自己的操作，并执行音频元素点击。

找不到此案例的任何解决方案，如有任何想法，我们将不胜感激。

<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')});

样本：https://stackblitz.com/edit/9gw8e5-qujbbj?file=index.html,index.js

关于此的任何建议，以实现此行为。在 MDN 中也找不到关于此的任何建议 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)。

Answer 1

根据w3School，只要audio/video已经启动或不再暂停

，您就可以使用onplay属性来读取

<audio onplay="myFunction()">...</audio>

相反，（我不建议使用此解决方案）如果您想访问鼠标事件，您可以在音频元素上放置一个不可见的 div：

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

Answer 2

尝试了以下在 figure HTML 元素内包装的方法，这是替代解决方案而不是包装单独的元素 在 audio 元素上方。那些想要将音频元素包装在 inline/block 个节点中的人。

```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>

样本：https://stackblitz.com/edit/9gw8e5-dswrh3?file=index.html,index.js

以上示例使音频元素的 mousedown 和 click 动作起作用。

希望对大家有帮助..！

如何为 HTML 音频元素 bing click/mousedown 事件

How to bing click/mousedown events for HTML Audio element

html

javascript

html5-video

html5-audio

typescript