basspistol.com/index.html
Set Hallstrom 6fbb3c3e21 keywords
2020-07-11 09:07:24 +02:00

243 lines
8.6 KiB
HTML

---
title: Music Syndicate
subtitle: Basspistol
description: >-
Homepage of Basspistol, The Outernational Music Syndicate established in 2010.
The underground is dead, Long Live the Underground!
tags:
- basspistol
- uuternational
- music
- syndicate
- homepage
- collective
- free
- culture
video_path: /assets/vid/intro_loop_.mp4
image: /assets/vid/intro_loop_.jpg
logo_image: /siteicon.png
---
{% include relBase.html %}
<!-- Banner -->
<section
class="banner onload-image-fade-in onload-content-fade-right style5 fullscreen content-align-center image-position-center;"
style="background-image:url('{{ page.image }}');background-size:cover;background-repeat:no-repeat;background-position: center;height: 100vh;">
<div
style="z-index:0;position:absolute; top:0; left:0; width:100%;height:100%;background-color: rgba(13, 13 ,13, 0.75);">
</div>
<div class="content" style="z-index:1">
<h1 style="margin-top:80px">{{ page.title }}</h1>
<p>{{ page.description }}</p>
<ul class="actions stacked">
<li><a href="#music" class="button large wide smooth-scroll-middle">Gimme Music!</a></li>
</ul>
</div>
<div class="image">
<img src="{{ relBase }}{{ page.logo_image }}" alt="{{ site.title }} logo" />
</div>
</section>
<!-- Posts -->
{% for post in site.posts limit: '2' %}
<section id="album{% increment var %}"
class="section-shadow banner style1 orient-{% cycle 'left', 'right' %} content-align-{% cycle 'right', 'left' %} image-position-center fullscreen onload-image-fade-in onload-content-fade-right">
<div class="content">
<h1>{{ post.title }}</h1>
<p>{{ post.description }}</p>
{% if post.category == 'release' %}
{% capture album_name -%}
{{ post.album }}
{%- endcapture %}
{% for album in site.albums %}
{% capture name -%}
{{ album.relative_path | replace_first: album.collection, '' | replace_first: '_/', '' | replace_first: '.md', '' }}
{%- endcapture %}
{% if name == album_name %}
<p>{{ album.date | date: '%Y' }}</p>
{% for track in album.tracks %}
<p style="margin-bottom: 30px; font-family: monospace;font-size: 14px">
<strong>{{ track.common.track.no }}. {{ track.common.title }}</strong><br />
<span id="{{ track.common.title | slugify | remove: '-' }}"></span> |
<span style="font-family: monospace;font-size: 14px">{{ track.common.genre }} </span>
</p>
<script type="text/javascript">
var {{ track.common.title | slugify | remove: '-' }}timestamp = {{ track.format.duration | round }};
var {{ track.common.title | slugify | remove: '-' }}hours = Math.floor({{ track.common.title | slugify | remove: '-' }}timestamp / 60 / 60);
var {{ track.common.title | slugify | remove: '-' }}minutes = Math.floor({{ track.common.title | slugify | remove: '-' }}timestamp / 60) - ({{ track.common.title | slugify | remove: '-' }}hours * 60);
var {{ track.common.title | slugify | remove: '-' }}seconds = {{ track.common.title | slugify | remove: '-' }}timestamp % 60;
var {{ track.common.title | slugify | remove: '-' }}formatted = {{ track.common.title | slugify | remove: '-' }}hours.toString().padStart(2, '0') + ':' + {{ track.common.title | slugify | remove: '-' }}minutes.toString().padStart(2, '0') + ':' + {{ track.common.title | slugify | remove: '-' }}seconds.toString().padStart(2, '0');
var theSpan = document.getElementById("{{ track.common.title | slugify | remove: '-' }}");
theSpan.innerHTML = {{ track.common.title | slugify | remove: '-' }}formatted;
</script>
{% endfor %}
{% break %} {% endif %} {% endfor %}
{% endif %}
<br />
<ul class="actions stacked">
<li><a href="{{ relBase }}{{ post.url }}"
class="button big wide {% if post.category == 'release' %}icon solid fa-volume-up{% endif %}">Cheggid out</a>
</li>
</ul>
</div>
<div class="image">
<img src="{{ relBase }}{{ post.image }}" alt="{{ post.title }}" title="{{ post.title }}" />
</div>
</section>
{% endfor %}
<!-- Radio -->
<section
class="banner onload-image-fade-in onload-content-fade-right style3 fullscreen content-align-left image-position-center" style="background-image:url('{{ relBase }}/assets/vid/radio.jpg');background-size: cover; background-repeat: no-repeat;">
<div style="z-index:0;position:absolute; top:0; left:0; width:100%;height:100%;background-color: rgba(13, 13 ,13, 0.85);"></div>
<div id="mainwrap" class="content" style="z-index:1">
<h1 style="margin-top:80px">Radio</h1>
<div id="radioPlaceholder"></div>
<p><strong><span id="tracktime"></span></strong><br /></p>
<ul class="actions stacked">
<li><button id="mu_pause" class="smooth-scroll-middle button icon solid fa-play">Play dat!</button></li>
</ul>
</div>
<div id="noJSalbum" style="z-index:1000;">
<h1 style="margin-top:80px">Radio</h1>
<div id="radioPlaceholder"></div>
<p><strong><span id="tracktime"></span></strong><br /></p>
<a href="https://radio.basspistol.com/radio.mp3" id="mu_pause" class="button icon solid fa-play">MP3</a> <a href="https://radio.basspistol.com/radio.ogg" id="mu_pause" class="button icon solid fa-play">OGG</a>
</div>
<div class="image">
<img src="{{ relBase }}/assets/vid/radio.jpg" alt="{{ page.title }} logo" id="coverart" />
</div>
</section>
<!-- Audio player-->
<audio autoplay preload="true" data-matomo-title="Basspistol Radio">
<source src="https://radio.basspistol.com/radio.mp3" type="audio/mpeg" ontimeupdate='updateTrackTime(this);' />
<source src="https://radio.basspistol.com/radio.ogg" type="audio/ogg" ontimeupdate='updateTrackTime(this);' />
<h1>Your browser isn't ready for so much hotness. Use the download-link instead.</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");
var spincover = document.getElementById("coverart");
mu.addEventListener('ended', function () {
// only functional if "loop" is removed
mu.pause();
mu.currentTime = 0;
loadUrl("{{ relBase }}/{{ 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>
<!-- End Radio -->
<!-- Releases -->
<section class="wrapper style1 align-center">
<div class="inner" style="padding-top: 40px;">
<h2 id="music">Releases</h2>
<p>Collection of releases through time</p>
</div>
</section>
{% assign sorted = site.albums | sort: 'date' | reverse %}
{% for album in sorted %}
<section class="spotlight style5 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>{{ album.title }}</h3>
<p>{{ album.date | date: "%Y" }}</p>
<!-- <p>{{ artist.bio }}</p> -->
<ul class="actions stacked">
<li><a href="{{ album.url }}" target="_blank" rel="noopener" style="text-decoration:none;" class="button">Listen</a></li>
</ul>
</div>
<div class="image">
<img src="https://media.basspistol.com/basspistol.com/{{ album.slug }}/{{ album.tracks[0].trackSlug }}.jpeg" alt="{{ album.title | smartify }}" />
</div>
</section>
{% endfor %}
<!-- END Insta -->
{% include footer.html %}