Mehrere Wiedergabe von Songs mit Audio-Tag und js

Question

Ich habe eine js Funktion wie folgt aus:

function riproduci(link) { 
var ar = link.split("*"); 
var s = ar[0]; 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if(this.readyState == 4 && this.status == 200) { 
    } 
}; 
xhttp.open("GET", "incremento.php?link="+s, true); 
xhttp.send(); 
audio.load(s); 
audio.play(); 
} 

Im Verbindungsparameter gibt eine Folge von Links mit dem Zeichen * getrennt ist, so gespalten i die Zeichenfolge in die verschiedene Links. Also, um zu versuchen, ich habe zu dem Audio-Skript die Verbindung 0 im Array gesendet, jetzt möchte ich Folgendes ausführen: Wenn ein Lied, ist fertig (so, etwas mit dem Ereignis onEnded()) zu gehen und das nächste zu nehmen verlinken und automatisch auf den Player laden. Ich habe keine Ahnung, wie ich auf den gerade beendeten Link zugreifen kann, um den nächsten auszuwählen.

Bitte beachten Sie nicht den Ajax-Code, der Teil der Funktion ist, der nicht mit der Frage, die ich Ihnen stelle, in Zusammenhang steht.

Answer 1

ich diese Funktion zu schreiben versuchte, die Anweisung auf der Grundlage gegebener:

function riproduci(link) { 
let i = 0; 
var ar = link.split("*"); 
var n = ar.length; 
var audio = document.querySelector("audio"); 
audio.addEventListener("ended", rp); 
audio.load(ar[0]); 
audio.play(); 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if(this.readyState == 4 && this.status == 200) { 
     document.getElementById("titolo").innerHTML = this.responseText; 
    } 
}; 
xhttp.open("GET", "incremento.php?link="+ar[0], true); 
xhttp.send(); 
function rp(e){ 
    i++; 
    i = (i >= n) ? 0 : i; 
    var l = ar[i]; 
    this.load(ar[i]); 
    this.play(); 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if(this.readyState == 4 && this.status == 200) { 
      document.getElementById("titolo").innerHTML = this.responseText; 
     } 
    }; 
    xhttp.open("GET", "incremento.php?link="+l, true); 
    xhttp.send(); 
    } 
} 

Aber ich weiß nicht, warum, es in eine Endlosschleife geht, beginnt es in der Folge der Verbindung alle Songs spielen übergeben aber in weniger als einer Sekunde von einem zum anderen gehen. Was ist los mit dir?

UPDATE: Der Player ist mit einem leeren Song von weniger als einer Sekunde geladen, wenn ich die riproduci() Funktion ausführe, ändert sich der src des Audio Tags nicht und der leere "Song" geht in eine Endlosschleife.

UPDATE 2: Dies ist mein Audio-Player.

<div id="pers_player_footer"> 
     <script src="../audiojs/audio.min.js"></script> 
     <script> 
      audiojs.events.ready(function() { 
      var as = audiojs.createAll(); 
      window.audio = as[0]; 
      }); 
     </script> 
     <audio id="audio" src="../songs/empty.mp3" autoplay='true'/> 
</div> 

UPDATE 3: Die aktualisierte Funktion

function riproduci(link) { 
var as = audiojs.createAll(); 
let i = 0; 
var ar = link.split("*"); 
var n = ar.length; 
var audio = document.querySelector("audio"); 
audio.addEventListener("ended", rp); 
audio.src = ar[0]; 
audio.load(); 
audio.play(); 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if(this.readyState == 4 && this.status == 200) { 
     document.getElementById("titolo").innerHTML = this.responseText; 
    } 
}; 
xhttp.open("GET", "incremento.php?link="+ar[0], true); 
xhttp.send(); 
function rp(e){ 
    i++; 
    i = (i >= n) ? 0 : i; 
    var l = ar[i]; 
    var as = audiojs.createAll(); 
    audio.src = ar[i]; 
    audio.load(); 
    audio.play(); 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if(this.readyState == 4 && this.status == 200) { 
      document.getElementById("titolo").innerHTML = this.responseText; 
     } 
    }; 
    xhttp.open("GET", "incremento.php?link="+l, true); 
    xhttp.send(); 
    } 
} 

Dies ist der Link, wo ich die Audio-Bibliothek gefunden: https://kolber.github.io/audiojs/