---
---
<!DOCTYPE html>
<html>
  <head>
{% include trackmeta.html %}
  </head>
  <body>
{% include navmenu.html %}
  <div id="content">
     <div id="headline"><h1>~/{{ page.common.title }}</h1></div>
    <div id="linkhead" style="background-image:url('{{ base }}{{ page.cover }}');background-size:cover;background-position:center;"></div>
    <div id="linkheadthumb" style="background-image:url('{{ base }}{{ page.cover }}');background-size:cover;background-position:center;"></div>   
    <div class="fitter">
      <div class="articles" style="text-align: center">
        <p>&nbsp;</p>
        <a id="rwd" href="{{ base }}/tracks/{{ page.previousTrack.albumSlug }}/{{ page.previousTrack.slug }}/">&lt;&lt; RWD</a> 
        <button id="mu_pause" style="margin:0 5px 0 5px;">Pause</button>
        <a id="ffwd" href="{{ base }}/tracks/{{ page.nextTrack.albumSlug }}/{{ page.nextTrack.slug }}/">FWD &gt;&gt;</a>
        <p style="padding:40px;"><a href="{{ page.transformed["ID3v2.4"].WOAS }}" target="_blank" rel="noopener noreferrer"><img src="{{ base }}/assets/img/cloud-download.svg" width="64px" height="64px" /></a></p>
      </div>   
      <div class="articles">
        <h3>{{ page.common.track.no }}. {{ page.common.title }}</h3>
        Artists: <strong>{{ page.common.artists }}</strong>
        <br />Album: <strong>{{ page.common.album }}</strong>
        <br />Duration: <span id="tracktime"><strong>{{ page.format.duration }}</strong></span> Seconds
        <br />
        {% if page.transformed["ID3v2.4"].lyrics != null %}Lyrics:<br /> {{ page.transformed["ID3v2.4"].lyrics }}
        {% endif %}
      </div>
      <div class="articles">
        <h1>&nbsp;</h1>
        Release Date: <strong>{{ page.common.date }} </strong>
        <br />Genre: <strong>{{ page.common.genre }} </strong>
        <br />Musicbrainz: <a href="https://musicbrainz.org/recording/{{ page.common.musicbrainz_recordingid }}" target="_blank" rel="noopener noreferrer"><strong>{{ page.common.musicbrainz_recordingid }}</strong></a>
      </div>
{% include footer.html %}
    </div>
  </div>
    <audio preload="none" autoplay ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
      <source src="{{ base }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.mp3" type="audio/mpeg" />
      <source src="{{ base }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.ogg" type="audio/ogg" />
      <h1>Your browser isn't ready for so much hotness. Use these links instead: <a href="{{ base }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.ogg">OGG</a> or <a href="{{ base }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.mp3">MP3</a></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;
    
    loadUrl("{{ base }}/tracks/{{ page.nextTrack.albumSlug }}/{{ page.nextTrack.slug }}/"); return false;

    // 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>

  </body>
</html>
