1
0
mirror of https://github.com/thebaer/cdr.git synced 2024-11-15 01:31:01 +00:00

Support next / previous track controls in JS

This commit is contained in:
Matt Baer 2020-02-29 11:19:41 -05:00
parent 001589772c
commit 9a8150b144
2 changed files with 91 additions and 49 deletions

View File

@ -71,33 +71,54 @@ var files = map[string]string{
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
init(); var current = 0;
var $audio = $('#player');
var $playlist = $('#playlist');
var $tracks = $playlist.find('li a');
var len = $tracks.length;
function init() { $playlist.on('click', 'a', function (e) {
var current = 0; e.preventDefault();
var $audio = $('#player'); link = $(this);
var $playlist = $('#playlist'); current = link.parent().index();
var $tracks = $playlist.find('li a'); console.log(current);
var len = $tracks.length - 1; play(link, $audio[0]);
$playlist.on('click', 'a', function (e) { });
e.preventDefault(); $audio[0].addEventListener('ended', function (e) {
link = $(this); playNext();
current = link.parent().index(); });
run(link, $audio[0]); $('a#next').on('click', function (e) {
}); e.preventDefault();
$audio[0].addEventListener('ended', function (e) { playNext();
current++; });
if (current == len) { $('a#prev').on('click', function (e) {
current = 0; e.preventDefault();
link = $playlist.find('a')[0]; playPrev();
} else { });
link = $playlist.find('a')[current];
} function playPrev() {
run($(link), $audio[0]); current--;
}); if (current <= 0) {
current = len;
link = $playlist.find('a')[0];
} else {
link = $playlist.find('a')[current];
}
play($(link), $audio[0]);
} }
function run($link, $player) { function playNext() {
current++;
if (current == len) {
current = 0;
link = $playlist.find('a')[0];
} else {
link = $playlist.find('a')[current];
}
play($(link), $audio[0]);
}
function play($link, $player) {
$player.src = $link.attr('href'); $player.src = $link.attr('href');
par = $link.parent(); par = $link.parent();
par.addClass('active').siblings().removeClass('active'); par.addClass('active').siblings().removeClass('active');
@ -107,4 +128,4 @@ var files = map[string]string{
}); });
</script> </script>
{{end}}`, {{end}}`,
} }

View File

@ -25,33 +25,54 @@
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
init(); var current = 0;
var $audio = $('#player');
var $playlist = $('#playlist');
var $tracks = $playlist.find('li a');
var len = $tracks.length;
function init() { $playlist.on('click', 'a', function (e) {
var current = 0; e.preventDefault();
var $audio = $('#player'); link = $(this);
var $playlist = $('#playlist'); current = link.parent().index();
var $tracks = $playlist.find('li a'); console.log(current);
var len = $tracks.length - 1; play(link, $audio[0]);
$playlist.on('click', 'a', function (e) { });
e.preventDefault(); $audio[0].addEventListener('ended', function (e) {
link = $(this); playNext();
current = link.parent().index(); });
run(link, $audio[0]); $('a#next').on('click', function (e) {
}); e.preventDefault();
$audio[0].addEventListener('ended', function (e) { playNext();
current++; });
if (current == len) { $('a#prev').on('click', function (e) {
current = 0; e.preventDefault();
link = $playlist.find('a')[0]; playPrev();
} else { });
link = $playlist.find('a')[current];
} function playPrev() {
run($(link), $audio[0]); current--;
}); if (current <= 0) {
current = len;
link = $playlist.find('a')[0];
} else {
link = $playlist.find('a')[current];
}
play($(link), $audio[0]);
} }
function run($link, $player) { function playNext() {
current++;
if (current == len) {
current = 0;
link = $playlist.find('a')[0];
} else {
link = $playlist.find('a')[current];
}
play($(link), $audio[0]);
}
function play($link, $player) {
$player.src = $link.attr('href'); $player.src = $link.attr('href');
par = $link.parent(); par = $link.parent();
par.addClass('active').siblings().removeClass('active'); par.addClass('active').siblings().removeClass('active');