用于多个音频标签样式的JavaScript

Question

我正在尝试设计自己的HTML5音频标签，并且通常在同一页面上有几个。下面的js.jQuery代码是一个简单的开始;它可以将播放/暂停按钮应用于每个对应的音频标签，类别为my_audio。

我是一名新编码员，所以我想我的方法存在问题。任何人都可以指出这些问题，或建议一种更有效的方法吗？

（顺便说一句，是的，我知道jPlayer等等。只是想学习自己做的事情：^）

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

}