jQuery function audioElement ended doesn't work
<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>
