|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- {{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 class="track" href="{{$el.Filename}}">{{$el.Artist}} - {{$el.Title}}</a>
- {{template "track-info" $el}}
- </li>
- {{end}}
- </ol>
- {{end}}
-
- {{define "track-info"}}{{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() {
- var current = 0;
- var $audio = $('#player');
- var $playlist = $('#playlist');
- var $tracks = $playlist.find('li a.track');
- var len = $tracks.length;
-
- $playlist.on('click', 'a.track', function (e) {
- e.preventDefault();
- link = $(this);
- current = link.parent().index();
- play(link, $audio[0]);
- });
- $audio[0].addEventListener('ended', function (e) {
- playNext();
- });
- $('a#next').on('click', function (e) {
- e.preventDefault();
- playNext();
- });
- $('a#prev').on('click', function (e) {
- e.preventDefault();
- playPrev();
- });
-
- function playPrev() {
- current--;
- if (current <= 0) {
- current = len - 1;
- }
- link = $playlist.find('a.track')[current];
- play($(link), $audio[0]);
- }
-
- function playNext() {
- current++;
- if (current == len) {
- current = 0;
- }
- link = $playlist.find('a.track')[current];
- play($(link), $audio[0]);
- }
-
- function play($link, $player) {
- $player.src = $link.attr('href');
- par = $link.parent();
- par.addClass('active').siblings().removeClass('active');
- $player.load();
- $player.play();
- }
- });
- </script>
- {{end}}
|