71 lines
1.8 KiB
HTML
71 lines
1.8 KiB
HTML
{% include head.html %}
|
|
|
|
<body>
|
|
|
|
<div class="site-ctr">
|
|
<!-- Navbar -->
|
|
{% include nav.html %}
|
|
|
|
<div class="reactive-bg">
|
|
|
|
{% assign path = page.url | split: "/" %}
|
|
{% assign album = path[2] %}
|
|
|
|
|
|
<br><br>
|
|
|
|
<div class="card" style="width: 23rem;margin:auto;">
|
|
{% if page.has_art %}
|
|
<img src="/assets/images/{{album}}/cover.jpg" class="card-img" alt="Cover art">
|
|
{% endif %}
|
|
|
|
<div class="card-body">
|
|
<p class="card-text">
|
|
<h3>{{page.title}}</h3>
|
|
|
|
<p>{{page.description}}</p>
|
|
|
|
<hr>
|
|
|
|
<!-- Audio controller -->
|
|
<audio id="audio" controls style="width:100%">
|
|
<source id="audioSource" src="{{page.tracks[0][1]}}" type="audio/mpeg">
|
|
Your browser does not support audio players
|
|
</audio>
|
|
|
|
<br><br>
|
|
|
|
<div id="tracklist">
|
|
{% for track in page.tracks %}
|
|
<a href="#" data-value="{{track[1]}}">{{track[0]}}</a><br>
|
|
{% endfor %}
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% include footer.html %}
|
|
|
|
<!-- Audio player controller -->
|
|
<script>
|
|
tracklist.onclick = function (e) {
|
|
e.preventDefault();
|
|
|
|
var elm = e.target;
|
|
var audio = document.getElementById('audio');
|
|
|
|
var source = document.getElementById('audioSource');
|
|
source.src = elm.getAttribute('data-value');
|
|
|
|
audio.load();
|
|
audio.play();
|
|
};
|
|
</script>
|
|
|
|
|
|
</body> |