javascript for controllers of multiple audio tags

Question

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

}

Answer 1

This is good code for a new coder.

Some observations:

• I am not sure why you add a pause button through JavaScript, you could have this button declared simply in the HTML.
• doAudios -> misnomer, since it deals with 1 audio at a time, so doAudio makes more sense.
• You go through a lot of effort to give everything an id so that you can wire everything together, it is not needed if you use your closure inside the main loop.

I would counter-propose something like this to get rid of the id centered code:

$(document).ready(function(){

    $(".my_audio").each(function(index){
        var audio = this,
            playPause = $( '<div class="audio_controls_bar"><button>Pause</button></div>' ),
            button = $( audio ).after( playPause ).children().first();  

        button.addEventListener("click", function(){
            if(audio.paused){
              audio.play();
              this.innerHTML = "Pause";
            } else {
              audio.pause();
              this.innerHTML = "Play";
            }        
        }, false);            
    }); 
});

If you were willing to drop the div and put the styling on the button, it would be a bit cleaner :

$(document).ready(function(){

    $(".my_audio").each(function(index){
        var audio = this,
            button = $( '<button class="audio_controls_bar">Pause</button>' ),
            $( audio ).after( button );

        button.addEventListener("click", function(){
            if(audio.paused){
              audio.play();
              this.innerHTML = "Pause";
            } else {
              audio.pause();
              this.innerHTML = "Play";
            }        
        }, false);            
    }); 
});

Since here you can drop playPause and the .children().first();.