fiddling arround with that player shieet

This commit is contained in:
Set Hallstrom 2019-05-02 21:15:10 +02:00
parent 2224d57dfd
commit 4108c378c4
2 changed files with 30 additions and 22 deletions

View file

@ -1,35 +1,37 @@
---
layout: default
---
<div id="navigation">
<button id="mu_pause">Play</button>
<h1>{% 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="{{ site.audio_url }}{{ 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 %}
</h1>
<a href="{{ site.baseurl }}/music/">Back to Index</a>
</div>
<div id="player">
<div id="controls">
<button id="mu_pause">Play</button>
<h1>{% 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="{{ site.audio_url }}{{ 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 %}
</h1>
<a href="{{ site.baseurl }}/music/">Back to Index</a>
</div>
<div id="lyrics">
<h1 class="title">{{ page.title }}</h1>
{{ page.content }}
</div>
<div id="info">
<h1 class="title">{{ page.title }}</h1>
{{ page.content }}
</div>
<div id="tracktime"></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="{{ site.audio_url }}{{ page.mp3 }}" type="audio/mpeg" />
<source src="{{ site.audio_url }}{{ page.ogg }}" type="audio/ogg" />
<h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
</audio>
<div id="tracktime"></div>
<!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
<script type="text/javascript">
function loadUrl(newLocation) {
window.location = newLocation;
@ -64,7 +66,7 @@ layout: default
<style type="text/css">
html,
body {
background:url('{{ site.audio_url }}{{ page.image }}') #0ff no-repeat center center fixed;
background:url('{{ site.audio_url }}{{ page.image }}') #0ff no-repeat center fixed;
background-size: contain;
}
</style>

View file

@ -42,4 +42,10 @@ a {
/* Music Template */
#player {
display: flex;
}
#controls {
}