Effetto sonoro hover su icone in javascript

[systemcrack]

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.

[Dylan666]

Provato, funzionante, conciso e facilmente espandibile:
https://stackoverflow.com/a/14926552

[systemcrack]

Ciao Dylan666, grazie per la risposta, faccio qualche esperimento e ti faccio sapere. Se non ci risentiamo prima.. buon weekend

[systemcrack]

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.


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



Dove sto sbagliando Dylan?

[Dylan666]

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/

[systemcrack]

Buongiorno Dylan, grazie per il consiglio, farò le prove del caso e poi tornerò a riferire. Buona Domenica.

[systemcrack]

Scusate il ritardo, ma tra influenza e lavoro è stato un periodo impegnativo
Funziona proprio come serviva a me. Grazie Dylan.

[Dylan666]

Grazie a te del feedback