Variablen angeblich in function nicht bekannt

[Linuchs]

Moin,

ich hatte das Muster einer Audio-Playlist versprochen.

var obj_audio;  // das Audio-Element
var arr_li;     // Array der li Elemente (Titel)
var lfd_nr;     // nr des ausgewaehlten li - Elements

function playTitel( nr ) {  // li - Nummer
  // playlist auf Anfang setzen
  if ( nr > arr_li.length ) nr  = 1;
  lfd_nr  = nr;

  // Titel und Kuenstler anzeigen
  document.getElementById( "lied_titel" ).innerHTML = arr_li[nr].innerHTML +"   " +arr_li[nr].getAttribute("data-gruppe");

  // source in den Player
  obj_audio.src           = arr_li[nr].getAttribute("data-src"); // Zeile 71

  // Player starten
  document.getElementById( "player" ).play();
}

Die drei Variablen sind noch nicht gefüllt. Kein Problem, solange playTitel nicht aufgerufen wird.

Nun ergänze ich den Code um

// Array der li Elemente
arr_li    = document.querySelectorAll("li");

// click event fuer jedes li Element
for ( let i=0; i<arr_li.length; i++ ) {
  arr_li[i].addEventListener('click', playTitel ( i ) );  
}

// das Audio-Objekt
obj_audio = document.getElementsByTagName("audio")[0];

// naechsten Titel spielen
obj_audio.addEventListener('ended', playTitel( lfd_nr +1 ) );

und bekomme den Fehler Uncaught TypeError: obj_audio is undefined, bezogen auf Zeile 71 in playTitel.

Wenn ich die addEventListener auskommentiere, kommt der Fehler nicht.

Habe auch die Reihenfolge der Zuordnungen vertauscht, ändert nichts am Fehler.

Was mache ich falsch?

Gruß, Linuchs