javascript for controllers of multiple audio tags
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 = $( '&lt;div class="audio_controls_bar"&gt;&lt;button&gt;Pause&lt;/button&gt;&lt;/div&gt;' ),
            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 = $( '&lt;button class="audio_controls_bar"&gt;Pause&lt;/button&gt;' ),
            $( 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();.