Mettre plusieurs players audio sur une page ?

<div id="Layer1"

var audio = document.createElement('audio'),//-- création de l'élément AUDIO(dans le DOM mais pas encore inclus dans la page)
 playlist = document.createElement('select'),//-- création d'un select
 tracks =[];//-- un tableau qui va retenir les noms des pistes selon le format(mp3 et ogg)
 
function ajoutPlaylist(mp3,ogg=null){//-- un fonction qui remplit le tableau tracks en ajoutant à chaque fois un objet qui a deux attributs/valurs: mp3: l'URL du fichier mp3 et ogg l'URL du fichier ogg
       tracks.push( {mp3:mp3, ogg:ogg} ) //-- un objet en notation llittéral(ou JSON) entre accolades
}

function loadAudio(listMp3, listOgg){//-- les paramètres sont deux tableaux de même dimension(.length)
 for(var i=0, len=listMp3.length; i<len; i++){
  let pisteM=listMp3[i] !==null ? listMp3[i] :null;//-- comparaison ternaire équivalent de "if" else" mais sur une ligne avec moins de mots//pisteM vaut list[i].ogg ou null
  let pisteO=listOgg[i] !==null ? listOgg[i] :null;
  ajoutPlaylist(pisteM, pisteO)
  let opt=document.createElement('option')
  if( tracks[tracks.length-1].mp3 !==null ){//-- tracks.length indiquent la longueur(nombre d'éléments) du tableau, - car il commence à la valeur zéro
   opt.innerHTML=tracks[tracks.length-1].mp3.substring(0, tracks[tracks.length-1].mp3.lastIndexOf('.') )//--coupe la chaîne pour ne garder que ce qui est avant le dernier '.' du nom du fichier
   opt.setAttribute('value', i )//-- l'attribut value contient l'indice du tableau tracks de la piste
  }else{
   opt.innerHTML=tracks[tracks.length-1].ogg.substring(0, tracks[length-1].ogg.lastIndexOf('.') )
   opt.setAttribute('value', tracks[tracks.length-1] )
  }
  playlist.appendChild(opt)
  console.log(opt)
 }
}


function choixPiste(index){
 var isMp3 = tracks[index].mp3 !==null ? '<source src='+tracks[index].mp3+' type="audio/mpeg" >':''; //-- encore la notaion ternaire de IF ELSE qui est bien pratique une fois qu'on s'y est habitué
 var isOgg = tracks[index].ogg !==null ? '<source src='+tracks[index].ogg+' type="audio/ogg" >':''; //-- encore la notaion ternaire de IF ELSE qui est bien pratique une fois qu'on s'y est habitué
 audio.innerHTML=isMp3+''+isOgg
}

audio.id='lecteur'
audio.controls=true;//-- active les contrôles, équivalent dans le HTML de <audio controls >
playlist.id='playlist'

document.body.appendChild(audio)//-- ajoute l'élément audio dans la page
document.body.appendChild(playlist)//-- ajoute l'élément select dans la page

loadAudio(['chanson0.mp3', 'chanson1.mp3' , 'chanson3.mp3'],['chanson0.ogg', 'chanson1.ogg' , 'chanson2.ogg'] )

playlist.addEventListener('change',function(e){
 console.log('option changée: '+e.target.innerHTML)
 choixPiste(e.target.value)
})

<!-- Début de la boite frame pour le player audio dans le pop up -->
<script language="JavaScript" type="text/JavaScript">
//<![CDATA[
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
//]]>
</script>
<script type="text/javascript">
//<![CDATA[

<!--  Script de Rad Zone pur afficher les images via un lien
var subs_array = new Array("sub1","sub2","sub3","sub4","sub5","sub6","sub7","sub8","sub9","sub10","sub11","sub12");
function displaySubs(the_sub){
        if (document.getElementById(the_sub).style.display==""){
        document.getElementById(the_sub).style.display = "none";return
  }
  for (i=0;i<subs_array.length;i++){
        var my_sub = document.getElementById(subs_array[i]);
        my_sub.style.display = "none";
        }
  document.getElementById(the_sub).style.display = "";
  }
//  End -->
//]]>
</script>

<div id="pop" style="border: 3px outset ; position: absolute; left: 1000px; top: 1000px; display: none; z-index: 200; background-color: rgb(0, 0, 0 );">                     
<div id="tet" onmousedown="dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;" onmouseup="drag=0" style="padding: 0pt 20px 0pt 0.5em; cursor: move; background-color: rgb(0, 0, 0); line-height: 18px; color: white; font-size: 12px; font-family: Helvetica,Arial;">entete                           
<img title=" Fermer " src="../Fiches_pottok/fermer.gif" onclick="voirSelect('visible');gdim.style.display='none'" style="margin: 1px; cursor: default; position: absolute; right: 0pt; top: 0pt;" height="8" width="16" />                     
</div>                     
          <img style="border: 0pt none ; margin: 1px;" />                 
</div>
<h4 align="center"> Ator Ator</h4>
<table border="0" cellspacing="0" align="center" width="60%">
<tr> 
<td> 
<audio controls>
	<source src="/Downloads/Musiques/Chants/Ator_Ator.mp3" type="audio/mpeg">
	<source src="/Downloads/Musiques/Chants/Ator_Ator.wma" type="audio/wma">
	Votre navigateur ne supporte pas la balise audio.
</audio>
</td>
</tr>
</table>