Talmente semplice mantenere aggiornati i player audio in modo persistente continuo a giocare durante la navigazione di pagine HTML

Sto usando Dewplayer a suonare una musica di sottofondo sul mio sito.
Ho fatto l’integrazione e funziona benissimo.

Quando clicco sulla mia pagina successiva, il giocatore smette di giocare la musica fino a quando e a meno che io di nuovo, fare clic per avviare la ripristina la musica. Le mie pagine sono pagine HTML statiche. Di seguito è il mio codice con il link al file.

CSS:

#content {
  margin-left:15%;
  width:500px;
  text-align:left;
}
#hint {
  color:#666;
  margin-left:15%;
  width:300px;
  text-align:left;
  margin-top:3em;
}

HTML:

  <a href="link1.html">Link1</a>
    <a href="link2.html">Link2</a>
    <a href="link3.html">Link3</a>




<object type="application/x-shockwave-flash" data="dewplayer-mini.swf?mp3=mp3/test2.mp3" width="160" height="20" id="dewplayer-mini"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-mini.swf?mp3=mp3/test2.mp3" /></object>

In modo da il link di cui sopra, quando si fa clic per riprodurre la musica, la musica verrà suonata, ma non appena si fa clic su link2 o link3, sarà interrotta. Ciò di cui ho bisogno è che esso deve essere svolto in maniera coerente e costante, indipendentemente dalla navigazione tra le pagine. Le persone mi hanno suggerito con set di Frame, iframe o flash (non il flash audio player), ma io non sono disposto a usarli.

Ho cercato un sacco di una simile domanda su Stackoverflow che sono come qui sotto.

https://stackoverflow.com/questions/18411148/continuous-persistant-audio-players

Come mantenere la riproduzione audio durante la navigazione attraverso le pagine?

Lettore Audio: continuo gioco

Il secondo ha suggerito che può essere fatto con l’Ajax, ma io sono la creazione di pagine statiche e non hanno una grande mano utilizzando Ajax.

PS: sono aperto all’uso di qualsiasi altro giocatore che ha questa funzionalità.

EDIT : Creato utilizzando jQuery

Come persone mi hanno consigliato di usare jQuery/JavaScript per flash, ho creato il giocatore che utilizza jQuery, come di seguito. La demo, la Piazza rossa casella di stop/pausa e il Blu è il Gioco.

HTML:

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio>
<a class="soundIcnPlay" title="button" id="button">&nbsp;</a>

Il Codice jQuery:

$(document).ready(function() {
    var playing = false;

    $('a#button').click(function() {
        $(this).toggleClass("down");

        if (playing == false) {
            document.getElementById('player').play();
            playing = true;
            $(this).removeClass('soundIcnPlay');
            $(this).addClass('soundIcnPause');

        } else {
            document.getElementById('player').pause();
            playing = false;
            $(this).removeClass('soundIcnPause');
            $(this).addClass('soundIcnPlay');
        }


    });
});

CSS:

.soundIcnPlay {
    background: none repeat scroll 0 0 red;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

.soundIcnPause {
    background: none repeat scroll 0 0 blue;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

Il jsFiddle Link:

Audio Demo

Se si dispone di pagine statiche, cioè se davvero le variazioni di indirizzo con ogni clic, posso immaginare che tale funzionalità non è costruito in quanto l’utente non la vuole. Immaginate c’è questo sito che è iniziato alcuni fastidiosi commerciale e non è possibile spegnerlo, lasciando il sito.
Sono d’accordo, ma questo è intenzionale, come ci sono un sacco di sito web che fa questo di suonare la loro musica di sottofondo. Quindi, c’è un modo per raggiungere questo obiettivo ??
Forse si memorizzano alcune informazioni di gioco in un cookie o un id di sessione e poi continua e si avvia automaticamente. Puoi postare un esempio di siti web a giocare in modo persistente con pagine statiche?
Certo @Trilarion – mi riferisco a questo post, dove hanno menzionato su tali siti web. netmix.com/… io sono il controllo di ognuno di essi e funziona alla perfezione, ma sono molto sicuro che non fossero le pagine statiche. Si può avere uno sguardo

OriginaleL’autore Nitesh | 2014-06-17

3 Replies
  1. 1

    Per quanto ne so AJAX è l’unico modo per avere un audio giocatore cross browser su più pagine. Non appena tutta la pagina viene ricaricata, il tutto in esecuzione su di esso si ferma, per questo motivo si è costretti a scambiare solo una parte di esso. È possibile salvare la posizione del giocatore in uscita dalla pagina, ma i suoni dovrebbero essere fuori fino a quando la nuova pagina viene caricata e initalized. Se si può anche scambiare i tuoi contenuti in alcuni iframe, ma che avrebbe dato nuovi problemi.

    A proposito, non è spaventoso per caricare una pagina in un div ad esempio utilizzando jQuery. Si potrebbe, per esempio, aggiungere un DIV per la tua pagina, utilizzando jQuery carico-funzione per estrarre pagine:

    http://api.jquery.com/load/

    C’è anche un jQuery plugin che consente di automatizzare alcune delle attività che è sicuramente di solito, a leggere la risposta sul seguire in MODO domanda:

    Caricare la pagina HTML in modo dinamico nel div con jQuery

    Sì @Malte .. concordo con la tua soluzione, ma potete illustrare con un po ‘ di codice con riferimento al mio codice sopra per capire meglio ?? Grazie per il vostro tempo e sforzi.
    Hai dato un’occhiata al sorgente della pjax.heroku.com/dinosaurs.html ? Esso mostra un semplice esempio di come strutturare la pagina e come chiamare il pjax script. Assicurati di mettere il lettore audio esterno del <div> con il contenuto dinamico (<div id=”main”> e si deve continuare a giocare quando il contenuto dinamico viene scambiata.
    Grazie @Malte .. ho visto la demo, ma non riusciva a vedere alcuna differenza quando la pagina cambia. Ho modificato la mia domanda di cui sopra, creando il giocatore con jQuery. Come persone mi hanno consigliato di usare jQuery/Javascript invece di flash. La demo, la Piazza rossa casella di stop/pausa e il Blu è Giocare
    Ciao. Ho dato un occhiata al tuo codice e non vedo alcun riferimento a pjax. Che cosa hai provato e cosa c’è il problema che hai eseguito?
    Ho appena messo jQuery semplice pausa e gioca il codice che gioca e si mette in pausa il lettore. Non ho provato pJax, come non ho potuto ottenere qualsiasi file demo, etc. lavorando sul mio fine. Così ho fatto un’opzione alternativa. – @Malte

    OriginaleL’autore Malte Köhrer

  2. 1

    Si vuole guardare in livelli CSS e anche più probabile HTML In Linea Frame (fotogrammi)…

    Penso che questo fotogramma tutorial [ http://manda.com/iframe/ ] sarà sufficiente per ottenere ciò che si desidera. Scorrere verso il basso per il “Semplice Collegamento all’iFrame Esempio” voce e ci verrà mostrata una demo di un i-frame holding link di navigazione sopra a un altro contenitore html delle pagine di link contenuti (AltaVista, AOL, ecc). Completo di scorrimento.

    Comunque il punto è: dove tali collegamenti sono è dove il giocatore sarebbe disposto, allora si può visitare altre pagine del tuo sito, ma il giocatore è costantemente visibile e ininterrotto nel proprio contenitore di i-frame. Di chiudere il sito finisce la musica. Anche l’indirizzo del browser potrebbe non cambiare, come si fa clic su collegamenti alle altre pagine del sito (in quanto mostrano tramite un i-frame all’attuale indirizzo url)

    Un altro buono (vedi Più Fotogrammi esempio):

    [ http://www.htmlgoodies.com/tutorials/frames/article.php/3479271 ]

    Anche qui c’è un aspetto di base nel CSS Strati thingy-majik:

    [ http://www.echoecho.com/csslayers.htm ]

    Livelli CSS non aiutare meglio di me-frame, ma per il completamento bene, dal momento che potrebbe essere un’opzione per qualcuno, un giorno, ho aggiunto il link.
    Grazie per la tua risposta, ma come già detto nella mia domanda, non sto cercando un iFrame/frameset soluzione.
    Ah ora la vedo io. A volte uno ha detto che c’è prima la vedo io. Posso chiedere perché non si desidera che i frame? Sono lì per soddisfare il vostro tipo di esigenza, tra gli altri. Comunque si dovrebbe vedere se il tuo Flash player audio possibile impostare i cookie? L’unico altro modo posso pensare di tenere traccia di erm… tracce audio (e riprendere la posizione) quando si raggiunge un’altra pagina. Ci sarà sempre un “taglio”, l’audio, anche se quando la nuova pagina di dati sostituisce a quello attuale nel browser contenitore/spazio. I-frame non tagliare l’audio..
    iframe/Frame non sono un bene per il SEO scopo, l’importanza della creazione di pagine è perso, se voglio fare in un iframe. Per esempio, posso fare un intero sito web sul jQuery tabs schede di agire come la navigazione, però, servirà il mio audio scopo, ma non è quello che sto cercando non è consigliabile per uno qualsiasi creazione di un sito web con .le pagine html. Come accennato sopra, sono anche belle sostituzione di quello di flash in HTML. – @VC.Uno
    Va bene, ti sento sulla (i)frame problema, Se ci si chiude la porta, poi i cookie sono probabilmente la migliore alternativa per una coerente giocatore. Che a dire il biscotto diventa un centro di checkpoint per qualsiasi giocatore copia in futuro caricato le pagine per controllare che traccia o posizione dovrebbe continuare (dando l’impressione di continuità). HTML o Flash non importa, ma se si può aggiornare il proprio cookie ogni secondo e che ogni copia del giocatore nei vari .le pagine html possono leggere-da/aggiornamento che troppo etc.

    OriginaleL’autore VC.One

  3. 1

    Questo è un splendida soluzione senza un giocatore. Si utilizza puro HTML5 Audio in oggetto; eppure ci sarà un piccolo spazio tra le pagine, ma non giocare dall’inizio. Spero accettate gap. Grazie per la bella domanda +1.

    Sono compresi la risposta con un po ‘ di trucco per diminuire il divario tra il caricamento della pagina.

    Si può vedere dall’immagine allegata; di caricare prima cosa sulla cascata; a meno di 50 ms…. ma adatti per il testing e l’host locale. ie. intervallo di 0 ms.

    audio.js file:

    function setCookie(c_name,value,exdays)
    {
        var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + 
        ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value;
    }
    
    function getCookie(c_name)
    {
        var i,x,y,ARRcookies=document.cookie.split(";");
        for (i=0;i<ARRcookies.length;i++)
        {
          x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
          y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
          x=x.replace(/^\s+|\s+$/g,"");
          if (x==c_name)
            {
            return unescape(y);
            }
          }
    }
    
    var song = document.getElementsByTagName('audio')[0];
    var played = false;
    var tillPlayed = getCookie('timePlayed');
    function update()
    {
        if(!played){
            if(tillPlayed){
            song.currentTime = tillPlayed;
            song.play();
            played = true;
            }
            else {
                    song.play();
                    played = true;
            }
        }
    
        else {
        setCookie('timePlayed', song.currentTime);
        }
    }
    setInterval(update,1000); 
    //default is 1000 ms; but for testing I set that to 0 ms.. 
    I guess it's exhausting JS interpreter (don't know much about it).

    player.html file:

    <html>
    <head>
    <title>Player</title>
    </head>
    <body>
        <audio id="audioplayer" autobuffer="" loop="true" preload="auto" src="song.mp3">
        </audio>
        <!-- you must include JS after the player; otherwise you will get undifiend object-->
        <script src="audio.js"></script>
    </body>
    </html>
    • Utilizza Cookies senza un plugin.
    • Non è possibile rimuovere il gap permanentemente, ma per favore sentitevi liberi di modificare, se si pensa che è possibile!.

    Talmente semplice mantenere aggiornati i player audio in modo persistente continuo a giocare durante la navigazione di pagine HTML

    OriginaleL’autore wpcoder

Lascia un commento