Experimentell: JavaScript-Player fuer 'hier spielen' bei Abspiellisten

undisclosed

2023-01-22 f9dd4f3a00efe7581e9bd620a9b968f122090f7a

Experimentell: JavaScript-Player fuer 'hier spielen' bei Abspiellisten

 www/data/tpl/titel_liste.txt

@@ -2,7 +2,7 @@
<div class='entity-formular'>
  <ul class='entity-liste'>
    {{#titel}}
    <li class='entity-eintrag' draggable='true'>{{interpret}}: {{titelAnzName}}</li>
    <li class='entity-eintrag' draggable='true' data-kat='{{katalogUrl}}' data-pfad='{{pfad}}' data-datei='{{name}}'>{{interpret}}: {{titelAnzName}}</li>
    {{/titel}}
  </ul>
</div>

 www/js/app.js

@@ -7,6 +7,10 @@
  //var katUrl;
  //var selTitel;
  var katName;
  var playingIndex;
  var audioCtx;
  var playState; // 'pause' oder 'play' oder 'stop'
  var audioElem;

  this.init = function () {
    self.mediaPfad = '/';
@@ -36,7 +40,7 @@
    
    self.fusszeile_umschalten();
    self.seitenleiste_umschalten();
    self.dialog_unten_zeigen();
    self.dialog_unten_zeigen();    
  };
    
  /* ---------------- Entitaets-Listen ----------------- */
@@ -490,12 +494,43 @@
  };
  
  this.kommando = function(kommando) {
    var abs = document.querySelector('#abspieler').value;
    self.http_get('api/strg/' + abs + '/' + kommando, function(responseText) {
      if(kommando !== 'volup' && kommando !== 'voldn') {
        self.meldung_mit_timeout(responseText, 1500);
    console.log(kommando);
    if(self.playingIndex > -1) {
      //const audioElements = document.querySelectorAll('.entity-eintrag');
      //const audioElements = document.querySelectorAll("audio");
      //const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      //const track = self.audioCtx.createMediaElementSource(audioElements[self.playingIndex]);
      //track.connect(self.audioCtx.destination);
      if(kommando === 'stop') {
        self.audioElem.pause();
        self.audioElem.currentTime = 0;
        self.audioElem.removeEventListener("ended", self.nextTrack);
        self.playingIndex = -1;
        self.playState = 'stop';
      } else if(kommando === 'pause') {
        if(self.playState === 'pause') {
          self.playState = 'play';
          self.audioElem.play();
        } else if(self.playState === 'play') {
          self.playState = 'pause';
          self.audioElem.pause();
        }
      } else if(kommando === 'play') {
        if(self.playingIndex < 0) {
          self.nextTrack();
        } else {
          self.audioElem.play();
        }
        self.playState = 'play';
      }
    });
    } else {
      var abs = document.querySelector('#abspieler').value;
      self.http_get('api/strg/' + abs + '/' + kommando, function(responseText) {
        if(kommando !== 'volup' && kommando !== 'voldn') {
          self.meldung_mit_timeout(responseText, 1500);
        }
      });
    }
  };
  
  this.hier_spielen = function() {
@@ -530,12 +565,115 @@
      // hier noch URL fuer Stream der Abspielliste abrufen
      // Es muss auch noch die Funktion auf dem Server gabut werden, die 
      // eine Abspielliste als Stream liefert
      url = 'Stream fuer Abspielliste ' + lst + ' noch nicht gebaut.';
      //url = 'Stream fuer Abspielliste ' + lst + ' noch nicht gebaut.';
      //self.hier_spielen_liste();
      self.playingIndex = -1;
      self.nextTrack();
    }
    console.log('url: ' + url);
    //console.log('url: ' + url);
    //window.open(url);
  };  
  
  this.hier_spielen_liste = function() {
    const elements = document.querySelectorAll('.entity-eintrag');

    //var i = 0;
    //var ersterTitel;
    //elements.forEach(function (element) {
    //  const attr = element.attributes;
    //  var titel = host + attr.getNamedItem('data-kat').value + 
    //          attr.getNamedItem('data-pfad').value + attr.getNamedItem('data-datei').value;
    //  console.log(titel);
      // + element.data-pfad + element.data-datei);
    //  if(i++ === 0) {
    //    ersterTitel = titel;
    //  }
    //});
    
    
    // Web Audio API Player ab hier
    
    //const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    //const AudioContext = window.AudioContext || window.webkitAudioContext;
    //const audioContext = new AudioContext();    
    
    // get the audio elements
    self.playingIndex = -1;
    //const audioElements = document.querySelectorAll("audio");

    // pass it into the audio context
    //const track = audioCtx.createMediaElementSource(audioElements[self.playingIndex]);
    //track.connect(audioCtx.destination);
    
    //audioElements[self.playingIndex].addEventListener(
    //  "ended",
    //  () => {
    //    
    //  },
    //  false
    //);    
    
    //audioElements[self.playingIndex].play();
    self.nextTrack();
  };
  
  this.nextTrack = function() {
    // ...
    // mySound = new Audio('sound.mp3');
    // mySound.play()
    // const audioElements = document.querySelectorAll("audio");
    const audioElements = document.querySelectorAll('.entity-eintrag');
    
    
    
    if(self.playingIndex > -1) {
      self.audioElem.removeEventListener("ended", self.nextTrack);
      //audioElements[self.playingIndex].removeEventListener("ended", self.nextTrack);
      //const element = audioElements[self.playingIndex];
      //const attr = element.attributes;
      //var titel = host + attr.getNamedItem('data-kat').value + 
      //        attr.getNamedItem('data-pfad').value + attr.getNamedItem('data-datei').value;
      //const titelElem = new Audio(titel);        
    }
    // <audio class='audio-elem' src='/tango{{katalogUrl}}{{pfad}}{{name}}'></audio>
    self.playingIndex++;
    if(self.playingIndex < audioElements.length) {
      //const element = audioElements[self.playingIndex];
      //const attr = element.attributes;
      //var titel = host + attr.getNamedItem('data-kat').value + 
      //        attr.getNamedItem('data-pfad').value + attr.getNamedItem('data-datei').value;
      const titel = self.getTitelFromAudioElement(audioElements, self.playingIndex);
      console.log("titel: " + titel);
      //const titelElem = new Audio(titel);        
      self.audioElem = new Audio(titel);
      
      self.audioElem.addEventListener("ended", self.nextTrack);
      self.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      const track = self.audioCtx.createMediaElementSource(self.audioElem);
      track.connect(self.audioCtx.destination);
      self.audioElem.play();
      self.playState = 'play';
      
      
      //const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
  };
  
  this.getTitelFromAudioElement = function(audioElements, index) {
    //const audioElements = document.querySelectorAll('.entity-eintrag');
    const host = 'http://' + window.location.host + '/tango';
    const element = audioElements[index];
    const attr = element.attributes;
    const titel = host + attr.getNamedItem('data-kat').value + 
              attr.getNamedItem('data-pfad').value + attr.getNamedItem('data-datei').value;
    return titel;
  };
  
  this.stop_liste_hier = function() {
    
  };
  
  this.gehe_zu_dialog_zeigen = function () {
    self.dialog_laden_und_zeigen('data/tpl/gehe-zu.txt', '', function(){
      const form = document.querySelector('form');