[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, gdrcd e open source

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?

Stargate Command Online
Da ben 12 anni attraversiamo lo Stargate ogni giorno. Unisciti a noi! SGCOnline.it, la tua avventura inizia qui!

Risposte alla discussione

Pagine → 1

kgviigdr

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 :)

Magic: The Gathering Arena
Magic: The Gathering Arena è un autentico gioco di Magic scaricabile gratuitamente e riprodotto in versione digitale per giocatori e fan!

damnedqueen89

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!

World of Tanks
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

kgviigdr

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).

Elvenar
Da un piccolo villaggio a una potente città: nel gioco fantasy online Elvenar dovrai raccogliere risorse per potenziare e far crescere gli edifici...

damnedqueen89

06/11/2018 01:38:22

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:

<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>

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; }'

RAID Shadow Legends
Plasma i tuoi eroi fino a farli diventare vere e proprie armi viventi e assembla i più epici gruppi d'assalto mai visti finora!

Modificato il 06/11/2018 12:41:25 da damnedqueen89

damnedqueen89

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:

<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>