sakrecoer-mother-web/_layouts/music.html

---
layout: default
---
{% include navmenu.html %}
{% include relBase.html %}
<div id="player">
  <div id="info">
    <div id="controls">
      <div class="container">
        <button id="mu_pause">Play</button><br /><br />
        {% if page.previous != nil %}
        <a href="{{ relBase }}{{ page.previous.url }}" title="Previous Track"><img
            src="{{ relBase }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a>
        {% endif %}
        <a id="download" title="Download This Track!" href="{{ relBase}}{{ site.audio_url}}{{ page.mp3 }}"><img
            src="{{ relBase }}/assets/img/icons/dl.png" title="Download Track" /></a>
        {% if page.next != nil %}
        <a href="{{ relBase }}{{ page.next.url }}" title="Next Track"><img
            src="{{ relBase }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
            <br /><br />{% include liberapay.html %}
      </div>
    </div>
  </div>
  <div class="trackcontainer">
  
    <h1>{{ page.title }}</h1>
    <p style="margin-bottom: 0px;">{% for c in page.categories %}{{ c }}{% unless forloop.last %}&nbsp;|&nbsp;{% endunless %}{% endfor %}<br />{{ page.date | date: '%Y - %B' }}
  
      <br />
      <span id="tracktime" style="font-weight: normal;">&nbsp;</span></p>
    {% include cookiemonster.html %}
  </div>

  <div id="timer">
    {{ page.content }}
    <img src="{{ relBase }}{{ site.audio_url }}{{ page.image }}" alt="cover art for {{ page.title }}" width="100%" />
  </div>
</div>
<audio preload="true" autoplay="true"
  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration) + ' Seconds';">
  <source src="{{ relBase }}{{ site.audio_url }}{{ page.mp3 }}" type="audio/mpeg" />
  <source src="{{ relBase }}{{ 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 anim = document.getElementById("wallpaper");
  var pauseButton = document.getElementById("mu_pause");
  function muFade() {
    mu.classList.add("stopfade");
    anim.classList.add("stopfade");
  }
  mu.addEventListener('ended', function () {
    // only functional if "loop" is removed
    mu.pause();
    mu.currentTime = 0;
    {% if page.previous != nil %}
    loadUrl('{{ relBase }}{{ page.previous.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('{{ relBase }}{{ site.audio_url }}{{ page.image }}') ;
    background-size: 200%;
    background-repeat: repeat;
  }
  #navigation {
    opacity: 1;
  }

  #wallpaper {
  background-image: url({{ relBase }}/assets/img/world.svg);
  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;
  height: fit-content;
    @-webkit-keyframes AnimationName {
        0%{background-position:0% 91%}
        50%{background-position:100% 10%}
        100%{background-position:0% 91%}
    }
    @-moz-keyframes AnimationName {
        0%{background-position:0% 91%}
        50%{background-position:100% 10%}
        100%{background-position:0% 91%}
    }
    @keyframes AnimationName {
        0%{background-position:0% 91%}
        50%{background-position:100% 10%}
        100%{background-position:0% 91%}
    }
  }
  .stopfade {
    animation-play-state: paused; 
  }

</style>