JSFiddle - React, Tailwind, and code Playground
HTML
<a href='' class='add-player'>Add player</a>
JavaScript
$.createEventCapturing = (function () {
var special = $.event.special;
return function (names) {
if (!document.addEventListener) {
return;
}
if (typeof names == 'string') {
names = [names];
}
$.each(names, function (i, name) {
var handler = function (e) {
e = $.event.fix(e);
return $.event.dispatch.call(this, e);
};
special[name] = special[name] || {};
if (special[name].setup || special[name].teardown) {
return;
}
$.extend(special[name], {
setup: function () {
this.addEventListener(name, handler, true);
},
teardown: function () {
this.removeEventListener(name, handler, true);
}
});
});
};
})();
$.createEventCapturing(['timeupdate']);
$(function() {
var audioTemplate = $("<audio></audio>").attr('controls', true).addClass('player').bind('timeupdate', updateTime);
$(".add-player").click(function(e) {
e.preventDefault();
createAudElement().insertAfter(this);
});
$('body').on('timeupdate', '.audioPlayerJS audio', updateTime);
});
function updateTime(t){
var text = Math.floor( (100 / this.duration) * this.currentTime)+ '% over';
$(this).prev().html(text);
}
function createAudElement(){
var src = 'http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg';
var...