I am trying to learn to style my own HTML5 audio tags, and often have several 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";
        }
    }

}

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";
        }
    }

}