2019-04-01 23:16:35 +02:00
---
---
<!DOCTYPE html>
< html >
< head >
{% include trackmeta.html %}
2019-11-05 15:18:23 +01:00
{% include matomo.html %}
2019-04-01 23:16:35 +02:00
< / head >
< body >
{% include navmenu.html %}
< div id = "content" >
< div id = "headline" > < h1 > ~/{{ page.common.title }}< / h1 > < / div >
2019-06-19 16:52:49 +02:00
< div id = "linkhead" style = "background-image:url('{{ site.baseurl }}{{ page.cover }}');background-size:cover;background-position:center;" > < / div >
< div id = "linkheadthumb" style = "background-image:url('{{ site.baseurl }}{{ page.cover }}');background-size:cover;background-position:center;" > < / div >
2019-04-01 23:16:35 +02:00
< div class = "fitter" >
< div class = "articles" style = "text-align: center" >
< p > < / p >
2019-06-19 16:52:49 +02:00
< a id = "rwd" href = "{{ site.baseurl }}/tracks/{{ page.previousTrack.albumSlug }}/{{ page.previousTrack.slug }}/" > < < RWD< / a >
2019-04-01 23:16:35 +02:00
< button id = "mu_pause" style = "margin:0 5px 0 5px;" > Pause< / button >
2019-06-19 16:52:49 +02:00
< a id = "ffwd" href = "{{ site.baseurl }}/tracks/{{ page.nextTrack.albumSlug }}/{{ page.nextTrack.slug }}/" > FWD > > < / a >
< p style = "padding:40px;" > < a href = "{{ page.transformed[" ID3v2 . 4 " ] . WOAS } } " target = "_blank" rel = "noopener noreferrer" > < img src = "{{ site.baseurl }}/assets/img/cloud-download.svg" width = "64px" height = "64px" / > < / a > < / p >
2019-04-01 23:16:35 +02:00
< / 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 > < / 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 >
2019-12-05 23:35:03 +01:00
< audio preload = "none" data-matomo-title = "{{ page.common.artists }} - {{ page.common.title }}" autoplay ontimeupdate = "document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);" >
2019-06-19 16:52:49 +02:00
< source src = "{{ site.baseurl }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.mp3" type = "audio/mpeg" / >
2019-09-13 13:00:00 +02:00
<!-- <source src="{{ site.baseurl }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.ogg" type="audio/ogg" /> -->
2019-06-19 16:52:49 +02:00
< h1 > Your browser isn't ready for so much hotness. Use these links instead: < a href = "{{ site.baseurl }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.ogg" > OGG< / a > or < a href = "{{ site.baseurl }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.mp3" > MP3< / a > < / h1 > .
2019-04-01 23:16:35 +02:00
< / 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;
2019-06-19 16:52:49 +02:00
loadUrl("{{ site.baseurl }}/tracks/{{ page.nextTrack.albumSlug }}/{{ page.nextTrack.slug }}/"); return false;
2019-04-01 23:16:35 +02:00
// 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 >
