<audio> A-B repeat. Function not defined error
I am trying to add an A-B repeat function to my audio player, but I am getting: setA is not defined error.
This is the html for the buttons:
- <div id="repeatControl">
<button onclick="setA()" id="btnAtime">A</button>
<button onclick="setB()" id="btnBtime">B</button>
<button onclick="clearAb()">X</button>
</div>
This is the full script to control the playlist and the A-B repeat function:
- $(function(next) {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li');
next.addClass('playing').attr('id', 'playing').siblings().removeClass('playing').removeAttr('id');
var container = $('#rightbox'),
scrollTo = $('#playing');
container.animate({scrollTop: scrollTo.offset().top - container.offset().top +
container.scrollTop()});
audio.load($('a', next).attr('data-src'));
$('#nowplaying').empty();
$('#nowplaying').html('<p>' + $('#myaudio').attr('src').split('\/').pop().trim() + '</p>');
audio.play();
}
});
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Initialize the peak meters with the newly created audio element
var myMeterElement = document.getElementById('my-peak-meter');
var myAudioElement = audio.element;
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var sourceNode = audioCtx.createMediaElementSource(myAudioElement);
sourceNode.connect(audioCtx.destination);
var meterNode = webAudioPeakMeter.createMeterNode(sourceNode, audioCtx);
webAudioPeakMeter.createMeter(myMeterElement, meterNode, {});
// Load in a track on click
// $('ol li').click(function(e) {
$(document.body).on('click', 'ol li' ,function(e){
e.preventDefault();
$(this).addClass('playing').attr('id', 'playing').siblings().removeAttr('class').removeAttr('id');
audio.load($('a', this).attr('data-src'));
$('#nowplaying').empty();
$('#nowplaying').html('<p>' + $('#myaudio').attr('src').split('\/').pop().trim() + '</p>');
$('#play').html('2')
// =========== A-B Repeat Starts Here ===============
var aTime = 0;
var bTime = 0;
function clearAb() {
aTime = 0;
bTime = 0;
$("#btnAtime").html("A");
$("#btnBtime").html("B");
}
$("#repeatControl *").attr("disabled", true);
clearAb();
function setA() {
aTime = parseInt(myAudio.currentTime);
$("#btnAtime").html("A[" + aTime + "]");
}
function setB() {
bTime = parseInt(myAudio.currentTime);
$("#btnBtime").html("B[" + bTime + "]");
repeatAb();
}
function repeatAb() {
myAudio.pause();
myAudio.currentTime = aTime;
myAudio.play();
}
function checkRepeat() {
if (bTime > 1 && myAudio.currentTime > bTime) {
repeatAb();
}
}
var myAudio = $("#myaudio").get(0);
myAudio.addEventListener('canplay', function() {
$("#repeatControl *").attr("disabled", false);
});
myAudio.addEventListener('timeupdate', function() {
checkRepeat();
}, false);
$("#repeatControl *").attr("disabled", true);
// ===================END AB REPEAT ==========================
audio.play();
});
});
Everthing is working fine except for the A-B repeat part.
I have set up 2
jsfiddles to show roughly what I'm trying to do. hopefully it helps.
Sorry this might be alot to ask, but I just don't know enough jquery to figure out how to make this work.
Any help would be very appreciated.