<%
var audiosJson = JSON.stringify(site.data.musics);
%>

<link rel="stylesheet" href="/libs/aplayer/APlayer.min.css">
<div class="music-player">
    <% if (theme.music.showTitle) { %>
    <div class="title center-align">
        <i class="fa fa-music"></i>&nbsp;&nbsp;<%- theme.music.title %>
    </div>
    <% } %>
    <div class="row">
        <div class="col l8 offset-l2 m10 offset-m1 s12">
            <div id="aplayer" class="music"></div>
        </div>
    </div>
</div>

<script src="/libs/aplayer/APlayer.min.js"></script>
<script>
$(function () {
    new APlayer({
        container: document.getElementById('aplayer'),
        fixed: '<%- theme.music.fixed %>' === 'true',
        autoplay: '<%- theme.music.autoplay %>' === 'true',
        theme: '<%- theme.music.theme %>',
        loop: '<%- theme.music.loop %>',
        order: '<%- theme.music.order %>',
        preload: '<%- theme.music.preload %>',
        volume: Number('<%- theme.music.volume %>'),
        listFolded: '<%- theme.music.listFolded %>' === 'true',
        listMaxHeight: '<%- theme.music.listMaxHeight %>',
        audio: JSON.parse('<%- audiosJson %>')
    });
});
</script>