sakrecoer-mother-web/_layouts/music.html

---
layout: default
---
<div id="player">
  <div id="info" style="background-image:url('{{ site.audio_url }}{{ page.image }}');">
    <div id="controls">
      <div class="container">
        <button id="mu_pause">Play</button><br />
        {% if page.previous != nil %}
        <a href="{{ site.baseurl }}{{ page.previous.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 != nil %}
        <a href="{{ site.baseurl }}{{ page.next.url }}" title="Next Track"><img
            src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
        
      </div>


    </div>

  </div>
  <div class="trackcontainer">

      <h1>{{ page.title }}</h1>
      <h2 id="tracktime">&nbsp;</h2>
        
    </div>

  <div id="timer">

    {{ page.content }}
    <img src="{{ site.audio_url }}{{ page.image }}" style="width:100%;" />

  </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">
  body {
    background-image:url('{{ site.audio_url }}{{ page.image }}') ;
    background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #0ff;
  }
</style>