|<- [[vpfjsphp:Creating a spinner graphic for large image loads]]|[[vpfjsphp:Monitoring media-ended events]] ->|

<code>
<ul class="player">
  <li data-src="audio/audio_1.mp3">audio 1</li>
  <li data-src="audio/audio_2.mp3">audio 2</li>
  <li data-src="audio/audio_3.mp3">audio 3</li>
</ul>

var jukebox = document.querySelector('ul.player');
jukebox.addEventListener('click', function(e) {
  var audio_player = document.createElement('audio');
  var piste = e.target.getAttribute('data-src');
  
  e.target.id = "playing";

  audio_player.id = "player";
  audio_player.src = piste;
  document.body.attachChild(audio_player);
  audio_player.play();
}, false);
</code>