Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 21

Hybrid View

  1. #1

    Gallerific e riproduzione file midi

    Ciao a tutti,

    sono una neoiscritta e vi sottopongo il mio problema.

    Ho realizzato una semplice galleria fotografica utilizzando il template gratuito photoartwork2.

    Qui la demo: http://www.css3templates.co.uk/templ...rk2/index.html
    Qui il download del template: http://www.freewebtemplates.com/down...rk2-349888147/

    La galleria fa uso del plugin per jQuery GALLERIFIC per realizzare uno slideshow con miniature ed effetto dissolvenza.

    Chi ha visitato il sito mi ha fatto notare che manca un sottofondo musicale, che renderebbe più gradevole la presentazione fotografica.

    Il sottofondo musicale (e qui per me viene il difficile) dovrebbe attivarsi SOLO quando inizia la presentazione, cioè quando viene premuto il tasto "play slideshow" e dovrebbe arrestarsi alla pressione del tasto "pause slideshow".

    Ho cercato ovunque, qui sul forum e altrove, senza trovare soluzione.

    Qualcuno saprebbe dirmi come implementare questa funzione?
    Grazie per l'attenzione.

    Elena

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Ciao e benvenuta sul forum.

    La soluzione non è così semplice, ancora meno se non si ha dimestichezza con JavaScript/jQuery con cui è realizzato quello slideshow che oltretutto (da quello che ho potuto constatare) non è strutturato per apportare facilmente quel tipo di personalizzazione. Infatti, a differenza di altri vari parametri che è possibile impostare nella inizializzazione dell'oggetto gallery direttamente sulla pagina html, le funzioni (play e pause), che controllano l'esecuzione dello slideshow, non hanno un callback e tantomeno sono personalizzabili, se non intervenendo per vie traverse.

    Chiaramente si può risolvere comunque in vari modi.

    Per il sottofondo musicale ti propongo di optare per un più comodo mp3 supportato dal tag <audio>, magari un mp3 non troppo pesante... (i midi come sottofondo sui siti non li sento più da quando è decaduta la lira).

    Ti posto uno script che dovrai inserire nella/e pagina/e dove è presente lo slideshow:
    codice:
          var bgsound = $("<audio></audio>").attr({           // creo l'oggetto audio
              src: "tuo_file_audio.mp3"                       // url del file mp3
            , loop: "loop"                                    // ripetizione continua
          }).appendTo("body");                                // appendo l'elemento al body
          bgsound.run = function(run){                        // funzione per eseguire play/pause sull'audio
            run&&this[0].play();                              // se run=true, eseguo l'audio
            this.stop().animate({volume: run?1:0}             // eseguo una dissolvenza del volume
              , 1500                                          // millisecondi per la dissolvenza
              , function(){!run&&this.pause();}               // al termine della dissolvenza, se run=false, fermo l'audio
            );
          }
          bgsound.run(gallery.isSlideshowRunning);            // eseguo subito l'audio se lo slideshow è impostato con autoStart=true
          gallery.default_play = gallery.play;                // creo una copia della funzione play dello slideshow
          gallery.default_pause = gallery.pause;              // creo una copia della funzione pause dello slideshow
          gallery.play = function(){gallery.default_play();bgsound.run(true)};    // aggiungo la funzione per eseguire l'audio sul play dello slideshow
          gallery.pause = function(){gallery.default_pause();bgsound.run(false)}; // aggiungo la funzione per fermare l'audio sulla pausa dello slideshow
    Ho cercato di commentare al meglio, per chi volesse capirne la logica di funzionamento.

    Esattamente va inserito dentro la funzione jQuery(document).ready che sta in fondo al body. Devi inserirlo necessariamente dopo l'inizializzazione della gallery.
    In pratica (prendendo come riferimento il file portfolio_one.html) va inserito appena prima di queste righe alla fine della pagina:
    codice:
        });
      </script>
    </body>
    </html>
    Chiaramente dovrai specificare l'attributo src (nella seconda riga dello script) con il giusto url del tuo mp3.

    Spero possa andare bene.
    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao e benvenuta sul forum. Ti posto uno script che dovrai inserire nella/e pagina/e dove è presente lo slideshow: Spero possa andare bene.
    Ciao KillerWorm e grazie per l'aiuto. Spero anch'io che il tuo script funzioni. Ti terrò senz'altro informato... Grazie ancora per avermi dedicato un po' del tuo tempo. Un saluto cordiale, Elena

  4. #4
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ti posto uno script che dovrai inserire nella/e pagina/e dove è presente lo slideshow:
    Ciao KillerWorm,

    il tuo script è ECCEZIONALE: ha funzionato al primo colpo!
    Ti rinnovo i miei complimenti per la tua competenza e ti ringrazio ancora per la tua disponibilità.

    Ma, c'è un ma...

    Lo script va benone con i browser Chrome e Firefox, ma non funziona con Internet Explorer.
    Il problema è che, utilizzando IE, non solo l'audio non viene riprodotto (sarebbe il meno male), ma viene segnalato un "errore nella visualizzazione della pagina" e lo slideshow non funziona più.

    Il dettaglio dell'errore segnalato da Windows Internet Explorer riporta: "Proprietà o metodo non supportati dall'oggetto" con riferimento alle seguenti linee:

    src: "audio/audio.mp3" (linea 178)
    bgsound.run = function(run){ (linea 181)

    Ho utilizzato 5 differenti PC con differenti versioni di Internet Expolorer, riscontrando sempre il medesimo errore. Mi daresti una dritta per risolvere anche questo problema?

    Grazie ancora per la tua disponibilità.

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Proviamo una diversa disposizione.

    Inserisci questo codice HTML alla fine del body:
    codice HTML:
    <audio loop id="bgsound"><source src="audio/audio.mp3" type="audio/mpeg"></audio>
    Sostituisci la parte jQuery con questo script:
    codice:
          var bgsound = $("#bgsound");                        // oggetto audio
          bgsound.run = function(run){                        // funzione per eseguire play/pause sull'audio
            run&&this[0].play();                              // se run=true, eseguo l'audio
            this.stop().animate({volume: run?1:0}             // eseguo una dissolvenza del volume
              , 1500                                          // millisecondi per la dissolvenza
              , function(){!run&&this.pause();}               // al termine della dissolvenza, se run=false, fermo l'audio
            );
          }
          bgsound.run(gallery.isSlideshowRunning);            // eseguo subito l'audio se lo slideshow è impostato con autoStart=true
          gallery.default_play = gallery.play;                // creo una copia della funzione play dello slideshow
          gallery.default_pause = gallery.pause;              // creo una copia della funzione pause dello slideshow
          gallery.play = function(){gallery.default_play();bgsound.run(true)};    // aggiungo la funzione per eseguire l'audio sul play dello slideshow
          gallery.pause = function(){gallery.default_pause();bgsound.run(false)}; // aggiungo la funzione per fermare l'audio sulla pausa dello slideshow
    Per la cronaca, rispetto all'altro metodo, ho inserito il tag direttamente come html anziché crearlo al volo attraverso jQuery. Inoltre ho utilizzato il tag <source> con i relativi attributi (anziché il solo tag <audio>).

    Da quanto ho provato, personalmente entrambi i metodi mi funzionano allo stesso modo e su tutti i browser su cui ho testato (FF, CH, IE9), ma non riscontrando l'errore non ho idea se in questo modo ci sia qualche differenza su qualche altra versione di IE.

    Fammi sapere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Proviamo una diversa disposizione.
    Ho sostituito il codice secondo le tue indicazioni. Stesso risultato: errore nella visualizzazione della pagina, l'audio non viene riprodotto e lo slideshow non si avvia.

    Se, come dici, con IE9 non si verificano problemi (a parte l'audio non riprodotto), verosimilmente il messaggio di errore è dovuto al browser obsoleto. D'altra parte cambiare browser non risolverebbe il problema, perchè buona parte dei miei visitatori utilizza ancora una vecchia versione di IE (lo vedo da StatCounter).

    Forse bisognerebbe implementare l'audio senza utilizzare i tag specifici di html5. Pensi che sia possibile?

    Grazie, grazie, grazie, grazie ancora per l'aiuto...

  7. #7
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,812
    Quote Originariamente inviata da Elena1986 Visualizza il messaggio
    Forse bisognerebbe implementare l'audio senza utilizzare i tag specifici di html5.
    se prendete questa strada aprite pure un'altra discussione nella sezione (x)html


  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Ho sostituito il codice secondo le tue indicazioni. Stesso risultato: errore nella visualizzazione della pagina, l'audio non viene riprodotto e lo slideshow non si avvia.
    Sì, ho verificato anche io. Il tag audio, non essendo supportato da versioni di IE precedenti alla 9 (come indicava anche Vincent) fa verificare degli errori.

    Riguardo l'audio non riprodotto su IE9, ho fatto qualche interessante scoperta. Tra i vari test ho provato a far riprodurre esattamente il file mp3 presente nella tua pagina. Il problema sta proprio su quel file. Mentre con diversi altri file, con cui ho provato, funziona tutto regolarmente, col file scaricato dalla tua pagina, pur non vedendo alcun errore, non viene semplicemente riprodotto.
    Dal momento che si tratta di un campione loop ho l'impressione che possa contenere dei dati non audio i quali vengono digeriti male da IE9.
    Facendo qualche ricerca ho letto che IE non supporta i file con tipo di formato audio/x-mpeg, mentre supporta il più comune audio/mpeg. Ora non so esattamente quale sia la differenze e se il tuo file sia per caso un x-mpeg. Mi viene però da pensare che sia un problema del genere.
    Ad ogni modo basterebbe cambiare file, accertandosi che venga letto regolarmente da IE9.

    Forse bisognerebbe implementare l'audio senza utilizzare i tag specifici di html5. Pensi che sia possibile?
    Esistono diversi metodi per "incorporare" dell'audio in un documento html. A parte il più recente tag audio di HTML5, si possono usare altri tag come <bgsound>, <object> o <embed> che sono più o meno supportati dai browser meno recenti (vedi giusto qualche informazione tipo questa).

    Ho fatto qualche ricerca e alcune prove utilizzando direttamente i diversi tag e testando con versioni precedenti di IE. Ho verificato che funziona. Quindi si può pensare di utilizzare un tag o l'altro a seconda del browser che si sta utilizzando. Non ho però avuto tempo di capire come poter manipolare questi elementi (ad esempio object o embed) per controllare la riproduzione dell'audio via JavaScript.

    Direi però di sì. Si potrebbe implementare il sistema per renderlo cross-browser.
    Faccio qualche altra ricerca e ti aggiorno.

    se prendete questa strada aprite pure un'altra discussione nella sezione (x)html
    @Vincent.Zeno: Se fosse una soluzione cross-browsing? avrebbe poco senso anche aprire in (x)html. Non sarebbe comunque cross-posting?
    Io personalmente la vedo più una cosa da JavaScript.
    Facci sapere tu che fare
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Ciao, sto testando con IE9 su Vista, non mi da errori.
    Su quali versioni hai provato?
    Se la pagina è online, puoi postare il link?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  10. #10
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,812
    visto l'utilizzo di tag HTML5 sposto nella sezione corretta
    colgo l'occasione per sottolineare che IE, fino alla versione 8, non supporta i nuovi tag specifici di html5


Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.