{% extends 'layout.html' %}
{% block javascript %}
<script>
window.onload = function() {
  var player = document.getElementById('player');
  player.play();
  console.log('playing');
  player.volume = 0.3;

  if(player.error) {
    console.log('error');
  }
  player.addEventListener('error', function(e) {
    console.log("error event");
  })
  player.addEventListener('ended', function(e) {
    console.log('playback ended');
    window.location = '/next/';
  });
}
</script>
{% endblock %}
{% block main_content %}
<h1>Play it</h1>
<audio id="player" controls>
 <source src="/music/{{filename}}/" type="audio/mp3" autoplay="true">
 Your browser does not support audio
</audio>
<form method="POST" action="/next/">
  <input type="submit" value="next"></input>
</form>
{% endblock %}

{% extends 'layout.html' %}
{% block javascript %}
<script>
window.onload = function() {
  var player = document.getElementById('player');
  player.play();
  console.log('playing');
  player.volume = 0.3;

  document.addEventListener('keyup', function(e) {
    if(e.keyCode == 38) {
      player.volume += 0.1;
      console.log("Volume up", player.volume);
    } else if(e.keyCode == 40) {
      player.volume -= 0.1;
      console.log("Volume down", player.volume);
    } else if(e.keyCode == 32) {
      if(player.paused) {
        player.play()
      } else {
        player.pause();
      }
    }
    console.log("Got key", e.ctrlKey, e.keyCode);
  }, false);

  if(player.error) {
    console.log('error');
  }
  player.addEventListener('abort', function(e) {
    console.log("Abort");
  });
  player.addEventListener('error', function(e) {
    console.log("error event");
  });
  player.addEventListener('ended', function(e) {
    console.log('playback ended');
    window.location = '/next/';
  });
}
</script>
{% endblock %}
{% block main_content %}
<h1>{{filename}}</h1>
<audio id="player" controls>
 <source src="/music/{{filename}}/" type="audio/mp3" autoplay="true">
 Your browser does not support audio
</audio>
<form method="POST" action="/next/">
  <input type="submit" value="next"></input>
</form>
{% endblock %}

Add simple controls for keyboards to play, pause, change volume
Add simple controls for keyboards to play, pause, change volume

And try yet another way to tell if we can't play the file for some
reason.

Oh, and show the file name
