200 lines
6 KiB
HTML
200 lines
6 KiB
HTML
---
|
|
permalink: /:categories/:title/
|
|
---
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<meta name="dc.date.modified" scheme="ISO8601" content="{{ site.time | date_to_xmlschema }}" />
|
|
<title>{{ page.title }} - The Sakrecoer Jukebox</title>
|
|
<meta charset="utf-8" />
|
|
<meta name='robots' content='index'/>
|
|
<meta name="description" content="{{ page.title }}, {{ page.content | strip_html | truncatewords: 30 }}">
|
|
<meta name="keywords" content="{{ page.title }}, {{ page.keywords }} Sakrecoer, Music, mp3, ogg, download">
|
|
<link rel="shortcut icon" href="{{ site.baseurl }}/assets/img/mininewskoolLOGO.png" type="image/png" />
|
|
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style2014.css" />
|
|
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/music.css" />
|
|
<script src="{{ site.baseurl }}/assets/js/jquery-1.11.1.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function generateRandomPosts()
|
|
{
|
|
$.getJSON("{{ site.baseurl }}/search.json", function(data) {
|
|
console.log("[search.json loaded for random posts]");
|
|
|
|
var postsCount = data.length;
|
|
var posts = data;
|
|
|
|
var randomIndexUsed = [];
|
|
var counter = 0;
|
|
var numberOfPosts = 5;
|
|
|
|
var divRandomPosts = $("#random_posts");
|
|
|
|
divRandomPosts.append('<h2 style="color:rgba(0,255,255,.7);">random tracks</h2><hr />');
|
|
|
|
while (counter < numberOfPosts)
|
|
{
|
|
var randomIndex = Math.floor(Math.random() * postsCount);
|
|
|
|
if (randomIndexUsed.indexOf(randomIndex) == "-1")
|
|
{
|
|
var postHREF = posts[randomIndex].href;
|
|
var postTitle = posts[randomIndex].title;
|
|
|
|
if (counter == (numberOfPosts - 1))
|
|
{
|
|
divRandomPosts.append('<p><a href="{{base}}' + postHREF + '">' + postTitle + '</a></p>');
|
|
}
|
|
else
|
|
{
|
|
divRandomPosts.append('<p><a href="{{base}}' + postHREF + '">' + postTitle + '</a></p><hr />');
|
|
}
|
|
|
|
randomIndexUsed.push(randomIndex);
|
|
|
|
counter++;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
generateRandomPosts();
|
|
});
|
|
function loadUrl(newLocation) {
|
|
window.location = newLocation;
|
|
return false;
|
|
}
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body id="Music">
|
|
|
|
<span itemscope itemtype="http://schema.org/MusicRecording">
|
|
<meta itemprop="byArtist" content="reSet Sakrecoer" />
|
|
<div id="navigation">
|
|
|
|
<button id="mu_pause">Pause<br />Music</button>
|
|
|
|
|
|
|
|
|
|
<br />
|
|
{% if page.previous_in_category != nil %}
|
|
<a href="{{ site.baseurl }}{{ page.previous_in_category.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_in_category != nil %}
|
|
<a href="{{ site.baseurl }}{{ page.next_in_category.url }}" title="Next Track"><img src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>
|
|
{% endif %}
|
|
|
|
|
|
|
|
<br /><br /><a id="lyrics" title="Lyrics/Description" href="{{ site.baseurl }}/music/index.html#lyrics{{ page.uid }}" target="_blank">Description<br />(click for lyrics)</a>
|
|
|
|
<div id="a"></div>
|
|
<div id="ab">To download: <br /><b>Right-Click and "Save link as"</b></div>
|
|
<div id="abc"><h1 itemprop="name"><a itemprop="url" href="{{ site.production_url }}{{ page.url }}">{{ page.title }}</a></h1>Publishing Date: <time itemprop="datePublished" datetime="{{ page..date | date_to_string }}">{{ page..date | date_to_string }}</time><br />GENRE: <span itemprop="genre">{{ page.keywords }}</span></div>
|
|
<div>
|
|
{% include navmenu.html %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
{% for post in site.categories.music offset: 0 limit: 1 %}
|
|
<span itemscope itemprop="audio" itemtype="http://schema.org/AudioObject">
|
|
<audio id="{{ page.uid }}" preload="true" autoplay ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);" audio.mediaGroup="deluxe">
|
|
<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>.
|
|
<meta itemprop="name" content="{{ page.title }}" />
|
|
</audio>
|
|
<meta itemprop="image" content="{{ page.bgimg }}" />
|
|
<span itemprop="encodingFormat" content="mp3"><meta itemprop="url" content="{{ page.mp3 }}" /></span>
|
|
<span itemprop="encodingFormat" content="ogg"><meta itemprop="url" content="{{ page.ogg }}" /></span>
|
|
</span>
|
|
</span>
|
|
<span id="tracktime"></span>
|
|
|
|
{% endfor %}
|
|
|
|
<div id="random_posts">
|
|
</div>
|
|
|
|
<!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
|
|
|
|
{% include cookiemonster.html %}
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
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 %}
|
|
|
|
// to capture IE10
|
|
|
|
muFade();
|
|
|
|
});
|
|
|
|
pauseButton.addEventListener("click", function() {
|
|
|
|
mu.classList.toggle("stopfade");
|
|
|
|
if (mu.paused) {
|
|
|
|
mu.play();
|
|
|
|
pauseButton.innerHTML = "Pause<br />Music";
|
|
|
|
} else {
|
|
|
|
mu.pause();
|
|
|
|
pauseButton.innerHTML = "Resume<br />Music";
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
{% for post in site.categories.music offset: 0 limit: 1 %}
|
|
<style type="text/css">
|
|
html,
|
|
body{
|
|
background:url('{{ page.bgimg }}') #0ff no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
{% endfor %}
|
|
</body>
|
|
</html>
|