Hogyan csináljam meg, hogy több mp3-at játsszon le az <audio> tag javascriptben?

Előre leszögezném, hogy vagyok túl jó HTML5+Javascriptben (sem :D), ezért lehet, hogy van szebb megoldás is.

Szerintem annak működnie kellene, hogy készítesz az audio tag mellé valamiféle nyomógombot, és onclick eseményre lecseréled a src-t a következő számra. Esetleg megcsinálod ugyanezt egy vissza gombbal is.

Alapvetően az a hibád, hogy egy tagnak nem lehet két egyforma nevű tulajdonsága (jelen esetben src). Tehát a böngésző a másodikat figyelmen kívül hagyja.

Ha nem szeretnél te válogatni közöttük, csak egy végtelenített egymás utáni lejátszást szeretnél, ez a kód (elvileg) fog működni. Igyekeztem érhetően kommentelni, ha valami nem világos a működésével kapcsolatban, írj nyugodtan.

<audio id="lejatszo" controls autoplay>

<source src="zene1.mp3" type="audio/mpeg">

Ezt akkor írja ki, ha nincs támogatva a lejátszó.

</audio>

<script type="text/javascript">

var lejatszo = document.getElementById("lejatszo"); //elkeri a lejatszot

var lista = ["zene2.mp3","zene3.mp3","zene4.mp3","zene1.mp3"]; //zenek listaja (bovitheto)

var sorszam=0; //lejatszott zene sorszama

var meret=lista.length; //zenek szama

lejatszo.addEventListener('ended',function(){ //zene veget lejatszo esemenyfigyelo

lejatszo.src = lista[sorszam]; //megadja a kovetkezo zene cimet src-kent

lejatszo.pause(); //leallitja a jelenlegit

lejatszo.load(); //betolti a kovetkezot

lejatszo.play(); //lejatssza

sorszam++; //noveljuk a lejatszas utan kovetkezot

sorszam=sorszam%meret; //vegtelenitett:

});

</script>