--- 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 id="mainwrap" 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!</button></li> </ul> </div> <div id="noJSalbum" 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>{% 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 small icon solid fa-play" target="_blank" rel="noopener" href="{{ site.mediaurl }}/{{ page.albumSlug }}/{{ page.trackSlug }}.mp3">Play!</a></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 --> <div class="content"> {% 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> </div> </div> </section> {% for post in site.posts %} {% if post.album == page.albumSlug %} {% include streamer.html %} {% endif %} {% endfor %} <!-- 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> <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 }}/"> {{ page.previousTrack.common.title }}</a> </h4> </div> <div class="post-nav-next"> <h4><a href="{{ relBase }}/albums/{{ page.nextTrack.slug }}/"> {{ 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> </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>