Results 1 to 2 of 2

Thread: Execute function when play button is clicked in html5 audio player

  1. #1
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Execute function when play button is clicked in html5 audio player

    Is it possible to detect when the play button in the html5 audio player is clicked? For example:

    Code:
    <audio controls>
        <source src="music.mp3"/>
        <source src="music.ogg" />
    </audio>
    ....
    ....
    $('playbutton').on('click', function(e){
        //some functions
    });

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,027
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    You can use jQuery to get the element, but there's no direct interface with the play button in jQuery. You could use something like:

    http://www.jplayer.org/

    With its API you could detect play.

    However, since (in browsers that support HTML 5 audio) the play event is the one almost universally supported event in ordinary javascript, rather than get into a complex API, you can just do:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Detect Audio Play - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    <audio controls id="myaudio">
       <source src="music.ogg" type="audio/ogg">
       <source src="music.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
     </audio>
    <script type="text/javascript">
    if (window.addEventListener){
    	(function(){
    		function playfunc(){alert('Play Was Pressed');}
    		document.getElementById('myaudio').addEventListener('play', playfunc, false);
    	})();
    }
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. HTML5 background audio player
    By oldmanInAz in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-07-2012, 08:28 PM
  2. HTML5 background audio player not working in Firefox
    By xotj123 in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 06-07-2012, 06:32 AM
  3. Creating multiple instances of the HTML5 background audio player
    By solaningo in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-17-2012, 12:15 AM
  4. HTML5/JS plays only audio...
    By purmar in forum JavaScript
    Replies: 2
    Last Post: 11-24-2011, 03:41 AM
  5. Replies: 0
    Last Post: 10-31-2011, 12:45 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •