setto.basspistol.com/_layouts/track.html

---
layout: default
---

{% include relBase.html %}
<!-- Banner -->


<div id="trackArt" style="background-image:url({{ site.mediaurl }}/{{ page.slug }}.jpeg)">
<section>
  <div class="coverartwrapper">
    <div class="coverartwrapped" id="coverart" style="background-image: url({{ site.mediaurl }}/{{ page.slug }}.jpeg);"></div>
  </div>
  <div class="playbutton">
  <a id="mu_pause" class="button">Play!</a>
</div>
<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="trackDuration"></span></strong></p> 

  <script type="text/javascript">
    var trackDurationtimestamp = {{ page.format.duration | round }};
    var trackDurationhours = Math.floor(trackDurationtimestamp / 60 / 60);
    var trackDurationminutes = Math.floor(trackDurationtimestamp / 60) - (trackDurationhours * 60);
    var trackDurationseconds = trackDurationtimestamp % 60;
    var trackDurationformatted = trackDurationhours.toString().padStart(2, '0') + ':' + trackDurationminutes.toString().padStart(2, '0') + ':' + trackDurationseconds.toString().padStart(2, '0');
    var theSpan = document.getElementById("trackDuration");
    theSpan.innerHTML = trackDurationformatted;
  </script>

</section>
</div>
<!-- Content -->
<div id="trackInfo">
<section>

  <h1 style="margin-top:80px">{{ page.common.title }}</h1>
 

  {% include author.html %}

<div class="noJSalbum">
  <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>{% assign round_seconds = page.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</strong></p> 
      
  <ul class="actions stacked">
    <li><a class="button" target="_blank" rel="noopener" href="{{ site.mediaurl }}/{{ page.albumSlug }}/{{ page.trackSlug }}.mp3"><span  class="fas fa-play"></span> Play!</a></li>
  </ul>
</div>


<!-- Content -->
<div class="info">
  {% if page.all.UNSYNCEDLYRICS and page.all.USLT %}
  <p style="font-size:16px;">
    {{ page.all.USLT.text | newline_to_br }}
  </p>
  {% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
  <p style="font-size:16px;">
    {{ page.all.USLT.text | newline_to_br }}
  </p>
  {% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
  <p style="font-size:16px;">
    {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
  </p>
  {% endif %}
  <p>
    {{ page.all.Comment }}
  </p>
</div>

</section>
{% for post in site.posts %}
{% if post.album == page.albumSlug %}
{% include streamer.html %}
{% endif %}
{% endfor %}
<!-- post Naviation -->
<section class="post-navigation">


  {% if page.previous.url or page.next.url %}

  <h2>Track Navigation</h2>

  <div class="post-nav">

      {% if page.previous.url %}
      <h4><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><span
            class="fas fa-arrow-left"></span>&nbsp;Previous</a></h4>
      <h3>{{page.previous.common.title}}</h3>
      <p>{{ page.previous.description }}</p>
      {% endif %}
    </div>
    <div class="post-nav-next">
      {% if page.next.url%}
      <h4><a href="{{page.next.url}}">Next&nbsp;<span class="fas fa-arrow-right"></span></a></h4>
      <h3>{{page.next.common.title}}</h3>
      <p>{{ page.next.description }}</p>
      {% endif %}
    </div>



{% endif %}



</section>
{% include footer.html %}
<!-- End Post Navigation -->
</div>

<!-- Audio player-->



<div id="fixedPlayer" class="showplayer hideplayer">
  <div id="audiowrap">

    <div id="audio0">
      <audio controls 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>
    </div>

  </div>
  <div id="nowPlay">


    <div id="tracks">
      {% if page.previous.url %}
      <a id="btnPrev" href="{{page.previous.url}}"><span class="fas fa-fast-backward"></span></a>
      {% endif %}
      {% if page.next.url %}
      <a id="btnNext"href="{{page.next.url}}"><span class="fas fa-fast-forward"></span></a>
      {% endif %}
    </div>

    <p class="right" id="npTitle" style="font-weight: bold;">{{ page.common.title }} </a></p>


  </div>
 </div>




<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");
  var fixedplayer = document.getElementById("fixedPlayer")

  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";
    spincover.classList.add("spinnit");
    spincover.classList.remove("paused");
    fixedplayer.classList.remove("hideplayer");
  }; 

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

    }
    else {
      mu.pause();
      pauseButton.innerHTML = "Resume";

      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>