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