---
layout: default
---
<div id="player">
  <div id="controls">
    <button id="mu_pause">Play</button>
    <h1>{% if page.previous_in_category != nil %}
      <a href="{{ site.baseurl }}{{ page.previous_in_category.url }}" title="Previous Track"><img
          src="{{ site.baseurl }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a>
      {% endif %}
      <a id="download" title="Download This Track!" href="{{ site.audio_url }}{{ page.mp3 }}"><img
          src="{{ site.baseurl }}/assets/img/icons/dl.png" title="Download Track" /></a>
      {% if page.next_in_category != nil %}
      <a href="{{ site.baseurl }}{{ page.next_in_category.url }}" title="Next Track"><img
          src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
    </h1>
    <a href="{{ site.baseurl }}/music/">Back to Index</a>
  </div>

  <div id="info">
    <h1 class="title">{{ page.title }}</h1>
    {{ page.content }}
  </div>


  <div id="tracktime"></div>
  <!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
</div>
<audio preload="true"
  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
  <source src="{{ site.audio_url }}{{ page.mp3 }}" type="audio/mpeg" />
  <source src="{{ site.audio_url }}{{ page.ogg }}" type="audio/ogg" />
  <h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
</audio>
<script type="text/javascript">
  function loadUrl(newLocation) {
    window.location = newLocation;
    return false;
  }
  var mu = document.getElementsByTagName("audio")[0];
  var pauseButton = document.getElementById("mu_pause");
  function muFade() {
    mu.classList.add("stopfade");
  }
  mu.addEventListener('ended', function () {
    // only functional if "loop" is removed
    mu.pause();
    mu.currentTime = 0;
    {% if page.next_in_category != nil %}
    loadUrl('{{ site.baseurl }}{{ page.next_in_category.url }}'); return false;
    {% endif %}
    // qq IE10
    muFade();
  });
  pauseButton.addEventListener("click", function () {
    mu.classList.toggle("stopfade");
    if (mu.paused) {
      mu.play();
      pauseButton.innerHTML = "Pause";
    } else {
      mu.pause();
      pauseButton.innerHTML = "Resume";
    }
  });
</script>
<style type="text/css">
  html,
  body {
    background:url('{{ site.audio_url }}{{ page.image }}') #0ff no-repeat center fixed;
    background-size: contain;
  }
</style>