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,7 +1,8 @@
--- ---
layout: default layout: default
--- ---
<div id="navigation"> <div id="player">
<div id="controls">
<button id="mu_pause">Play</button> <button id="mu_pause">Play</button>
<h1>{% if page.previous_in_category != nil %} <h1>{% if page.previous_in_category != nil %}
<a href="{{ site.baseurl }}{{ page.previous_in_category.url }}" title="Previous Track"><img <a href="{{ site.baseurl }}{{ page.previous_in_category.url }}" title="Previous Track"><img
@ -14,22 +15,23 @@ layout: default
src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %} src="{{ site.baseurl }}/assets/img/icons/skipfwd.png" title="Next Track" /></a>{% endif %}
</h1> </h1>
<a href="{{ site.baseurl }}/music/">Back to Index</a> <a href="{{ site.baseurl }}/music/">Back to Index</a>
</div> </div>
<div id="lyrics"> <div id="info">
<h1 class="title">{{ page.title }}</h1> <h1 class="title">{{ page.title }}</h1>
{{ page.content }} {{ page.content }}
</div> </div>
<div id="tracktime"></div>
<!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
</div>
<audio preload="true" <audio preload="true"
ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);"> 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.mp3 }}" type="audio/mpeg" />
<source src="{{ site.audio_url }}{{ page.ogg }}" type="audio/ogg" /> <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>. <h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
</audio> </audio>
<div id="tracktime"></div>
<!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
<script type="text/javascript"> <script type="text/javascript">
function loadUrl(newLocation) { function loadUrl(newLocation) {
window.location = newLocation; window.location = newLocation;
@ -64,7 +66,7 @@ layout: default
<style type="text/css"> <style type="text/css">
html, html,
body { 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; background-size: contain;
} }
</style> </style>

View file

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