I am trying to learn to create controllers for my own HTML5 audio tags, which I often have several of on the same page. The js.jQuery code below is a simple beginning to this; it works to apply a play/pause button to each corresponding audio tag with a class of my_audio.
I'm a new coder though, so I imagine there are problems to my approach. Can anyone point out those problems, or suggest a more efficient way to do this?
(Btw, yes I know about jPlayer, etc. Just wanting to learn to do it myself :^)
$(document).ready(function(){
$(".my_audio").each(function(index){
$( this ).attr('id', "audioId" + index);
var playPauseId = "playPause" + index;
$( this ).after(
'<div class="audio_controls_bar">\
<button id="' + playPauseId + '">Pause</button>\
</div>'
);
doAudios(index);
});
});
function doAudios(index) {
var audio, playbtn;
function initializePlayer(){
//set object references
audio = document.getElementById("audioId"+index);
console.log(audio);
playbtn = document.getElementById("playPause"+index);
console.log(playbtn)
// add event listeners
playbtn.addEventListener("click", playPause, false);
}
initializePlayer();
function playPause(){
if(audio.paused){
audio.play();
playbtn.innerHTML = "Pause";
} else {
audio.pause();
playbtn.innerHTML = "Play";
}
}
}