¿Colocar varios reproductores de audio en una página?

<div id="Layer1"

 var audio = document.createElement('audio'),//-- creación del elemento AUDIO(dentro del DOM pero aún no incluido en la página) playlist = document.createElement('select'),//-- creación de un select tracks =[];//-- un array que retendrá los nombres de las pistas según el formato(mp3 y ogg) function ajoutPlaylist(mp3,ogg=null){//-- una función que llena el array tracks agregando cada vez un objeto que tiene dos atributos/valores: mp3: la URL del archivo mp3 y ogg la URL del archivo ogg tracks.push( {mp3:mp3, ogg:ogg} ) //-- un objeto en notación literal(o JSON) entre llaves } function loadAudio(listMp3, listOgg){//-- los parámetros son dos arrays de la misma dimensión(.length) for(var i=0, len=listMp3.length; i<len; i++){ let pisteM=listMp3[i] !==null ? listMp3[i] :null;//-- comparación ternaria equivalente a "si" de otro modo" pero en una línea con menos palabras //pisteM vale list[i].ogg o 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 indica la longitud(número de elementos) del array, - porque comienza en cero opt.innerHTML=tracks[tracks.length-1].mp3.substring(0, tracks[tracks.length-1].mp3.lastIndexOf('.') )//--corta la cadena para mantener solo lo que está antes del último '.' del nombre del archivo opt.setAttribute('value', i )//-- el atributo value contiene el índice del array tracks de la pista }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" >':''; //-- otra vez la notación ternaria de IF ELSE que es muy práctica una vez que uno se acostumbra var isOgg = tracks[index].ogg !==null ? '<source src='+tracks[index].ogg+' type="audio/ogg" >':''; //-- otra vez la notación ternaria de IF ELSE que es muy práctica una vez que uno se acostumbra audio.innerHTML=isMp3+''+isOgg } audio.id='lecteur' audio.controls=true;//-- activa los controles, equivalente en HTML a <audio controls > playlist.id='playlist' document.body.appendChild(audio)//-- agrega el elemento audio en la página document.body.appendChild(playlist)//-- agrega el elemento select en la página loadAudio(['canción0.mp3', 'canción1.mp3' , 'canción3.mp3'],['canción0.ogg', 'canción1.ogg' , 'canción2.ogg'] ) playlist.addEventListener('change',function(e){ console.log('opción cambiada: '+e.target.innerHTML) choixPiste(e.target.value) }) 

<!-- Inicio del cuadro de la ventana para el reproductor de audio en el pop up --> <script language="JavaScript" type="text/JavaScript"> //<![CDATA[ <!-- function MM_reloadPage(init) { //recarga la ventana si Nav4 se redimensiona 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 para mostrar imágenes a través de un enlace 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 = ""; } // Fin --> //]]> </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;">encabezado <img title=" Cerrar " 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"> Su navegador no soporta la etiqueta de audio. </audio> </td> </tr> </table>