sakrecoer-mother-web/_layouts/track.html

---
layout: default
---

{% include relBase.html %}
<!-- Banner -->
<section
  class="banner onload-image-fade-in onload-content-fade-right style3 fullscreen content-align-center image-position-center" style="background-image:url('{{ site.mediaurl }}/{{ page.slug }}.jpeg');background-size: cover; background-repeat: no-repeat;">
  <div style="z-index:0;position:absolute; top:0; left:0; width:100%;min-height:100%;background-color: rgba(13, 13 ,13, 0.5);"></div>
  <div class="content" style="z-index:1">
    <h1 style="margin-top:80px">{{ page.common.title }}</h1>
    <p><strong>{% for style in page.common.genre %}{{ style }}{% endfor %}</strong> by <strong>{{ page.common.artist }}</strong>
      <br />{{ page.common.year }}
    </p>

    <p><strong><span id="tracktime"></span></strong><span id="{{ page.common.title | slugify | remove: '-'  }}"></span></strong></p> 
        
    
      <script type="text/javascript">
        var {{ page.common.title | slugify | remove: '-'  }}timestamp = {{ page.format.duration | round }};
        var {{ page.common.title | slugify | remove: '-'  }}hours = Math.floor({{ page.common.title | slugify | remove: '-'  }}timestamp / 60 / 60);
        var {{ page.common.title | slugify | remove: '-'  }}minutes = Math.floor({{ page.common.title | slugify | remove: '-'  }}timestamp / 60) - ({{ page.common.title | slugify | remove: '-' }}hours * 60);
        var {{ page.common.title | slugify | remove: '-'  }}seconds = {{ page.common.title | slugify | remove: '-' }}timestamp % 60;
        var {{ page.common.title | slugify | remove: '-'  }}formatted = {{ page.common.title | slugify | remove: '-' }}hours.toString().padStart(2, '0') + ':' + {{ page.common.title | slugify | remove: '-' }}minutes.toString().padStart(2, '0') + ':' + {{ page.common.title | slugify | remove: '-' }}seconds.toString().padStart(2, '0');
        var theSpan = document.getElementById("{{ page.common.title | slugify | remove: '-'  }}");
        theSpan.innerHTML = {{ page.common.title | slugify | remove: '-' }}formatted;
      </script>

 
    <ul class="actions stacked">
      <li><button id="mu_pause" class="button small icon solid fa-play">Play dat!</button></li>
    </ul>
  </div>

  <div class="image">
    <img src="{{ site.mediaurl }}/{{ page.slug }}.jpeg" alt="{{ page.title }} logo" id="coverart" />
  </div>
</section>

<!-- Content -->
<section class="wrapper style1 align-center">
  <div class="inner" style="padding-top:40px">
    <div class="index align-left">
      <section style="padding-top:40px">
        {% include author.html %}
        <!-- Content -->
        {% if page.all.UNSYNCEDLYRICS != nil %}
        <div class="content">
          {% unless page.all.UNSYNCEDLYRICS == '' %}<h2>Lyrics</h2>{% endunless %}
          <p style="font-family: monospace;font-size:16px;">
            {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
          </p>
          <p>credits:
            {{ page.all.Comment }}
          </p>
        </div>
        {% endif %}
      </section>
    </div>
  </div>
</section>

{% include streamer.html %}
<!-- Page navigation -->
<section class="wrapper style1 align-center">
  <div class="inner">
    <div class="index align-left">
      <!-- Author -->

      <section>
        <!-- Content -->
        <div class="content">
          <!-- post Naviation -->
          <div style="text-align: center;">
            <h3>Play more songs grom this release</h3>
          </div>
          <div class="post-nav">
            <div>
              {% if page.previous.url and page.lang == page.previous.lang %}
              <h4><a href="{{ relBase }}/albums/{{ page.previousTrack.slug }}/" alt="Read {{ page.previousTrack.common.title }}" title="Read {{ page.previousTrack.common.title }}"><i class="fas fa-arrow-left"></i></a> <a
                  href="{{ relBase }}/albums/{{ page.previousTrack.slug }}/">&nbsp;{{ page.previousTrack.common.title }}</a>
              </h4>
              {% endif %}
            </div>
            <div class="post-nav-next">
              {% if page.next.url and page.lang == page.next.lang  %}
              <h4><a href="{{ relBase }}/albums/{{ page.nextTrack.slug }}/">&nbsp;{{ page.nextTrack.common.title }}</a> <a
                  href="{{ relBase }}/albums/{{ page.nextTrack.slug }}/" alt="Read {{ page.nextTrack.common.title }}" title="Read {{ page.nextTrack.common.title }}"><i class="fas fa-arrow-right"></i></a></h4>
              {% endif %}
            </div>
          </div>
          <!-- End Post Navigation -->
        </div>
      </section>
    </div>
  </div>
</section>

<!-- Audio player-->
<audio autoplay preload="metadata" data-matomo-title="{{ page.common.title }}">
  <source src="{{ site.mediaurl }}/{{ page.slug }}.mp3" type="audio/mpeg" ontimeupdate='updateTrackTime(this);' />
  <h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
</audio>
{% include footer.html %}

<script type="text/javascript">
  function loadUrl(newLocation) {
    window.location = newLocation;
    return false;
  }

  var mu = document.getElementsByTagName("audio")[0];
  var pauseButton = document.getElementById("mu_pause");
  var spincover = document.getElementById("coverart");

  mu.addEventListener('ended', function () {
    // only functional if "loop" is removed
    mu.pause();
    mu.currentTime = 0;
    loadUrl("{{ relBase }}/albums/{{ page.nextTrack.slug }}/"); return false;
  });
  mu.onplaying = function() {
    pauseButton.innerHTML = "Pause";
    pauseButton.classList.remove("fa-play");
    pauseButton.classList.add("fa-pause");
    spincover.classList.add("spinnit");
    spincover.classList.remove("paused");
  }; 

  pauseButton.addEventListener("click", function () {
    if (mu.paused) {
      mu.play();

    }
    else {
      mu.pause();
      pauseButton.innerHTML = "Resume";
      pauseButton.classList.add("fa-play");
      pauseButton.classList.remove("fa-pause");
      spincover.classList.add("paused");
    }
  });

  mu.addEventListener('timeupdate', function () {
    var timestamp = Math.floor(mu.currentTime);
    var hours = Math.floor(timestamp / 60 / 60);
    var minutes = Math.floor(timestamp / 60) - (hours * 60);
    var seconds = timestamp % 60;
    var formatted = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
    var thecurrentSpan = document.getElementById("tracktime");
    thecurrentSpan.innerHTML = formatted + ' / ';
  });

</script>