javascript - onclick event on <audio> element - Stack Overflow

admin管理员组

文章数量:1291337

Given the following markup:

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

I get no response from the onclick event. Seems like all the onclick events are bound to the player controls.

My goal is to run a separate function when the user hits "play".

Given the following markup:

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

I get no response from the onclick event. Seems like all the onclick events are bound to the player controls.

My goal is to run a separate function when the user hits "play".

• javascript
• jquery
• audio
• onclick
• element

Share Improve this question Follow asked Dec 13, 2015 at 23:40 raisa chudinovaraisa chudinova 3311 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

The onplay attribute is what you're looking for.

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

Here's some article on w3schools about it

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>

Then, in the catchClick function you can pass the mouse clicks to the audio element via this method How to simulate a mouse click using javascript

本文标签： javascriptonclick event on ltaudiogt elementStack Overflow