title: Firing off an AJAX request on audio play
body: <p>I'm looking for the best way in which to log that an embedded audio file within a page is played. My first instinct is to try and fire off an AJAX request whenever the Play button is pressed.</p>
  
  <p>I'm looking at the <a href="https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events" rel="nofollow noreferrer">Media Events docs</a>, and believe that the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/playing" rel="nofollow noreferrer"><code>playing</code></a> event is the one I'm after. Is this correct? I'm also worried it might fire off AJAX requests every time the play button is pressed and not just the first time (if they pause and unpause, for instance) and this might give skewed logs.</p>
  
  <p>This is the listener example the documents give for media events:</p>
  
  <pre><code>var v = document.getElementsByTagName("video")[0];
  v.addEventListener("seeked", function() { v.play(); }, true);
  v.currentTime = 10.0;
  </code></pre>
  
  <p>But how could I integrate this in to the following code:</p>
  
  <pre><code>&lt;audio id="123" controls&gt;
      &lt;source src="../uploads/filename.mp3" type="audio/mpeg"&gt;
  &lt;/audio&gt;
  </code></pre>
  
  <p>I have attempted the following, but nothing seems to be happening:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('audio').each(function() {
              var id = $(this).attr('id');
              $(this).addEventListener("playing", function() {
                  alert(id);
              });
          });
      });
  &lt;/script&gt;
  </code></pre>