[Risolto] Il modulo va bene solo al primo giro

[kippo]

ciao
ho scritto un modulo joomla per un sito webradio, è un player che legge i file da una cartella e li riproduce
questo player ha un pulsante di accensione/spegnimento della radio; il problema è questo:
premo on e tutto ok: la radio canta
premo off, ok: la radio si ferma
a questo punto se premo di nuovo on la radio canta ma con risultati imprevedibili: salta le canzoni o le ripete più volte.
dando un'occhiata con firebug vedo che il flusso del programma non è più regolare ma sembra impazzito da lì ovviamente gli errori
in pratica funziona bene solo la prima volta, infatti se dopo lo stop ricarico la pagina tutto procede bene
questo è il modulo

<?php
function writemusic ($path) {
	$dir='Unknown';
	$arr=[];
	foreach (new DirectoryIterator($path) as $fileInfo) {
		if ($fileInfo->isDot()) continue;
		if ($fileInfo->isDir()) {
			$dir1=$fileInfo->getFilename();
			foreach (new DirectoryIterator($path.$dir1.DIRECTORY_SEPARATOR) as $fileInfo) {
				if ($fileInfo->isDot()) continue;
				if ($fileInfo->getFilename() != '') {
					array_push($arr, $dir1.'~'.$fileInfo->getFilename());
				}
			}
		}
		if ($fileInfo->getFilename() != '') {
			array_push($arr, $dir.'~'.$fileInfo->getFilename());
		}
	}
	$json = json_encode($arr);
	file_put_contents($path.'music.json', $json);
}

function getname ($s) {
	 $a = explode('~', $s);
	 if ($a[0] == 'Unknown') {
		$n = $a[1];
	 } else {
		$n = $a[0].DIRECTORY_SEPARATOR.$a[1];
	 }
	return ($n);
}

defined('_JEXEC') or die;
use Joomla\CMS\HTML\HTMLHelper;
$jpath = JPATH_SITE;
$jpath = rtrim($jpath, "/\\ \t\n\r\0\x0B");
$rpath = $params->get('music_folder').DIRECTORY_SEPARATOR;
$path = $jpath.DIRECTORY_SEPARATOR.$rpath;
if (!file_exists($path.'music.json')) {
	writemusic($path);
}
$str = file_get_contents($path.'music.json');
$aaa = json_decode($str,true);
$arr=[];
foreach ($aaa as $item) {
	$name=getname($item);
	array_push($arr, JUri::root().$rpath.$name);
}
$accp = JUri::root().'images'.DIRECTORY_SEPARATOR.'ggg.png';
$spep = JUri::root().'images'.DIRECTORY_SEPARATOR.'eee.png';

?>
<div id="audio-player">
<div id="audio-info"><div class="scrolltext"><span id="title" class="title"></span>
</div>
</div>
<audio id="rvAudio">
<source src="">
</audio>

<div class="volume">
<label id="vol">Volume   </label>
<input id="volume" class="volume" type="range" min="0" max="10" value="10">
</div>
<button title="Accendi la Vampira" id="autoplay-button"><img id="api" src="<?php echo $accp; ?>"></button>

<script>
var audioPlayer = document.getElementById("rvAudio");
var autoplayButton = document.getElementById("autoplay-button");
var volumeSlider = document.getElementById("volume");
var track = 0;
<?php echo "var jjj = ". json_encode($arr) . ";\n";
echo "var accp = ". json_encode("<img id=\"api\" src=\"$accp\">") . ";\n";
echo "var spep = ". json_encode("<img id=\"api\" src=\"$spep\">") . ";\n";
echo "var rp = ". json_encode($rpath) . ";\n";
echo "var ds = ". json_encode(DIRECTORY_SEPARATOR) . ";\n"; ?>
var arr=[];
for (var i=0;i<jjj.length;i++) {arr[i]=i;}
var ooo=arr.slice();
var r=-1;
var l=arr.length;
var title = '';
var ars = '';
var arp = '';
var ttt = '';

function autoplayTracks() {
	playTrack();
	audioPlayer.addEventListener("ended", function() {
	playTrack();
	});
}

function playTrack() {
	r=Math.floor((Math.random()*l));
	track = arr[r];
	arr.splice(r,1);
	l=arr.length;
	if (l == 0) {
		arr=ooo.slice();
	}
	audioPlayer.currentTime = 0;
	audioPlayer.src = jjj[track];
	title = audioPlayer.src;
	audioPlayer.play();
	ars = title.split(ds);
	arp = rp.split(ds);
	if (ars[ars.length-2] == arp[arp.length-2]) {
		title = 'Unknown - ' + ars[ars.length-1];
	} else {
		title = ars[ars.length-2] + ' - ' + ars[ars.length-1];
	}
	ttt=title.replace(/\.[^/.]+$/, "");
	ttt=decodeURI(ttt);
	if (document.getElementById("title") !== null) {
		document.querySelector('.title').textContent = ttt;
	}
}

function stopTrack() {
	audioPlayer.pause();
	audioPlayer.currentTime = 0;
	audioPlayer.src = '';
}

autoplayButton.addEventListener("click", function() {
	if (autoplayButton.innerHTML == accp) {
		autoplayButton.innerHTML = spep;
		autoplayButton.title = "Spegni la Vampira";
		arr=ooo.slice();
		r=-1;
		l=arr.length;
		autoplayTracks();
	} else {
		autoplayButton.innerHTML = accp;
		autoplayButton.title = "Accendi la Vampira";
		stopTrack();
		location.reload();
	}
});

volumeSlider.addEventListener("input", function() {audioPlayer.volume = this.value/10;});
</script>

voglio far notare che il modulo se lanciato da solo funziona perfettamente, è solo quando è integrato con joomla che succede questo
non so cosa dovrei resettare dopo lo stop.

In realta' una soluzione l'avrei trovata: basta ricaricare la pagina allo stop ma li' poi c'e' un altro inghippo: per un attimo
esce fuori l'icona broken img sul bottone on/off. Quindi le domande sono 2:
1 - perche' joomla si impiccia al secondo giro del modulo?
2 - come eliminare l'icona broken img in tutto il sito? perche' da dentro il modulo non ha effetto (gia' provato)
grazie

ps il modulo ha anche un main chiamante ed un xml ditemi se postare anche' quelli

[jabba]

hai dei sistemi di cache attivi o un qualche plugin che ottimizza / va a toccare i javascript (tipo un plugin di ottimizzazione come jch)?

Dovrei fare qualche prova più approfondita però forse devi rimuovere e rimettere ogni volta l'event listener "ended" perchè viene aggiunto tutte le volte che clicchi play, e forse manda tutto in confusione perchè crea più istanze. Prova a modificare queste due funzioni:

function stopTrack() {
    audioPlayer.pause();
    audioPlayer.currentTime = 0;
    audioPlayer.src = '';
    audioPlayer.removeEventListener("ended", playTrack);
}

function autoplayTracks() {
    playTrack();
    audioPlayer.removeEventListener("ended", playTrack);
    audioPlayer.addEventListener("ended", playTrack);
}

[kippo]

grazie mille era proprio addEventListener che faceva casino (in effetti add significa add)
devo ancora mangiare fagioli e js
a proposito uno dei 2 remove non e' ridondante?
bene a sto punto la domanda 2 e' inutile
ho un'altra curiosita' ma apriro' un altro post
grazie ancora

[jabba]

@kippo ha detto in Il modulo va bene solo al primo giro:

grazie mille era proprio addEventListener che faceva casino (in effetti add significa add)
devo ancora mangiare fagioli e js
a proposito uno dei 2 remove non e' ridondante?
bene a sto punto la domanda 2 e' inutile
ho un'altra curiosita' ma apriro' un altro post
grazie ancora

si potrebbe essere ridondande, mi dovrei studiare per bene il codice ma farlo così a secco è complesso. Ad ogni modo l'idea è quella di non lasciare e lanciare più EventListener in contemporanea perchè possono crearti delle "code" di eventi che poi vanno a sovrapporsi, spero sia più o meno chiaro

[kippo]

e' tutto chiarissimo
grazie ancora