From a0ecf24dedf8ecde4630499274fa108e9eb1d8ff Mon Sep 17 00:00:00 2001 From: ulrich Date: Fri, 22 Nov 2024 08:21:50 +0000 Subject: [PATCH] Angaben in Readme praezisiert. --- www/js/app.js | 184 ++++++++++++++++++--------------------------- 1 files changed, 74 insertions(+), 110 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index fa85ba9..fafbd3d 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 = '/'; @@ -363,7 +364,10 @@ self.addEvtListener('#pause-btn', 'click', function() { self.kommando('pause'); }); - self.addEvtListener('#weiter-btn', 'click', self.weiter); + //self.addEvtListener('#weiter-btn', 'click', self.weiter); + self.addEvtListener('#weiter-btn', 'click', function() { + self.kommando('next'); + }); self.addEvtListener('#hier-btn', 'click', self.hier_spielen); @@ -481,32 +485,47 @@ } }; + /* + * DEPRECATED + */ this.weiter = function() { - var bereichName = document.querySelector('.bereich-name').textContent; - if(bereichName === '') { - var titel = self.titelErmitteln(document.querySelector(".selected")); - var playername = document.querySelector('#abspieler').value; - console.log('plname: ' + playername + ' url: ' + titel.katalogUrl + titel.pfad + titel.name); - self.http_post('api/strg/' + playername + '/weiter/titel', JSON.stringify(titel), function(responseText) { - self.meldung_mit_timeout(responseText, 1500); - }); - } + //var bereichName = document.querySelector('.bereich-name').textContent; + //if(bereichName === '') { + // var titel = self.titelErmitteln(document.querySelector(".selected")); + // var playername = document.querySelector('#abspieler').value; + // console.log('plname: ' + playername + ' url: ' + titel.katalogUrl + titel.pfad + titel.name); + // self.http_post('api/strg/' + playername + '/weiter/titel', JSON.stringify(titel), function(responseText) { + // self.meldung_mit_timeout(responseText, 1500); + // }); + //} }; + /* + * Ein Abspieler-Kommando ausfuehren. Der Client entscheidet anhand + * des Indikators self.playingIndex, ob 'hier spielen' gewaehlt wurde + * (playingIndex groesser -1) oder das Kommando an den Server gehen soll. + * + * self.kommendo('play') wird nur von der Schaltflaeche 'hier spielen' gerufen. + * Die Schaltflaeche Play ist mit self.play verknuepft (s.o.) und spielt Listen + * oder Titel ueber des Server und Calypso. + * + * @param {type} kommando stop, pause, next, play + * @returns nichts + */ 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; self.audioElem.removeEventListener("ended", self.nextTrack); self.playingIndex = -1; self.playState = 'stop'; + } else if(kommando === 'next') { + const curidx = self.playingIndex; + self.kommando('stop'); + self.playingIndex = curidx; + self.nextTrack(); } else if(kommando === 'pause') { if(self.playState === 'pause') { self.playState = 'play'; @@ -562,116 +581,56 @@ 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.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; - }; - - this.stop_liste_hier = function() { - }; this.gehe_zu_dialog_zeigen = function () { @@ -765,6 +724,11 @@ self.http_delete('api/alist/' + plname + '/' + index,'', function(responseText) { // DELETE http://localhost:9090/mz/api/alist/liste1/0 //self.meldung_mit_timeout(responseText, 1500); + if(self.playingList === plname) { + if(self.playingIndex > index) { + --self.playingIndex; + } + } self.titel_liste(); }); -- Gitblit v1.9.3