Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1

    effetto sonoro con js - dove collocare l'<embed src="suono...> ?

    Un saluto a tutti...

    Volevo consigliarmi con qualche membro della comunità sulla seguente faccenda...

    Ho una pagina in cui onMouseOver su ogni link c'è un semplicissmo js che mi restituisce il suono di un .wav collocato <embed> in autostart=false...

    Funziona tutto correttamente...
    ma ho il dubbio su dove collocare esattamente il .wav...

    Nella sezione <head>? Non credo... anche se di fatto funziona anche così...

    Nel <body>? Direi di sì... ma allora, PRIMA o DOPO i contenuti?
    I .wav sono una ventina per un tot di 130 KB... immagino che la loro collocazione influenzi il tempo di visualizzazione della pagina...
    Dove li embeddo?

    Posto una simulazione del codice della pagina e dello script (perché la possiate valutare e/o adottare se vi interessa):

    codice:
    <html>
    <head>
    
    <embed src="suono.wav" autostart=false width=0 height=0 name="ilmiosuono" enablejavascript="true">
    
    
          <script>
          function EvalSound(soundobj) {
            var thissound= eval("document."+soundobj);
            thissound.Play();
          }
          </script>
    
    </head>
    
    <body>
    
    link
    
    </body>
    </html>
    Fino a qui ciò che più mi preme di sapere...

    Se poi qualcuno conosce invece qualche tecnica migliore per ottenere una risposta acustica al passaggio del mouse su un elemento, gliene sarei grato se me la indica...

    Grazie a chiunque prenda in considerazione il mio consulto...
    O saisons, ô châteaux,
    Quelle âme est sans défauts?

    Rimbaud - L'Éternité (1872)

    EsseZeta - VisualWriting | www.essezeta.org

  2. #2
    Mettilo in body.

    Ci sono diversi errori che pur non compromettendo il funzionamento dello script andrebbero evitati:
    codice:
    <html>
    <head>
          <script type="text/javascript">
          <!--
          function sound(id) {
            document.getElementById(id).Play();
          }
          //-->
          </script>
    </head>
    
    <body>
    
    <embed src="suono.wav" autostart="false" width="0" height="0" id="ilmiosuono" enablejavascript="true">
    link
    
    </body>
    </html>
    Ad esempio meglio specificare l'attributo type="text/javascript", poi gli attributi vanno messi sempre tra "" o '', in javascript bisongna evitare eval, insomma, cose così...

  3. #3
    ...intanto un ringraziamento a Mega69 per i consigli e le correzioni...

    Ora la pagina postata da lui oltre che funzionante è anche corretta... (anche se per principianti: ma tale sono io, tali sono magari altri e possono accontentarsi di questa versione...)

    Volevo però chiedere:

    è semplice fare <embed... dei file sonori in una pagina differente da quella che li richiama tramite js onMouseOver?
    Se sì, avete dritte da suggerire?


    ::::::::::::::::::
    II parte. Per chi avesse più tempo e voglia di leggere continuo con i dettagli:

    Il sistema attuale va benissimo se si vuole embeddare un unico .wav per avere una sorta di rollover sonoro... ma se hai venti link e vuoi venti suoni differenti... devi fare <embed di altrettanti .wav, appesantendo il caricamento della pagina...

    ...e se invece i file fossero su un'altra pagina da cui onMouseOver richiamo via js solo l'ID del .wav che mi interessa... tutto dovrebbe risultare più snello...
    O dico una caxxata?!?


    Intendiamoci per le mie esigenze immediate è già un soluzione decente, ancora grazie a Mega69

    Ma vediamo se intrigo qualcuno con un'ipotesi ABBASTANZA STUPIDA DA ESSERE SEGUITA:
    immaginate che voglia realzzare la fattoria per insegnare ai bambini i versi degli animali...
    • Senza flash... solo js e css
    • nella pagina hai l'immagine della fattoria ia ia o... (stilizzata con semplici div colorati...)
    • ci sono le varie bestiole.png belle e trasparenti e collocate via css in position ad hoc...
    • tu vai a puntare la pecora col mouse e...
    • oltre al rollover visivo della pecora che si volta...
    • ottieni il tuo bel <<Beeeeee>>

    Però mi servono almeno venti animali, perchè la pagina è vasta ed esplorabile oltre i limiti dello schermo...

    Ecco: le immagini sono leggerissime e mi si carica tutto con molta fluidità... invece una volta embeddati i suoni (138KB) devo attendere qualche lunghissimo... secondo...
    ...posso richiamare onMouseOver da un'altra pagina???
    O saisons, ô châteaux,
    Quelle âme est sans défauts?

    Rimbaud - L'Éternité (1872)

    EsseZeta - VisualWriting | www.essezeta.org

  4. #4
    In altre parole vorresti caricare i file sonori all'interno di un iframe?

    Mmh, secondo me non ti servirebbe a molto.
    Forse l'unico vantaggio è che la pagina principale sarebbe immediatamente caricata, ma in ogni caso dovresti aspettare il caricamento della pagina contenente i file sonori.

    L'unica idea decente che mi viene in mente è quella di codificare le musichette in base 64 e poi includerle tramite ad esempio ajax; in questro modo al posto di caricare 20 file ne caricheresti solo 1.

    Peccato che al mommento non ci sia modo di realizzare una cosa del genere in IE.


    EDIT:
    O forse la soluzione migliore è quella di non caricare tutti i file all'inizio ma di caricarli solo quando l'utente fa l'onmouseover: se i file sono piccoli e se l'utente dispone di una connessione veloce potrebbe anche andare


    codice:
    function suona(nomefile) {
      //box è un div vuoto
      document.getElementById("box").innerHTML = "<embed autoplay='true' src='" + nomefile + "' />";
    }

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Originariamente inviato da essezeta
    Ma vediamo se intrigo qualcuno con un'ipotesi ABBASTANZA STUPIDA DA ESSERE SEGUITA:
    immaginate che voglia realzzare la fattoria per insegnare ai bambini i versi degli animali...
    • Senza flash... solo js e css
    • nella pagina hai l'immagine della fattoria ia ia o... (stilizzata con semplici div colorati...)
    • ci sono le varie bestiole.png belle e trasparenti e collocate via css in position ad hoc...
    • tu vai a puntare la pecora col mouse e...
    • oltre al rollover visivo della pecora che si volta...
    • ottieni il tuo bel <<Beeeeee>>

    Però mi servono almeno venti animali, perchè la pagina è vasta ed esplorabile oltre i limiti dello schermo...

    Ecco: le immagini sono leggerissime e mi si carica tutto con molta fluidità... invece una volta embeddati i suoni (138KB) devo attendere qualche lunghissimo... secondo...
    ...posso richiamare onMouseOver da un'altra pagina???
    Dico la mia, la tua ipotesi anche bislacca sarebbe "accettabile" se utilizza in un intranet dove puoi gestire i pc (ad esempio su firefox devi installare il plug-in di media-player, ma anche lo stesso IE 7 ti da un avviso di protezione) e conosci la connessione che deve essere obbligatoriamente adsl (potresti ottimizzare con mp3 più leggeri) ma se non sono 130kb saranno 110kb sempre tanti sia che tu li includa sia che tu l'inserisca nella pagina (d'altronde una pagina internet media e sui 10kb).
    Ma se la pagina è pubblicata in internet la soluzione più pratica sicura ed efficiente è usare flash, oltre ad essere meno pesante (avesti anche un preload d'attesa) avresti la certezza che il tuo lavoro sarebbe visto da 99% dei browser e dai sistemi operativi.
    Puoi anche utilizzare l'ipotesi di mega69 (in ajax) l'unico dubbio è se il sito è molto frequentato il server andrebbe in crisi con tutte quelle chiamate ajax?
    Poi ogni uno fa quello che ritiene più giusto.

    P.S. @Mega69 sitomega.net punta ad una directory lo sapevi? Se non è più tuo toglilo dalla home del tuo profilo (è solo un consiglio)
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    Mi sa che la tua soluzione è migliore visto che almeno puoi gestire il caricamento del file.

    Quello che intendevo io comunque era di fare una sola chiamata a un file di testo contenente le musichette codificate in base64.
    So che si può fare visto che ultimamente ho visto qualche esempio in giro, ma è sicuro che con IE non funzioni, quindi in ogni caso è da escludere.

    Ah, ultima cosa, se possibile sarebbe meglio usare dei midi, quelli dovrebbero funzionare bene anche con connessioni lente.

    PS:
    Grazie mille andrea, avevo tolto il vecchio sito dalla firma ma mi ero dimenticato di toglierlo dal profilo. Ora l'ho sostituito

  7. #7
    Saluti a tutti...

    in risposta a cavicchiandrea (che intanto ringrazio dell'interessamento e dei consigli):

    -escludo flash (nessun pregiudizio, ma la mia ipotesi era un esperimento in js+css, per cui vale come tale...);

    -i plugin credo siano un problema relativo... chi non può playare un .wav?! e comunque, come dici tu, si può ottimizzare con .mp3 o midi e co.: nella mia ipotesi la questione era messa da parte a vantaggio delle altre...

    -credo che per l'esperimento della fattoria il sistema proposto da Mega69 (che torno a ringraziare) per fare una sola chiamata sia efficiente... non devo attendere l'<embed di tutti i suoni e se invece di onMouseOver faccio onClick quel piccolo ritardo al richiamo di ogni .wav (ma sono d'accordo riguardo l'impiego dei midi) non è brutto: mentre guardi la .png della pecorella che in :hover si volta e apre la bocca... senti il suo verso...

    Avrei trasformato la tua proposta di una sola chiamata da così:
    codice:
    function suona(nomefile) {
      //box è un div vuoto
      document.getElementById("box").innerHTML = "<embed autoplay='true' src='" + nomefile + "' />";
    }
    a così (come ti sembra? tu/voi siete molto più competenti):
    codice:
    <script type="text/javascript">
    	function DHTMLSound(mysound) {
    	document.getElementById("box").innerHTML=
    	"<embed src='"+mysound+"' hidden=true autostart=true loop=false>";
    	}
    </script>
    
    </head>
    <body>
    
    digital 
    <span id=box></span>
    ::::::::::::

    Mettendo però da parte la fattoria (che è venuta fuori per ipotesi) e tornando al problema originario...
    che era, lo ricordo, il fatto che con l'embed di tanti suoni avevo un ritardo nel caricamento della pagina...

    1. intanto, noto che il tempo di caricamento della pagina non dipende dal peso in kb dei file sonori, ma dal numero di <embed che faccio (se faccio embeddare il nulla, cioè file che non esistono, il tempo di caricamento non muta... se faccio <embed di soli 2/3 file allora ottengo risposte in tempi quasi impercettibili)...
    è normale? che cose se ne sa?

    2. poi, SOPRATUTTO, il fatto è che a me piaceva l'idea di avere risposte sonore ISTANTANEE al passaggio del mouse... e ciò lo posso ottenere solo se faccio <embed dei file sonori... devo però sorbirmi il caricamneto lento della roba di cui è composta la mia pagina...
    Ecco un esempio che ho implementato su una copia della mia home page:
    esempio a RISPOSTA ISTANTANEA
    (come si può vedere le risposte sonore sono istantanee, però bisogna attendere il caricamento di tutti gli <embed...)

    In alternativa bisogna fare con la soluzione di Mega69 ottenendo questa versione:
    a Esempio a RISPOSTA RITARDATA...
    (questa volta il caricamento è bello rapido, ma il sonoro lo ottengo dopo un attimo...)

    Avevo perciò pensato di ovviare al problema:
    -richiamando onMouseOver da altra pagina già caricata, ad esempio in un iframe (come supponeva Mega69), ma non ci sono riuscito...

    -in un popunder (ma è una soluzione sporchissima e poi mi viene bloccata!! )

    -oppure provando a dare la simulazione in js di una splash page fino a che non ottengo l'intero caricamento della pagina, con questo scriptino...
    ma non cambia molto, perché il tempo di attesa rimane sempre quello... a meno che non metta come spash page una versione leggera della mia pagina che poi quando è pronta va a sostituirglisi...

    Ok!!! ho scelto di seguire questa direzione, ma con una SOLUZIONE DIFFERENTE...
    questa:
    codice:
    <body onload="document.getElementById('attendendo_che_si_carichi').style.display='none';document.getElementById('ormai_caricato').style.display='block'">
    
    <div id="attendendo_che_si_carichi">
    la mia pagina in versione MUTA, quindi leggera (magari via <include> in php per non avere codice duplicato)
    </div>
    
    <div id="ormai_caricato" style="display:none">
    la mia PAGINA PARLANTE, quindi pesante
    </div>
    Funziona dignitosamente, nonostante abbia lo stesso tempo di attesa, la versione leggera della pagina (4kb) la ottengo al volo... l'unica cosa è che si tratta di una soluzione "per gli occhi"... infatti fino a che la PAGINA PARLANTE non si è caricata, la PAGINA MUTA non è interattiva, i link non sono cliccabili, ecc.
    Eccone la VERSIONE LIVE
    (notare come fino al caricamento della versione definitiva, la tagcloud non è cliccabile)

    Mi chiedevo quindi:
    secondo qualcuno di voi... si può fare qualcosa?

    PS: la sto facendo lunga... lo so...
    ma sono esperimenti utili per familiarizzare con js in vista di applicazioni in progetti futuri... e credo che condividerli sul forum possa essere d'aiuto ad altri novellini di js come me
    (che vado a rovinare la mia home page dopo TANTA FATICA per validarla strict!! ma mi piacerebbe imparare un po' più di js... )

    Grazie comunque a tutta la community che mi ha dato tanto...
    O saisons, ô châteaux,
    Quelle âme est sans défauts?

    Rimbaud - L'Éternité (1872)

    EsseZeta - VisualWriting | www.essezeta.org

  8. #8
    La versione 1 è proprio da escludere, mi ha quasi impallato il browser.

    La 3 invece mi pare abbastanza buona, però per sicurezza dovresti generare gli embed con innerHTML ( solo che questa volta li carichi tutti in una volta e al caricamento della pagina avvenuto )

    Non usare due versioni della pagina, lasciane soltanto una già utilizzabile anche senza i suoni e senza javascript.

  9. #9
    ...grazie della dritta, Mega69...
    stavo per desistere... (e in effetti, diciamo che abbandono l'idea di mettere online la tagcloud parlante, continuo solo per venire a capo della procedura... perché è molto interessante)

    Questa cosa che dici la riesco ad "intuire" come necessaria:
    per sicurezza dovresti generare gli embed con innerHTML ( solo che questa volta li carichi tutti in una volta e al caricamento della pagina avvenuto )
    ma se provo a metterla in pratica faccio un casino... :berto:

    Se ti avanzano due minuti mi correggi la sintassi? Secondo me sbaglio nella parte in bold, ma duro come sono probabilmente sbaglio dovunque... non mi viene renderizzato niente

    :::::::::::::::::
    <body onload="document.getElementById('attendendo_che_si _carichi').style.display='none';
    document.getElementById('ormai_caricato').innerHTM L = '<embed src='primo.wav'>;
    <embed src='secondo.wav'>;
    <embed src='terzo.wav'>';

    .style.display='block'">

    <div id="attendendo_che_si_carichi">
    la mia pagina
    </div>

    <div id="ormai_caricato" style="display:none">
    NIENTE perché verranno innerati gli <embed
    </div>
    </body>
    :::::::::::::::::

    ps: mi sai indicare una risorsa che illustri ai PRINCIPIANTI (ma volenterosi) di js Attributo + Valori + Descrizione ?
    tipo:
    onLoad - può essere così o colì - genera il tale effetto
    getElementById - ecc.
    Per i css mi sono impratichito così, a furia di variazioni sul tema + F5... se riuscissi a maneggare js almeno la metà di come maneggio css...

    Buona serata, a te e a tutti...
    O saisons, ô châteaux,
    Quelle âme est sans défauts?

    Rimbaud - L'Éternité (1872)

    EsseZeta - VisualWriting | www.essezeta.org

  10. #10
    Forse è meglio così, d'altronde nella presenza di moltemparole chiave nella tag cloud rischi di appesantire eccessivamente la pagina...

    Cmq in javascript le stringhe racchiuse tra virgolette possono occupare una sola riga ( al contrario di php e altri )

    Io farei così:
    Codice PHP:
    //caccia l'onload dal body, si può definire direttamente da javascript
    window.onload = function() {
      
    //Qui metti tutti i nomi dei files
      
    var files = [
        
    "primo.wav",
        
    "secondo.wav",
        
    "terzo.wav"
      
    ],
      
    html "",
      
    0,
      
    files.length;
      for(; 
    i!==li++)
        
    html += "<embed autostart='false' loop='false' src='" files[i] + "' id='suono" "' />";
        
    document.getElementById('ormai_caricato').innerHTML html;

    Non c'è bisogno di nascondere il div ormai_caricato.

    Ah, un altra cosa.
    Il motivo per cui ti consiglio innerHTML al posto degli embed già inseriti nel codice è il diverso comportamento di IE e di Firefox con gli embed nascosti: mentre Firefox non carica gli embed fin quando non vengono mostrati, al contrario IE li carica fin da subito.
    Te ne puoi accorger provando la versione LIVE e quella ISTANTANEA: in Explorer il risultato è identico.

    PS: guarda qui http://www.google.com/search?q=javas...ient=firefox-a
    Quella più chiarw è quasi sempre la guida di Firefox, purtroppo però è legata all'implementazione di questo browser.

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 © 2025 vBulletin Solutions, Inc. All rights reserved.