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 type="text/javascript">
$(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() {
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]);
});
$playlist.on('click', 'a', function (e) {
e.preventDefault();
link = $(this);
current = link.parent().index();
console.log(current);
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;
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');
par = $link.parent();
par.addClass('active').siblings().removeClass('active');

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 type="text/javascript">
$(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() {
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]);
});
$playlist.on('click', 'a', function (e) {
e.preventDefault();
link = $(this);
current = link.parent().index();
console.log(current);
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;
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');
par = $link.parent();
par.addClass('active').siblings().removeClass('active');