84 lines
2.4 KiB
HTML
84 lines
2.4 KiB
HTML
---
|
|
layout: default
|
|
---
|
|
{% include navmenu.html %}
|
|
<div id="player">
|
|
<div id="info">
|
|
<div id="controls">
|
|
<div class="container">
|
|
<button id="mu_pause">Play</button><br />
|
|
{% if page.previous != nil %}
|
|
<a href="{{ site.baseurl }}{{ page.previous.url }}" title="Previous Track"><img
|
|
src="{{ site.baseurl }}/assets/img/icons/skiprwd.png" title="Previous Track" /></a>
|
|
{% endif %}
|
|
<a id="download" title="Download This Track!" href="{{ page.mp3 }}"><img
|
|
src="{{ site.baseurl }}/assets/img/icons/dl.png" title="Download Track" /></a>
|
|
{% if page.next != nil %}
|
|
<a href="{{ site.baseurl }}{{ page.next.url }}" title="Next Track"><img
|
|
src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="trackcontainer">
|
|
|
|
<h1>{{ page.title }}</h1>
|
|
|
|
<h2 id="tracktime">{{ page.keywords }}</h2>
|
|
|
|
</div>
|
|
|
|
<div id="timer">
|
|
|
|
{{ page.content }}
|
|
|
|
|
|
</div>
|
|
<!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
|
|
</div>
|
|
<audio preload="true"
|
|
ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
|
|
<source src="{{ page.mp3 }}" type="audio/mpeg" />
|
|
<source src="{{ page.ogg }}" type="audio/ogg" />
|
|
<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");
|
|
function muFade() {
|
|
mu.classList.add("stopfade");
|
|
}
|
|
mu.addEventListener('ended', function () {
|
|
// only functional if "loop" is removed
|
|
mu.pause();
|
|
mu.currentTime = 0;
|
|
{% if page.next_in_category != nil %}
|
|
loadUrl('{{ site.baseurl }}{{ page.next_in_category.url }}'); return false;
|
|
{% endif %}
|
|
// 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>
|
|
<style type="text/css">
|
|
body {
|
|
background-image:url('{{ page.image }}') ;
|
|
}
|
|
</style>
|