Aggiungere notifica sonora a wpforo plugin

[systemcrack]

Ciao ragazzi,
vi scrivo perché ho un forum su wordpress creato tramite il plugin wpforo e super modificato (da mettere le mani nel codice per intenderci) a cui vorrei aggiungere un suono alla notifica visiva (nel front-end). Quando un utente viene menzionato, oppure qualcuno risponde al suo post, oppure riceve messaggi privati, visualizza una notifica che aggiunge alla campanella il nr di notifiche relative all'utente. Ora vorrei che ogni notifica visiva fosse seguita da un suono.



Posso immaginare i vostri primi dubbi e mi chiederete perché non mi rivolgo a quelli di wpforo o del team Givectors per richiedere la modifica?
Perché sono cari ammazzati (parliamo di 300$ minimo) e si riservano la possibilità di commercializzare l'idea.. a ciò aggiungiamo che io non guadagno soldi dal forum e per me è solo un hobby/gioco..

Premesso questo ho provato ad analizzare il codice della pagina, quando l'utente non ha notifiche e che risulta come segue:

Codice: Seleziona tutto

<div class="wpf-alerts"><div class="wpf-bell"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg></div></div>

E quando l'utente ha una notifica:

Codice: Seleziona tutto

<div class="wpf-alerts wpf-new">
                         <div class="wpf-bell" wpf-tooltip="Hai una nuova notifica" wpf-tooltip-size="middle">
                    <svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                        <path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"></path>
                    </svg>
                    <span class="wpf-alerts-count">1</span>
                </div>
                 </div>

Ora non essendo un super esperto e avendo una conoscenza molto base dei linguaggi java, php, sql sono bloccato in quanto non riesco ad individuare l'azione/evento che mi permetta di fare partire il suono quando scatta la notifica visuale.
Ho provato anche ad indagare tra i files di wpforo, ma sono tantissimi e non sapendo dove cercare.. spero in un vostro aiuto.
E' un mese che cerco di capire dove, come e quando.. magari sono io che non cerco con i termini giusti ma mi sono un pò bloccato e non riesco a proseguire nel progetto. Vi sarei davvero grato in un aiuto, dritta, un colpo di bastone sulla testa
Spero che l'argomento risulti interessante e che ne esca una discussione illuminante
Grazie a tutti.

[systemcrack]

Mi chiedevo c'è un qualche tipo di strumento che rileva e riporta le varie chiamate/azioni di un sito? Ad esempio lo metto in funzione, poi faccio scattare la notifica di un utente e trovo la chiamata su cui baserò il mio script.

[Dylan666]

Considerazioni sparse:

• il linguaggio è JavaScript, non Java, sono due cose diversissime, se le confondi quando cerchi su Google ottieni risultati sbagliati
• i suoni nei siti sono una cosa fastidiosissima. Se lo fai per divertirti bene ma sappi che tutti lo odieranno
• modificare pagine di WordPress richiede esperienza in HTML, JavaScript, PHP e soprattutto WordPress stesso. Le modifiche fatte come le fai tu al primo aggiornamento di WordPress salteranno se non ragioni "alla WordPress"
• hai guardato se quello che ti serve già esiste? https://it.wordpress.org/plugins/tags/sound/
• lo strumento che cerchi che "rileva e riporta le varie chiamate/azioni di un sito" ce lo hai già, nel browser, basta premere F12
• lo strumento di F12 richiede grande esperienza per essere maneggiato

[Dylan666]

Aggiungo:
https://stackoverflow.com/questions/673 ... -wordpress

50 dollari:
https://webtrendyio.github.io/wp-soundify/
https://codecanyon.net/item/wp-sound-cl ... 5?s_rank=7

[Dylan666]

Scusa, ma avevo letto male una parte della tua esigenza, condizionato da un altro post in cui ti avevo risposto.
Ma quindi i suoni devono sentirsi quando ci sono delle notifiche?
Ma perché se ti scrivono un messaggio mentre stai leggendo la pagina la notifica arriva?
O arriva appena apri un'altra pagina?
Perché secondo me al momento nemmeno la grafica cambia "in tempo reale" mentre ti scrivono.
Sembrerà una sottigliezza ma non è così

[systemcrack]

Si un tempo giocavo parecchio con i forum in phpbb come questo su cui siamo, poi però mi infastidiva il non ricevere notifiche in tempo reale sopratutto se stai facendo altro.. quindi ho optato per wordpress e wpforo perché ogni 60 sec ricarica l'elemento e quindi hai quasi la notifica immediata. Il plugin che mi linki tu andrà per wordpress ma non per wpforo.

[Dylan666]

Ammetto che non conosco proprio wpforo e avevo dato per scontato per potessero usare i plugin di WordPress.
Il concetto in maniera semplice è: da cosa riesci a capire se ci sono notifiche attive nella pagina?
Ad esempio se viene richiamata un'immagine particolare?
Oppure se cambia la visibilità di un DIV o se riempito il campo hidden di un form?
In quel caso metti l'elemento DOM sotto osservazione di un javascript e con quello fai partire il suono quando si verifica la condizione.
Dalle righe sopra vedo ad esempio che potresti controllare la classe "wpf-alerts-count" degli span, pure se di tutti i metodi è uno dei più scomodi (se potessi dargli un ID o scegliere un elemento che lo abbia sarebbe meglio).

Più specifico di così non riesco ad essere non conoscendo quel forum.

[Dylan666]

Un esempio se non trovi di meglio della classe:

Codice: Seleziona tutto

<html>
<body>

<p>Conta gli elementi con una specifica classe:</p>

<div class="example">Element1</div>
<div class="example">Element2</div>
<div class="example">Element3</div>
<br>
<div Id="ClassiContate">ciao</div>

<script>
const TotaleClassi = document.getElementsByClassName("example").length;
document.getElementById('ClassiContate').innerHTML = TotaleClassi;
</script>

</body>
</html>


Così controlli il numero.
A te interessa se è maggiore di 0 e in quel caso vai con il suono

[systemcrack]

Buongiorno Dylan, essendo il progetto piuttosto complesso, ho riflettuto e sono giunto alla conclusione che la prima cosa fondamentale da fare è trovare i files che gestiscono la campanella. In primis ho cercato nel codice sorgente della pagina i relativi riferimenti wpf-alerts-count. Con un software chiamato FNR ho ricercato la stringa in tutto il pacchetto wpforo identificano solo 2 files che gestiscono quella classe classes/Activity.php e assets/widget.js. Ste sera quando avrò un pò ditempo studierò i files e vedrò se riesco a ricavarne qualche cosa di buono/utile. Comunque sono sicuro al 99,9% che l'hook è in questi 2 files. Vi aggiornerò man mano che raggiungo dei risultati.

[Dylan666]

Augurandoti buona fortuna nel trovare ciò che cerchi ecco un esempio in cui il suono viene riprodotto se viene trovato almeno un elemento abbinato alla classe "example" (che nel tuo caso è "wpf-alerts-count" supponendo che la classe non sia proprio usata se le notifiche sono a zero).
Il DIV con ID chiamato "ClassiContate" non serve a nulla, solo a me per vedere quante ne conta

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio">
  <source src="https://mrlab.altervista.org/sounds/how-how-how-babbo.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<p>Conta gli elementi con una specifica classe:</p>

<div class="example">Element1</div>
<div class="example">Element2</div>
<div class="example">Element3</div>
<br>
<div Id="ClassiContate">ciao</div>

<script>
var TotaleClassi = document.getElementsByClassName("example").length;
document.getElementById('ClassiContate').innerHTML = TotaleClassi;

var x = document.getElementById("myAudio");
  if (TotaleClassi > 0) {  x.play(); }
 
</script>

</body>
</html>