--- lang: en --- <!DOCTYPE HTML> <!-- Based on _Story_ by html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) Remixed and Jekyllified by Setto --> <html lang="{% if page.lang != site.lang %}{{ page.lang }}{% else %}{{ site.lang }}{% endif %}"> <head> <link type="application/atom+xml" rel="alternate" href="{{ site.url }}/feed.xml" title="{{ site.name }}" /> {% include seo.html %} {% include relBase.html %} <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" /> <link rel="stylesheet" href="{{ relBase }}/assets/css/main20200710.css" /> <link rel="apple-touch-icon" href="{{ site.url }}/apple-touch-icon.png"> <link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192"> <link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" /> <noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscript20200710.css" /></noscript> </head> <body id="body"> <span id="top" style="display: none;"></span> <!-- Wrapper --> <div id="wrapper" class="divided"> <!-- Banner --> <section class="banner onload-image-fade-in onload-content-fade-right style2 fullscreen content-align-center image-position-center" style="min-height:100vh;"> <div class="content editable"> <h1 class="editable">{{ page.title }}</h1> <p>by <strong>{{ page.artists }}</strong> <br />{{ page.date | date: '%Y' }} </p> <ul class="actions stacked"> <li><a href="#moe" class="button small smooth-scroll">cheggit!</a></li> </ul> </div> <div class="image"> <img src="{{ site.mediaurl }}/{{ page.slug }}/{{ page.tracks[0].trackSlug }}.jpeg" alt="{{ page.title }}" /> </div> </section> <!-- Content --> <section class="wrapper style1 align-center"> <div class="inner" style="padding-top: 40px;"> <div class="index align-left"> <!-- Author --> <section style="padding-top:40px;" id="moe"> {% include author.html %} <!-- Content --> <div class="content"> <!-- HERE BEGINS MADNESS --> <!-- Content --> <div class="content"> <div id="mainwrap"> <div id="nowPlay"> <p class="right" id="npTitle" style="font-weight: bold;"></p> <p class="left" id="npAction">Paused...</p> </div> <div id="audiowrap"> <div id="audio0"> <audio id="audio1" preload="metadata" controls="controls">Your browser does not support HTML5 Audio!</audio> </div>{% assign onetracker = page.tracks | size %} {% if onetracker > 1 %} <div id="tracks"> <a id="btnPrev"><span class="icon solid fa-fast-backward"></span></a> <a id="btnNext"><span class="icon solid fa-fast-forward"></span></a> </div> {% endif %} </div> <div id="plwrap"> <ul id="plList"> {% for track in page.tracks %} <li class=""> <div class="plItem"> <div class="plNum">{{ track.common.track.no }}.</div> <div class="plTitle">{{ track.common.title }}</div> <div class="plLength">{% assign round_seconds = track.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 }}</div> </div> </li> {% endfor %} </ul> </div> </div> <div id="noJSalbum"> {% for track in page.tracks %} <div class="plItem"> <div class="plNum">{{ track.common.track.no }}.</div> <div class="plTitle"><a href="{{ track.audio }}">{{ track.common.title }} </a></div> <div class="plLength">{% assign round_seconds = track.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 }}</div> </div> {% endfor %} </div> </div> <div class="content" style="font-family: monospace;font-size: 16px;margin-top:60px;"> {{ content }} <p>{{ page.credits }}</p> </div> </div> </section> </div> </div> </section> <!-- HERE ENDS MADNESS --> {% include streamer.html %} <section class="wrapper style1 align-center"> <div class="inner"> <h2>Track list</h2> <p>Use thses pages to share one song in particular</p> </div> </section> {% for track in page.tracks %} <section class="spotlight style4 orient-{% cycle 'left', 'right' %} content-align-{% cycle 'right', 'left' %} image-position-center onscroll-image-fade-in" {% if forloop.index == 1 %}style="box-shadow: none;" {% endif %}> <div class="content"> <h3>{{ track.common.title }}</h3> <p> {% assign round_seconds = track.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 }} <br /><strong>{{ track.common.genre }}</strong> <br />{{ track.common.year }}</p> <ul class="actions stacked"> <li><a href="{{ relBase }}/albums/{{ track.slug }}/" class="button">Track</a></li> </ul> </div> <div class="image"> <img src="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg" alt="{{ track.common.title }}" /> </div> </section> {% endfor %} <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>More releases</h3> </div> <div class="post-nav"> <div> {% if page.previous.url and page.lang == page.previous.lang %} <h4><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><i class="fas fa-arrow-left"></i></a> <a href="{{page.previous.url}}"> {{page.previous.title}}</a></h4> <p style="margin-right: 20px">{{ page.previous.description }}</p> {% endif %} </div> <div class="post-nav-next"> {% if page.next.url and page.lang == page.next.lang %} <h4><a href="{{page.next.url}}"> {{page.next.title}}</a> <a href="{{page.next.url}}" alt="Read {{page.next.title}}" title="Read {{page.next.title}}"><i class="fas fa-arrow-right"></i></a></h4> <p style="margin-left: 20px">{{ page.next.description }}</p> {% endif %} </div> </div> <!-- End Post Navigation --> </div> </section> </div> </div> </section> {% include footer.html %} </div> {% include navigation.html %} {% include scripts.html %} <script type="text/javascript"> // html5media enables <video> and <audio> tags in all major browsers // External File: http://api.html5media.info/1.1.8/html5media.min.js // Add user agent as an attribute on the <html> tag... // Inspiration: http://css-tricks.com/ie-10-specific-styles/ var b = document.documentElement; b.setAttribute('data-useragent', navigator.userAgent); b.setAttribute('data-platform', navigator.platform); // HTML5 audio player + playlist controls... // Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio // Mythium Archive: https://archive.org/details/mythium/ jQuery(function ($) { var supportsAudio = !!document.createElement('audio').canPlayType; if (supportsAudio) { var index = 0, playing = false, mediaPath = '', extension = '', tracks = [{% for track in page.tracks %}{ "track": {{ track.common.track.no }}, "name": "{{ track.common.title }}", "length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}", "file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}" }{% unless forloop.last %},{% endunless %}{% endfor %}], trackCount = tracks.length, npAction = $('#npAction'), npTitle = $('#npTitle'), audio = $('#audio1').bind('play', function () { playing = true; npAction.text('Playing...'); }).bind('pause', function () { playing = false; npAction.text('Paused...'); }).bind('ended', function () { npAction.text('Paused...'); if ((index + 1) < trackCount) { index++; loadTrack(index); audio.play(); } else { audio.pause(); index = 0; loadTrack(index); } }).get(0), btnPrev = $('#btnPrev').click(function () { if ((index - 1) > -1) { index--; loadTrack(index); if (playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), btnNext = $('#btnNext').click(function () { if ((index + 1) < trackCount) { index++; loadTrack(index); if (playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), li = $('#plList li').click(function () { var id = parseInt($(this).index()); if (id !== index) { playTrack(id); } }), loadTrack = function (id) { $('.plSel').removeClass('plSel'); $('#plList li:eq(' + id + ')').addClass('plSel'); npTitle.text(tracks[id].name); index = id; audio.src = mediaPath + tracks[id].file + extension; $('audio').attr("data-matomo-title", tracks[id].name); }, playTrack = function (id) { loadTrack(id); audio.play(); }; extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : ''; loadTrack(index); } }); </script> {% include cookie-consent.html %} </body> </html>