4
\$\begingroup\$

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

}
\$\endgroup\$
  • 1
    \$\begingroup\$ Please note that JavaScript itself can't style anything. This is done with CSS. \$\endgroup\$ – kleinfreund Jan 24 '14 at 20:22
  • \$\begingroup\$ yes. but it seems you can't style the audio element unless you make your own controllers and style them instead. \$\endgroup\$ – Gregory Tippett Jan 24 '14 at 20:25
  • 1
    \$\begingroup\$ yes - take a look, I reworded the question as I see it was not clear. I know how to do the css, what I am looking for is feedback on the javascript. \$\endgroup\$ – Gregory Tippett Jan 24 '14 at 20:56
1
\$\begingroup\$

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();.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.