sakrecoer-mother-web/_layouts/music.html

---
layout: default
---
{% include navmenu.html %}
<div id="player">
  <div id="info">
    <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="{{ 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>
      <p style="margin-bottom: 0px;">{{ page.keywords }}<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 }}
    

  </div>
  <!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
</div>
<audio preload="true" autoplay
  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration) + ' Seconds';">
  <source src="{{ page.mp3 }}" type="audio/mpeg" />
  <source src="{{ 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.previous != nil %}
    loadUrl('{{ site.baseurl }}{{ 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('{{ page.image }}') ;
  }
</style>