cdr/templates/parts.tmpl

{{define "player"}}
    {{with $x := index . 0}}
    <audio id="player" preload="auto" tabindex="0" controls>
        <source src="{{$x.Filename}}">
    </audio>
    {{end}}
{{end}}
{{define "playlist"}}
    <ol id="playlist">
        {{range $i, $el := .}}
        <li{{if eq $i 0}} class="active"{{end}}>
            <a href="{{$el.Filename}}">{{$el.Artist}} - {{$el.Title}}</a>
        </li>
        {{end}}
    </ol>
{{end}}

{{define "full-player"}}
    {{template "player" .}}
    {{template "playlist" .}}
    {{template "playlist-js"}}
{{end}}

{{define "playlist-js"}}
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script type="text/javascript">
        $(document).ready(function() {
            init();

            function init() {
                var current = 0;
                var $audio = $('#player');
                var $playlist = $('#playlist');
                var $tracks = $playlist.find('li a');
                var len = $tracks.length - 1;
                $playlist.on('click', 'a', function (e) {
                    e.preventDefault();
                    link = $(this);
                    current = link.parent().index();
                    run(link, $audio[0]);
                });
                $audio[0].addEventListener('ended', function (e) {
                    current++;
                    if (current == len) {
                        current = 0;
                        link = $playlist.find('a')[0];
                    } else {
                        link = $playlist.find('a')[current];
                    }
                    run($(link), $audio[0]);
                });
            }

            function run($link, $player) {
                $player.src = $link.attr('href');
                par = $link.parent();
                par.addClass('active').siblings().removeClass('active');
                $player.load();
                $player.play();
            }
        });
	</script>
{{end}}