Erste Version fertig: JavaScript-Player fuer 'hier spielen' bei Abspiellisten

undisclosed

2023-01-22 a6081c2b65b0463fdc640875833527f41fa9ded6

Erste Version fertig: JavaScript-Player fuer 'hier spielen' bei Abspiellisten

 src/de/uhilger/tango/api/ListHandler.java

@@ -34,11 +34,13 @@
 * Der ListHandler bearbeitet HTTP-Anfragen zu Abspiellisten
 * 
 * GET /mz/api/alist/[pl-name]          die Titel-Objekte der Liste [pl-name] liefern
 * GET /mz/api/alist/[pl-name]/m3u      eine einfache Playlist im M3U-Format ausgeben
 * GET /mz/api/alist/[pl-name]/[nr]     den Titel mit der Nummer [nr] abrufen
 * 
 * PUT /mz/api/alist/[pl-name]          den Titel im Body anfuegen an die Liste [pl-name]
 * PUT /mz/api/alist/[pl-name]/[nr]     an der Position nr der Liste [pl-name] den Titel im Body einfuegen
 * PUT /mz/api/alist/[pl-name]/[nrVon]/[nrNach]   den Titel von seiner aktuellen Position an eine 
 *                                                 andere Position der Liste [pl-name] verschieben
 * GET /mz/api/alist/[pl-name]/m3u
 * DELETE /mz/api/alist/[pl-name]/[nr]  den Titel an der Position [nr] aus der Liste [pl-name] entfernen  
 * DELETE /mz/api/alist/[pl-name]/alle  alle Titel aus der Liste [pl-name] entfernen  
 * 
@@ -71,7 +73,12 @@
        headers.add("Content-Type", "application/m3u");
        return getM3u(e, elems[4]);
      } else {
        return "ungueltig";
        try {
          int index = Integer.parseInt(elems[5]);
          return getTitel(elems[4], index);
        } catch(NumberFormatException ex) {
          return "ungueltig";
        }
      }
    } else {
      String plname = elems[elems.length - 1];
@@ -122,6 +129,23 @@
    return response;
  }
  
  private String getTitel(String plname, int index) {
    FileStorage fs = new FileStorage(conf);
    Entity entity = fs.read(FileStorage.ST_ABSPIELLISTE, plname);
    String response = "eom";
    if(entity instanceof Abspielliste) {
      Abspielliste aliste = (Abspielliste) entity;
      //String titelJson = bodyLesen(e);
      List<Titel> titelListe = aliste.getTitel();
      if(index < titelListe.size()) {
        Titel titel = aliste.getTitel().get(index);
        Gson gson = new Gson();
        response = gson.toJson(titel);
      }
    }
    return response;    
  }
  
  /**
   * Den Titel im Body von seiner aktuellen Position an die angegebene 
   * Position setzen. Der Titel an der angegebenen Position rueckt nach 

 www/js/app.js

@@ -11,6 +11,7 @@
  var audioCtx;
  var playState; // 'pause' oder 'play' oder 'stop'
  var audioElem;
  var playingList;

  this.init = function () {
    self.mediaPfad = '/';
@@ -496,11 +497,6 @@
  this.kommando = function(kommando) {
    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;
@@ -562,111 +558,58 @@
      console.log(
        "play playlist.value: " + document.querySelector('#playlist').value + 
        ", abspieler.value: " + document.querySelector('#abspieler').value);
      // 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.';
      //self.hier_spielen_liste();
      self.playingIndex = -1;
      self.nextTrack();
    }
    //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');
    /*
      
      {
        "katalogUrl":"/media",
        "pfad":"/Musik/M/Bruno-Mars/",
        "name":"04-Uptown-Funk.mp3",
        "interpret":"Mark Ronson feat Bruno Mars",
        "titelAnzName":"Uptown Funk",
        "album":"Uptown Special Explicit"
      }
    
    
    
     */
    //const plname = document.querySelector('#playlist').value;
    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);        
    } else {
      self.playingList = document.querySelector('#playlist').value;
    }
    // <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)();
    }
    const url = 'api/alist/' + self.playingList + "/" + self.playingIndex;
    self.http_get(url, function(responseText){
      if(responseText === 'eom') {
        // ende
        self.audioElem.removeEventListener("ended", self.nextTrack);
        self.playingIndex = -1;
        self.playState = 'stop';
      } else {
        const titel = JSON.parse(responseText);
        console.log("titel: " + titel.name);
        const titelUrl = self.getTitelFromJSONObj(titel);
        //const titelElem = new Audio(titel);        
        self.audioElem = new Audio(titelUrl);
        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';        
      }
    });
  };
  
  this.getTitelFromAudioElement = function(audioElements, index) {
  this.getTitelFromJSONObj = function(titelObj) {
    //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;
    const titel = host + titelObj.katalogUrl + titelObj.pfad + titelObj.name;
    return titel;
  };