79 lines
3.5 KiB
HTML
79 lines
3.5 KiB
HTML
---
|
|
---
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
{% include trackmeta.html %}
|
|
</head>
|
|
<body>
|
|
{% include navmenu.html %}
|
|
<div id="content">
|
|
<div id="headline"><h1>~/{{ page.common.title }}</h1></div>
|
|
<div id="linkhead" style="background-image:url('{{ base }}{{ page.cover }}');background-size:cover;background-position:center;"></div>
|
|
<div id="linkheadthumb" style="background-image:url('{{ base }}{{ page.cover }}');background-size:cover;background-position:center;"></div>
|
|
<div class="fitter">
|
|
<div class="articles" style="text-align: center">
|
|
<p> </p>
|
|
<a id="rwd" href="{{ base }}/tracks/{{ page.previousTrack.albumSlug }}/{{ page.previousTrack.slug }}/"><< RWD</a>
|
|
<button id="mu_pause" style="margin:0 5px 0 5px;">Pause</button>
|
|
<a id="ffwd" href="{{ base }}/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="{{ base }}/assets/img/cloud-download.svg" width="64px" height="64px" /></a></p>
|
|
</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>
|
|
<audio preload="none" autoplay ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
|
|
<source src="{{ base }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.mp3" type="audio/mpeg" />
|
|
<source src="{{ base }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.ogg" type="audio/ogg" />
|
|
<h1>Your browser isn't ready for so much hotness. Use these links instead: <a href="{{ base }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.ogg">OGG</a> or <a href="{{ base }}/assets/albums/{{ page.albumSlug }}/{{ page.slug }}.mp3">MP3</a></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");
|
|
function muFade() {
|
|
mu.classList.add("stopfade");
|
|
}
|
|
mu.addEventListener('ended', function() {
|
|
// only functional if "loop" is removed
|
|
mu.pause();
|
|
mu.currentTime=0;
|
|
|
|
loadUrl("{{ base }}/tracks/{{ page.nextTrack.albumSlug }}/{{ page.nextTrack.slug }}/"); return false;
|
|
|
|
// 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>
|