audio - How to avoid duplicate code where only id values change in JavaScript? -

i started learning html , html5 recently. site involves different audio players playing different tunes/mp3s. @ moment have created different id names each audio player , each play/pause , stop button.

my javascript file play has unnecessary repetitions of similar code. guess there better way using variables code not repeated different id names not familiar javascript.

here's snippet of javascript file looks like.

$(document).ready(function(){     $("#play-bt1").click(function(){         $("#audio-player1")[0].play();         $("#message").text("music started");     })      $("#pause-bt1").click(function(){         $("#audio-player1")[0].pause();         $("#message").text("music paused");     })      $("#stop-bt1").click(function(){         $("#audio-player1")[0].pause();         $("#audio-player1")[0].currenttime = 0;         $("#message").text("music stopped");     }) })  $(document).ready(function(){     $("#play-bt2").click(function(){         $("#audio-player2")[0].play();         $("#message").text("music started");     })      $("#pause-bt2").click(function(){         $("#audio-player2")[0].pause();         $("#message").text("music paused");     })      $("#stop-bt2").click(function(){         $("#audio-player2")[0].pause();         $("#audio-player2")[0].currenttime = 0;         $("#message").text("music stopped");     }) }) $(document).ready(function(){     $("#play-bt3").click(function(){         $("#audio-player3")[0].play();         $("#message").text("music started");     })      $("#pause-bt3").click(function(){         $("#audio-player3")[0].pause();         $("#message").text("music paused");     })      $("#stop-bt3").click(function(){         $("#audio-player3")[0].pause();         $("#audio-player3")[0].currenttime = 0;         $("#message").text("music stopped");     }) }) 

and here corresponding part of html file

<div class="grid_4 alpha">     <div class="audiobox">         <audio id="audio-player" name="audio-player" src="images/electronic beat-monksee.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt" ><div class="animated_play"></div></a>             <a id="pause-bt" ><div class="animated_stop"></div></a>           </div>      </div> </div> <div class="grid_4">     <div class="audiobox">         <audio id="audio-player1" name="audio-player" src="images/electronic beat-monksee.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt1" href="#"><div class="animated_play"></div></a>             <a id="pause-bt1" href="#"><div class="animated_stop"></div></a>           </div>      </div> </div> <div class="grid_4 omega">     <div class="audiobox">         <audio id="audio-player2" name="audio-player" src="images/beatbox.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt2" ><div class="animated_play"></div></a>             <a id="pause-bt2" ><div class="animated_stop"></div></a>           </div>      </div> </div>     <div class="grid_4 alpha">     <div class="audiobox">         <audio id="audio-player3" name="audio-player" src="images/electronic beat-monksee.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt3" ><div class="animated_play"></div></a>             <a id="pause-bt3" ><div class="animated_stop"></div></a>           </div>      </div> </div> <div class="grid_4">     <div class="audiobox">         <audio id="audio-player4" name="audio-player" src="images/electronic beat-monksee.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt4" ><div class="animated_play"></div></a>             <a id="pause-bt4" ><div class="animated_stop"></div></a>           </div>      </div> </div> <div class="grid_4 omega">     <div class="audiobox">         <audio id="audio-player5" name="audio-player" src="images/beatbox.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt5" ><div class="animated_play"></div></a>             <a id="pause-bt5" ><div class="animated_stop"></div></a>           </div>      </div> </div>   <div class="grid_4 alpha">     <div class="audiobox">         <audio id="audio-player6" name="audio-player" src="images/electronic beat-monksee.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt6" ><div class="animated_play"></div></a>             <a id="pause-bt6" ><div class="animated_stop"></div></a>           </div>      </div> </div> <div class="grid_4">     <div class="audiobox">         <audio id="audio-player7" name="audio-player" src="images/electronic beat-monksee.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt7" ><div class="animated_play"></div></a>             <a id="pause-bt7" ><div class="animated_stop"></div></a>           </div>      </div> </div> <feature class="grid_4 omega">     <div class="audiobox">         <audio id="audio-player8" name="audio-player" src="images/beatbox.mp3" >audio</audio>          <div class="controlsbox">             <a id="play-bt8" ><div class="animated_play"></div></a>             <a id="pause-bt8" ><div class="animated_stop"></div></a>           </div>      </div> </feature> 

to avoid duplication of code, need introduce function common behavior, parameters variable parts.

starting first part of example:

$(document).ready(function(){     $("#play-bt1").click(function(){         $("#audio-player1")[0].play();         $("#message").text("music started");     })      $("#pause-bt1").click(function(){         $("#audio-player1")[0].pause();         $("#message").text("music paused");     })      $("#stop-bt1").click(function(){         $("#audio-player1")[0].pause();         $("#audio-player1")[0].currenttime = 0;         $("#message").text("music stopped");     }) }) 

we can wrap building block in function. first step find name function. since function initializes player when document ready, explicit name initplayerwhendocumentready. wrapped in function, code becomes:

function initplayerwhendocumentready(){     $(document).ready(function(){         $("#play-bt1").click(function(){             $("#audio-player1")[0].play();             $("#message").text("music started");         })          $("#pause-bt1").click(function(){             $("#audio-player1")[0].pause();             $("#message").text("music paused");         })          $("#stop-bt1").click(function(){             $("#audio-player1")[0].pause();             $("#audio-player1")[0].currenttime = 0;             $("#message").text("music stopped");         })     }) } 

the next step extract parameters variables parts. 1 possibility add separate parameters playerid, playbuttonid, pausebuttonid, stopbuttonid.

but on second look, appears identifiers follow same format, , number @ end changes: 1, 2, 3. thus, can add single parameter number, playernumber:

function initplayerwhendocumentready( playernumber ){     $(document).ready(function(){         $("#play-bt"+playernumber).click(function(){             $("#audio-player"+playernumber)[0].play();             $("#message").text("music started");         })          $("#pause-bt"+playernumber).click(function(){             $("#audio-player"+playernumber)[0].pause();             $("#message").text("music paused");         })          $("#stop-bt"+playernumber).click(function(){             $("#audio-player"+playernumber)[0].pause();             $("#audio-player"+playernumber)[0].currenttime = 0;             $("#message").text("music stopped");         })     }) } 

you can call function initialize 3 players:

initplayerwhendocumentready( 1 ); initplayerwhendocumentready( 2 ); initplayerwhendocumentready( 3 ); 

the calls same function different values allow run similar code while reducing duplicate code: call repeated.

and limited duplication can avoided, using loop, here defined in new function, initplayers, takes total number of players parameter:

function initplayers( total ) {     (var = 1; <= total; i++ ) {         initplayerwhendocumentready( );     } }  initplayers( 3 );