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:
parent
001589772c
commit
9a8150b144
71
templates.go
71
templates.go
@ -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}}`,
|
||||||
}
|
}
|
@ -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');
|
||||||
|
Loading…
Reference in New Issue
Block a user