onclick event on <audio> element

Question

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

Alexander Mikhalchenko · Accepted Answer · 2015-12-13 23:54:18Z

9

The onplay attribute is what you're looking for.

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

Here's some article on w3schools about it

answered Dec 13, 2015 at 23:54

Alexander Mikhalchenko

4,5854 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

empire29 Over a year ago

How can you tell if a human clicked Play or if Javascript triggered the playback via audio.play()

Community · Accepted Answer · 2017-05-23 12:01:46Z

0

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

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Dec 14, 2015 at 0:09

cantelope

1,1657 silver badges9 bronze badges

Collectives™ on Stack Overflow

onclick event on <audio> element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related