From f9dd4f3a00efe7581e9bd620a9b968f122090f7a Mon Sep 17 00:00:00 2001
From: undisclosed
Date: Sun, 22 Jan 2023 13:50:46 +0000
Subject: [PATCH] Experimentell: JavaScript-Player fuer 'hier spielen' bei Abspiellisten
---
www/data/tpl/titel_liste.txt | 2
www/js/app.js | 154 ++++++++++++++++++++++++++++++++++++++++++++++++--
2 files changed, 147 insertions(+), 9 deletions(-)
diff --git a/www/data/tpl/titel_liste.txt b/www/data/tpl/titel_liste.txt
index 9e3cd3b..37eba02 100644
--- a/www/data/tpl/titel_liste.txt
+++ b/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>
diff --git a/www/js/app.js b/www/js/app.js
index 9b634bb..fa85ba9 100644
--- a/www/js/app.js
+++ b/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');
--
Gitblit v1.9.3