From a6081c2b65b0463fdc640875833527f41fa9ded6 Mon Sep 17 00:00:00 2001
From: undisclosed
Date: Sun, 22 Jan 2023 16:11:12 +0000
Subject: [PATCH] Erste Version fertig: JavaScript-Player fuer 'hier spielen' bei Abspiellisten
---
src/de/uhilger/tango/api/ListHandler.java | 28 ++++++++
www/js/app.js | 133 ++++++++++++-------------------------------
2 files changed, 64 insertions(+), 97 deletions(-)
diff --git a/src/de/uhilger/tango/api/ListHandler.java b/src/de/uhilger/tango/api/ListHandler.java
index 0cd7b3b..c3ab471 100644
--- a/src/de/uhilger/tango/api/ListHandler.java
+++ b/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
diff --git a/www/js/app.js b/www/js/app.js
index e083851..a21de07 100644
--- a/www/js/app.js
+++ b/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;
};
--
Gitblit v1.9.3