Condividi:        

Effetto sonoro hover su icone in javascript

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Anthony47, Triumph Of Steel, archimede

Effetto sonoro hover su icone in javascript

Postdi systemcrack » 17/01/25 08:51

Ciao a tutti,
è da un pò che cerco una soluzione per poter aggiungere un effetto sonoro in hover su 3 icone/emoji poste sul mio sito in wordpress.
Ho provato per molto tempo a trovare una soluzione orientata più sui css, che è il linguaggio che conosco meglio, ma ovunque abbia letto tutti consigliavano il javascript in quanto in css non è possibile.
per il momento l'esempio più semplice che ho trovato è questo https://codepen.io/abirana/pen/GdzQRb, ma non sono riuscito ad aggiungere altre icone con suoni differenti/adattare l'esempio al mio caso.

L'idea nasce dal fatto di aggiungere delle icone natalizie (ma poi lo si può applicare anche ad altre festività), in un punto specifico, di modo che se l'utente ci passa sopra si sente il suono e magari .

Es.
Le icone che vorrei usare sono queste:
emoji babbo natale = suono con risata babbo natale - Suono in hover e in click - Il suono si interrompe se il mouse si sposta dall'hover
emoji albero = suono campanelle di natale - Suono in hover e in click - Il suono si interrompe se il mouse si sposta dall'hover
emoji pacco = suono gingle di natale - Suono in hover e in click - Il suono si interrompe se il mouse si sposta dall'hover

Il sito è in wordpress e per inserire il codice utilizzo prevalentemente il plugin wpcode, ma ho anche modifiche apportate fisicamente e direttamente ai file di wordpress/wpforo.

Ps
Approfitto per segnalare che ho notato un bug sul forum se posto l'emoji come immagine ricevo un errore critico.
Avatar utente
systemcrack
Utente Senior
 
Post: 473
Iscritto il: 27/07/17 09:40

Sponsor
 

Re: Effetto sonoro hover su icone in javascript

Postdi Dylan666 » 17/01/25 12:56

Provato, funzionante, conciso e facilmente espandibile:
https://stackoverflow.com/a/14926552
Avatar utente
Dylan666
Moderatore
 
Post: 40143
Iscritto il: 18/11/03 16:46

Re: Effetto sonoro hover su icone in javascript

Postdi systemcrack » 17/01/25 14:03

Ciao Dylan666, grazie per la risposta, faccio qualche esperimento e ti faccio sapere. Se non ci risentiamo prima.. buon weekend ;)
Avatar utente
systemcrack
Utente Senior
 
Post: 473
Iscritto il: 27/07/17 09:40

Re: Effetto sonoro hover su icone in javascript

Postdi systemcrack » 17/01/25 14:50

Ho dato un'occhiata al codice e fatto subito un esperimento. Se non ho capito male l'unica parte che è da variare è l'html che nel post su stackoverflow è così:
Codice: Seleziona tutto
<p onmouseover="PlaySound('mySound')" onmouseout="StopSound('mySound')">Hover Over Me To Play</p>
<audio id='mySound' src='https://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg' />

ed io l'ho modificato in questo modo:
Codice: Seleziona tutto
<p onmouseover="PlaySound('myBabboNatale')" onmouseout="StopSound('myBabboNatale')"> emoji </p>
<audio id="myBabboNatale" src="https://mrlab.altervista.org/sounds/how-how-how-babbo.ogg" />

<p onmouseover="PlaySound('mychristmastree')" onmouseout="StopSound('mychristmastree')"> emoji </p>
<audio id="mychristmastree" src="https://mrlab.altervista.org/sounds/the-bells-of-santa-claus.ogg" />

<p onmouseover="PlaySound('mychristmasgift')" onmouseout="StopSound('mychristmasgift')"> emoji </p>
<audio id="mychristmasgift" src="https://mrlab.altervista.org/sounds/toy-singing-santa-claus-is-coming-to-town.ogg" />

allego di seguito un immagine perchè qui sul forum non posso postare il codice con le emoji altrimenti ricevo errore critico.
Immagine

A questo punto però quando provo a guardare l'anteprima del codice vedo che compare solo la prima delle 3 icone (babbo natale).

Immagine

Dove sto sbagliando Dylan?
Avatar utente
systemcrack
Utente Senior
 
Post: 473
Iscritto il: 27/07/17 09:40

Re: Effetto sonoro hover su icone in javascript

Postdi Dylan666 » 18/01/25 13:22

Se metti tutti i tag Audio tutti alla fine funziona, ma non sono sicuro siano scritti bene guardando qui:
https://www.w3schools.com/tags/tag_audio.asp

Forse è più corretto così

Codice: Seleziona tutto
<audio id="myBabboNatale">
  <source  src="https://mrlab.altervista.org/sounds/how-how-how-babbo.ogg" type="audio/ogg">
</audio>


Demo:
https://jsfiddle.net/9sntkxw7/1/
Avatar utente
Dylan666
Moderatore
 
Post: 40143
Iscritto il: 18/11/03 16:46

Re: Effetto sonoro hover su icone in javascript

Postdi systemcrack » 19/01/25 08:55

Buongiorno Dylan, grazie per il consiglio, farò le prove del caso e poi tornerò a riferire. Buona Domenica.
Avatar utente
systemcrack
Utente Senior
 
Post: 473
Iscritto il: 27/07/17 09:40


Torna a Programmazione


Topic correlati a "Effetto sonoro hover su icone in javascript":


Chi c’è in linea

Visitano il forum: Nessuno e 14 ospiti