title: jQuery function audioElement ended doesn't work
body: <p>I've got some code which creates an &lt; audio > element and plays a song, when I click on a button. So far so good. The button turns from "Play Music" into "Stop Music" as it's clicked.</p>
  
  <p>Now I added this code:</p>
  
  <pre><code>audioElement.addEventListener('ended', function() {
      $('span#pause').fadeOut('slow');
      $('span#play').delay(1500).fadeIn('slow');
  });
  </code></pre>
  
  <p>Which technically should show the Play-Button again, when the song is over. But it doesn't. Could anybody tell my why?</p>
  
  <p>Here's the whole code:</p>
  
  <pre><code>$(document).ready(function() {
  
  var songList = [
      'song1.ogg',
      'song2.ogg',
      'song3.ogg'
  ];
  var randomNumber = Math.floor(Math.random()*songList.length);
  
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', songList[randomNumber]);
  audioElement.load();
  
  audioElement.addEventListener('ended', function() {
      $('span#pause').fadeOut('slow');
      $('span#play').delay(1500).fadeIn('slow');
  });
  
  $('#play').click(function() {
      audioElement.play();
      $('span#play').fadeOut('slow');
      $('span#pause').delay(1500).fadeIn('slow');
  });
  
  $('#pause').click(function() {
      audioElement.pause();
      $('span#pause').fadeOut('slow');
      $('span#play').delay(1500).fadeIn('slow');
  });
  });
  </code></pre>