[RISOLTO - GDRCD 5.4.1] Lettore musicale e autoplay

[RISOLTO - GDRCD 5.4.1] Lettore musicale e autoplay postato il 05/11/2018 18:03:34 nel forum programmazione, open source e hosting e modificato da damnedqueen89 il 06/11/2018 12:41:00

Buonasera!
Scrivo qui di seguito perchè sono incappata in un problema che mi sta mandando ai matti da un paio di mesi e non sapendo più che pesci pigliare, magari qui qualcuno mi può illuminare su dove stia il problema!

Ho inserito il lettore musicale in scheda - inizialmente avevo usato un lettorino che pretende l'attivazione del flash ed era tutto molto macchinoso - e ho utilizzato un lettore Audiojs.

Tralasciando le peripezie per capire dove dovevo toccare per cambiare l'interfaccia grafica, alla fine il lettorino è pronto e lo lancio sul mio sito di prova ed è qui che arriva il problema.

Se io nel mio codice php inserisco:

<audio src="<?php echo $record['url_media']; ?>" preload="auto" autoplay></audio>

Al momento del caricamento della scheda l'audio parte alla grande, MA se premo pausa nel lettore la musica continua a farsi sentire e se premo di nuovo play questa è come se si sdoppiasse, quindi è come se ci fossero due tracce audio identiche che si sovrappongono.

Ho provato a mettere tutte le versioni dell'autoplay, quali autoplay, autoplay="autoplay", autoplay="true" oppure autoplay="auto" e il problema è che la musica continua a sdoppiarsi e il tasto pausa non ha alcuna utilità perchè ne ferma sempre e solo una.

Come faccio a far funzionare l'autoplay e stoppare la musica del tutto quando ne ho bisogno?

05/11/2018 21:17:52

è possibile avere anche il codice del lettorino? che il problema sarà lì. Il codice da te messo carica solamente l'audio, quindi non ha colpe :)

05/11/2018 21:52:35

Grazie infinite per la tua risposta intanto!
Immaginavo che il problema fosse nella pagina del js, ti lascio il link qui di seguito del sito dove l'ho preso che è identico al mio perchè la formattazione è un malloppo tale che sforma tutto il sito: https://github.com/kolber/audiojs/blob/master/audiojs/audio.min.js ↗

Essendo fortemente ignorante, io ho sistemato solo il CSS, il resto non l'ho minimamente toccato per evitare di fare danni!

06/11/2018 01:06:55

Scusa per il ritardo. Allora ho provato a far partire il lettorino e funziona senza problemi (mette tranquillamente in pausa, riparte senza "doppi suoni" ecc), quindi il problema sarà qualche tua modifica.
Potresti condividere il codice della scheda e le modifiche che hai fatto al css? (penso che tu le abbia fatto dentro " audio.js " quindi se puoi condividi anche quel file).

06/11/2018 01:38:22 e modificato da damnedqueen89 il 06/11/2018 12:41:25

Ma ti pare, figurati, nessun problema!

Senza mettere nel codice l'autoplay il lettorino mi funziona perfettamente, il problema è proprio l'autoplay che da quell'effetto.

Comunque in scheda.inc.php l'aggiunta del lettorino è la seguente:

<!-- LETTORE MP3 -->
<script src="/Audio/js/audio.min.js"></script>

<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>

<center><audio src="<?php echo $record['url_media']; ?>" preload autoplay></audio></center>


<!-- FINE LETTORE MP3 -->

Mente il css è tutto sto pappocchio qua, nel caso serva te lo lascio qui:

css:' .audiojs audio { position: absolute; left: -1px; }
.audiojs { width: 270px; height: 36px; background: #0c0a09; overflow: hidden; font-family: tahoma; font-size: 11px; background-color: #0c0a09 !important; -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); -o-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); }
.audiojs .play-pause { width: 25px; height: 30px; color:#555555; padding: 4px 6px; margin: 0px; margin-left:-5px; margin-right:-10px; float: left; overflow: hidden; }
.audiojs p { display: none; width: 25px; height: 30px; margin: 0px; cursor: pointer; }
.audiojs .play { display: block; }
.audiojs .scrubber { position: relative; float: left; width: 140px; background: #555555; height: 8px; margin: 10px; margin-top:14px; margin-left:7px; margin-right:2px; border-top: 0px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; }
.audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #888888; z-index: 1; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #919090), color-stop(0.5, #787878), color-stop(0.51, #919090), color-stop(1, #919090)); background-image: -moz-linear-gradient(center top, #919090 0%, #787878 50%, #919090 51%, #919090 100%); }
.audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222)); background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
.audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 1px 0px 4px; color: #555555; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }
.audiojs .time em { padding: 0px 2px 0px 0px; color: #555555; font-style: normal; }
.audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; }
.audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #555555; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
.audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }
.audiojs .play { background: url("$1") -2px -1px no-repeat; }
.audiojs .loading { background: url("$1") -2px -31px no-repeat; }
.audiojs .error { background: url("$1") -2px -61px no-repeat; }
.audiojs .pause { background: url("$1") -2px -91px no-repeat; }
.playing .play, .playing .loading, .playing .error { display: none; }
.playing .pause { display: block; }
.loading .play, .loading .pause, .loading .error { display: none; }
.loading .loading { display: block; }
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; }
.error .error { display: block; }
.error .play-pause p { cursor: auto; }
.error .error-message { display: block; }'

06/11/2018 12:40:27

Ho trovato l'errore, nel caso qualcuno avesse lo stesso problema lascio qui di seguito la soluzione.

Premetto che secondo me c'è anche lo zampino di Cloudfare perchè anche ripulendo costantemente le cache, ci metteva un po' a mostrarmi l'effettivo cambiamento nel JS, comunque la soluzione che io ho trovato è proprio inerente al file audio.min.js:

Da questo:

settings:{autoplay:false,loop:false,preload:true,

L'ho messo così:

settings:{autoplay:true,loop:false,preload:true,

mentre nella scheda.inc.php il codice del lettore è il seguente:

<!-- LETTORE MP3 -->
<script src="/Audio/js/audio.min.js"></script>

<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>

<center><audio src="<?php echo $record['url_media']; ?>" preload="auto"></audio></center>


<!-- FINE LETTORE MP3 -->

E ora funziona tutto perfettamente, ringraziato sentitamente kgviigdr per avermi sopportata in questo thread <3

26/09/2019 20:59:22

Seguo la discussione..