<audio> 元素上的 onclick 事件

Question

给定以下标记：

<audio controls onclick="alert('hi')">
    <source src="/url/track.mp3" type="audio/mpeg">  
</audio>

我没有收到 onclick 事件的响应。似乎所有的 onclick 事件都绑定到播放器控件。

我的目标是在用户点击 "play" 时运行一个单独的函数。

Answer 1

onplay 属性就是您要查找的内容。

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

这里有一些article on w3schools关于它的

Answer 2

您可以在音频元素上放置一个不可见的 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>

然后，在 catchClick 函数中，您可以通过此方法将鼠标点击传递给音频元素 How to simulate a mouse click using javascript

<audio> 元素上的 onclick 事件

onclick event on <audio> element

javascript

audio

jquery

element

onclick